jquery开发的数字相加游戏(你能玩几分)

jquery开发的数字相加游戏,我在一轮中玩了632分(如下图),你能玩几分,哈哈...

jquery开发的数字相加游戏(你能玩几分)文章来源地址https://www.yii666.com/article/764060.html

我要试一试网址:yii666.com

下面贡献下这款“数字相加游戏”的开发过程。

html部分:

 <div class="container">
<div class="how-to-play">
<h1>
How to Play</h1>
<p>
数字加法游戏-- 单击左侧的数字色块相加等于右上角的数字,当相等时,这几个色块消失。
</p>
<button id="got-it">
OK, 开始!</button>
</div>
<div class="board">
</div>
<div class="right">
<span class="sum-display"></span><span class="score-display"></span>
<button id="restart">
重新开始</button>
<a href="#!" class="how-to-play">游戏攻略</a>
</div>
</div>
<div style="text-align: center; font-size: 12px;">
<br />
来源:<a href="http://www.w2bc.com/shili">w2bc.com(爱编程)</a> 作者:拎壶充
</div>

js脚本:网址:yii666.com<文章来源地址:https://www.yii666.com/article/764060.html

var $tCount = 64;
var $totalVal = 316;
var $level = 1;
var $score = 0;
var $targetVal = 0; var trackTotalVal = function (val) {
$totalVal -= val;
return $totalVal;
}; // gameboard setup
var $tiles = function () {
return [1, 1, 1, 1, 1, 1, 1, 1,
2, 2, 2, 2, 2, 2, 2,
3, 3, 3, 3, 3, 3, 3,
4, 4, 4, 4, 4, 4, 4,
5, 5, 5, 5, 5, 5, 5,
6, 6, 6, 6, 6, 6, 6,
7, 7, 7, 7, 7, 7, 7,
8, 8, 8, 8, 8, 8, 8,
9, 9, 9, 9, 9, 9, 9];
}; var $tilesShuffle = function (arr) {
var $newArr = [];
var $randomIndex;
var $element;
while (arr.length) {
$randomIndex = Math.floor(Math.random() * arr.length);
$element = arr.splice($randomIndex, 1);
$newArr.push($element[0]);
}
return $newArr;
}; var $makePieces = function (arr) {
var $pieces = [];
var $piece;
while (arr.length) {
$piece = '<div>' + arr.pop().toString() + '</div>';
$pieces.push($piece);
}
return $pieces;
}; var $makeBoard = function () {
var $gameTiles = $makePieces($tilesShuffle($tiles()));
while ($gameTiles.length) {
$('div.board').append($gameTiles.pop());
}
}; var $clearBoard = function () {
$('.board').empty();
}; // generates # for player to make
var $genSum = function (level) {
var $maxVal = (level * 5) + 10;
var $minVal = 10;
if ($totalVal > $maxVal && $tCount > 10) {
return Math.floor(Math.random() * ($maxVal - $minVal + 1) + $minVal);
}
else if ($tCount <= 10 && $totalVal > $maxVal) {
return $genSumFailsafe($maxVal);
}
else if ($totalVal <= $maxVal) {
return $totalVal;
}
}; // fixes the '$genSum generates # too big or not possible w/ available tiles' bug.
var $genSumFailsafe = function (max) {
var $max = max;
var $liveTiles = [];
var $l = 0;
$('.board div').not('.dead').each(function () {
$liveTiles.push(parseInt($(this).text()));
});
$liveTiles.sort(function (a, b) {
return b - a;
});
for (i = 0; i < $liveTiles.length; i++) {
for (j = 1; j < $liveTiles.length; j++) {
$l = $liveTiles[i] + $liveTiles[j];
if ($l <= $max) {
return $l;
}
}
}
}; // displays expected # to player
var $displaySum = function (val) {
$('.sum-display').text(val.toString());
}; // checks whether player exceeded or equaled the expected sum
var $checkSum = function (val, targetVal) {
if (val === targetVal) {
return "=";
}
else if (val > targetVal) {
return ">";
}
else {
return "<";
}
}; // adds to and displays player's score
var $displayScore = function (val) {
$score += val * 2;
$('.score-display').text($score.toString());
}; // set up playing board
var $setupBoard = function () {
$clearBoard();
$makeBoard();
$tCount = 64;
$totalVal = 316;
$targetVal = $genSum($level);
$displaySum($targetVal);
$displayScore(0);
}; // start game
var $initGame = function () {
$level = 1; // game initiates @ level one, score 0
$score = 0;
$setupBoard();
}; $(function () {
var $selectedTotal = 0;
var $r; // variable to hold value of checkSum call
var $t = 0; // variable for tracking # of live tiles
var $this;
$initGame();
$(document).on('click', '.board div', function () { // activates when player clicks piece
$this = $(this);
if (!($this.hasClass('dead'))) {
$this.toggleClass('selected');
if ($this.hasClass('selected')) {
$selectedTotal += parseInt($this.text());
$r = $checkSum($selectedTotal, $targetVal);
$t++;
if ($r === "=") {
$('.selected').empty().addClass('dead').removeClass('selected');
$displayScore($selectedTotal);
// tracking available tiles & pts left
$tCount -= $t; // subtracts # of used tiles from $tCount
$totalVal -= $selectedTotal;
// reset and init for next move
$t = 0;
$selectedTotal = 0;
// check to see whether player levels up
if ($tCount === 0) {
$setupBoard();
}
else {
$targetVal = $genSum($level);
$displaySum($targetVal);
}
}
else if ($r === ">") {
$('.selected').removeClass('selected');
$selectedTotal = 0;
$t = 0;
}
}
else {
$selectedTotal -= parseInt($this.html());
$tCount++;
}
}
});
$('#restart').click(function () {
$initGame();
});
$('a.how-to-play').click(function () {
$('div.how-to-play').addClass('displayed');
});
$('#got-it').click(function () {
$('.how-to-play').removeClass('displayed');
});
});

css代码:

body {
font-family: "Arvo";
} small {
display: block;
width: 700px;
margin: 10px auto;
text-align: center;
color: #9ec7b3;
} a {
color: #9ec7b3;
}
a:hover {
color: #5dbc8e;
} span {
display: inline-block;
width: 130px;
text-align: center;
border-radius: 2px;
} button {
display: inline-block;
width: 140px;
height: 40px;
margin-top: 10px;
padding: 10px;
text-align: center;
font-family: "Arvo";
font-weight:;
font-size: 120%;
color: #fff;
border: none;
outline: none;
border-radius: 2px;
background-color: #9ec7b3;
}
button:hover {
background-color: #5dbc8e;
cursor: pointer;
} .container {
width: 700px;
height: 540px;
margin: 0 auto;
padding: 20px;
background-color: #dfdfdf;
border-radius: 2px;
} .right {
width: 150px;
height: 528px;
float: right;
text-align: center;
} .sum-display {
height: 70px;
padding: 5px;
font-weight:;
font-size: 3.5em;
color: #fff;
background-color: #303c36;
} .score-display {
height: 40px;
margin-top: 10px;
padding: 15px 5px 0 5px;
background-color: #fff;
color: #303c36;
}
.score-display::before {
content: "Score: ";
font-weight:;
} .board {
width: 528px;
height: 528px;
float: left;
padding: 5px;
background-color: #5dbc8e;
border-radius: 2px;
}
.board:hover {
cursor: pointer;
} .board div {
display: block;
height: 40px;
width: 40px;
float: left;
margin: 2px;
padding: 15px 10px 5px 10px;
text-align: center;
font-size: 150%;
font-weight:;
color: #5dbc8e;
border: 1px solid #5dbc8e;
border-radius: 2px;
background-color: #fff;
}
.board div:hover {
background-color: #dfdfdf;
} .board .selected {
background-color: #303c36;
}
.board .selected:hover {
background-color: #303c36;
} .board .dead {
background-color: #9ec7b3;
}
.board .dead:hover {
cursor: default;
background-color: #9ec7b3;
} div.how-to-play {
display: none;
position: absolute;
width: 700px;
height: 540px;
margin: 0 auto;
padding: 10px;
background-color: rgba(255, 255, 255, 0.8);
color: #303c36;
z-index:;
}
div.how-to-play.displayed {
display: block;
}
div.how-to-play p {
width: 60%;
} a.how-to-play {
display: block;
margin-top: 10px;
}

转载请注明原文地址:http://www.cnblogs.com/liaohuolin/p/3920930.html文章地址https://www.yii666.com/article/764060.html

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png