jquery开发的数字相加游戏(你能玩几分)
jquery开发的数字相加游戏,我在一轮中玩了632分(如下图),你能玩几分,哈哈...
下面贡献下这款“数字相加游戏”的开发过程。
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脚本:
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
jquery开发的数字相加游戏(你能玩几分)的更多相关文章
- Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状)
Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...
- JQuery变量数字相加的研究
在 jquery中,一个变量和一个数字相加,期望得到1+2=3但是: eg: <input type="text" class="input_Num" i ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 洛谷P1118 数字三角形游戏
洛谷1118 数字三角形游戏 题目描述 有这么一个游戏: 写出一个1-N的排列a[i],然后每次将相邻两个数相加,构成新的序列,再对新序列进行这样的操作,显然每次构成的序列都比上一次的序列长度少1,直 ...
- 一款纯css3实现的数字统计游戏
今天给大家分享一款纯css3实现的数字统计游戏.这款游戏的规则的是将所有的数字相加等于72.这款游戏的数字按钮做得很美观,需要的时候可以借用下.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- LeetCode.2-两个数字相加(Add Two Numbers)
这是悦乐书的第340次更新,第364篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Medium级别的第1题(顺位题号是2).给定两个非空链表,表示两个非负整数. 数字以相反的顺序存储, ...
- JAVA开发类似冒险岛的游戏Part1
JAVA开发类似冒险岛的游戏Part1 一.总结 二.JAVA开发类似冒险岛的游戏Part1 初学嘛) ,不过总的来说这个程序还是很有意思的.这里我重新再整理了一下,希望能帮助到其他想要开发类似程序的 ...
- Flask开发成语接龙游戏,闲来无事手机玩玩自己写的游戏吧!
英语单词学习应用 周五发布的文章Flask开发天气查询软件,带你掌握pipenv的使用与手机Termux下的部署发布后,看到喜欢的人比较多.本来周末打算照着扇贝/极光单词,写一个英语单词自测工具.但苦 ...
- [LeetCode] Add Two Numbers 两个数字相加
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
随机推荐
- centos 为OPENJDK配置JAVA_HOME环境变量,安装MAVEN
1.安装开发者工具包 yum install java--openjdk-devel -y 2.配置环境变量 vim /etc/profile export JAVA_HOME=/usr/lib/jv ...
- VM页面中遍历枚举类
1)自定义的枚举类如下所示: public enum BusType { MID_SMALL(1, "中小件"), FRESH(2, "生鲜"), GLOBAL ...
- 《JAVA与模式》之解释器模式 (转载)
一.引子 其实没有什么好的例子引入解释器模式,因为它描述了如何构成一个简单的语言解释器,主要应用在使用面向对象语言开发编译器中:在实际应用中,我们可能很少碰到去构造一个语言的文法的情况. 虽然你几乎用 ...
- top 学习
通常top命令是会持续运行而不终止的. 要在脚本里用,需要添加一些选项参数,尤其是-b.例如:top -b -n 2 -d 3 >/tmp/log -b表示批处理模式(Batch mode),以 ...
- cucumber java从入门到精通(2)用代码定义步骤
cucumber java从入门到精通(2)用代码定义步骤 上一节里我们定义了feature文件,feature文件就是自然语言描述的用例文件,它有一定的章法,具体的潜规则是: 使用Feature关键 ...
- robotframework + appium 获取android toast
android toast 获取主要方式是在出现toast的时候查找元素:xpath=//*[contains(@text,'记同步')] ,该xpath 表示为toast信息含有 "记 ...
- PHP实现无符号右移(js中的 >>>)
移位包括有符号左移(<<).有符号右移(>>).无符号右移(>>>),其中 js 支持三种移位,PHP只支持前两种移位(没查到第三种),恰好需要PHP进行无符 ...
- kafka 配置文件注释
文章转载自:http://liyonghui160com.iteye.com/blog/2163899 server.properties配置: server.properties中所有配置参数说明( ...
- JavaScript权威指南第02章 词法结构
词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...
- MYSQL拒绝访问:not allowed to connect解决方法
分享下MYSQL拒绝访问报错not allowed to connect的解决方法. 可以在其它任何的主机上以root身份登录 mysql报如下错误,截取部分, message from server ...