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 ...
随机推荐
- XmlSerializer 对象序列化成XML 自定义编码格式(gb2312)
随着面向服务(SOA)的开发方式的兴起,客户端和服务端之间的消息传送,很多采用了XML的格式.但是大家在日常的开发中,应该会有这么种体验,就是组织xml格式的代码太繁琐,这篇随笔也是为了和大家分享下简 ...
- 【SqlServer】SqlServer存储过程使用
我们一开始学习数据库语言的时候就是用一些简单的insert,select等语法,但是随着我们学习数据库的深入,就会发现一些简单的语法满足不了我们的要求,比如处理一些业务逻辑,多表关联的时候,还有就是虽 ...
- 【ASP.NET】@Model类型的使用详解
有时需要在ASP.NET MVC4的视图的@model中使用多个类型的实例,.NET Framework 4.0版本引入的System.Tuple类可以轻松满足这个需求. 假设Person和Produ ...
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- 图形对象函数figure() 及 子图创建函数subplot()
1 图像对象创建函数figure 创建图形Creates a new figure, 图形名既可以作为显示在图形窗口标题栏中的文本,也是该对象的名称 也可以通过mp.figure()获取(或激活)已创 ...
- PreparedStatement的用法及优点
jdbc(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.statement要求开发者付出大量的时间和精力.在使用statem ...
- vc2010 属性值无效 灾难性故障 解决方法
原文链接: http://blog.csdn.net/enterlly/article/details/8739281 说明: 我遇到这个问题是这样的,在为某个类添加消息时出现的.因为该类不在此工程的 ...
- JavaScript语言精粹之对象
用object.hasOwnProperty(variable)来确定这个属性名是否为该对象成员,还是来自于原型链. for(my in obj){ if(obj.hasOwnProperty(my) ...
- python 取整的两种方法
问题简介: 要把一个浮点数(float)整数部分提取出来.比如把“2.1”变成“2”的这一过程:现在我们给这个过程起一个名字叫“取整”.那么它 在python中大致可以有两种写法 写法1)类型转换: ...
- 不错位的java .class 反编译工具推荐
我们经常会反编译看一些class文件,但是反编译出来的文件里面会有很多杂乱的东西 一直以来都是用的idea来反编译的,只要把class文件往里面一拖就行了 这么用没问题,用来看看源码什么的都OK 但是 ...