位置: 编程技术 - 正文
jQuery编写网页版2048小游戏(jquery网站开发)
编辑：rootadmin推荐整理分享jQuery编写网页版2048小游戏(jquery网站开发)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery网站项目,用jquery制作的网站,用jquery制作的网站,用jquery制作的网站,jquery网页设计,用jquery制作的网站,jquery生成网页内容,用jquery制作的网站,内容如对您有帮助，希望把文章链接给更多的朋友！
大致介绍
看了一个实现网页版小游戏的视频，觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试，真正的验证了这句话-不要以为你以为的就是你以为的，看视频时觉得看懂了，会写了，但是自己实现起来会遇到各种问题。比如，在最后判断游戏是否结束的时候，我写的语句语法是对的，但就是不执行。最后通过对视频源码的分析对比，发现原作者写的一个setTimeout定时器有额外的意思，本来我以为它就是简单的一个延时动画，其实他是在等待另外一个函数执行完毕。-_-||。最后还是很高兴能写出来，也改进了一些源代码的不足。
这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)
思路
这个小游戏可以抽象化分为3层（我觉得这样能更好理解）
◆最底下的一层是基本的样式（可见的）
◆中间的层是最主要的，是一个4x4的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）
◆最上面的一层也是一个4x4的二维数组，它只是根据第二层数组的每个数显示样式（可见的）
我们通过最底下的一层显示最基本的个小方格，通过键盘的按键或者手指在屏幕的滑动来操作中间层的数组，最后在通过最上面的一层显示出数字
基本结构与样式
基本的结构和样式都挺简单，直接看代码
结构：
样式：
从CSS样式可以看出，我们并没有对每个格子的位置进行设置，因为如果用CSS给每个格子设置样式代码量太大，而且他们的位置有一定的规律，所以我们可以用js循环来完成每个格子样式的设置
代码：
这样我们的第一层就好了
效果：
现在构造第二层，即构建一个4x4的值全部为0的数组，由于在构造第二层时，有两层循环，所以我们可以在构造第一层时也能构造第二层
第三层是用js生成个格子，它和第一层的个格子一一对应
代码：
初始化
在每次游戏重新开始时，都会在随机的位置出现两个随机的数字，我们写一个在随机位置出现一个随机数的函数，只要调用两次就可以实现了
代码：
基本操作
我们通过switch循环，来根据用户不同的输入进行不同的操作
代码：
由于数字格的移动只有左、上、右、下四种方式，并且他们都是大同小异的，所以就拿向左移动为例，
向左移动，我们首先需要判断它是否能向左移动，能向左移动有两种情况
第一种：当前格子的左边的格子是空的即值为0
第二种：当前格子的值和左边格子的值相同
由于向左移动，所以第一列的格子不可能向左移动，所以不需要判断
代码：
判断能否向左移动后，我们就要对可以移动的格子进行移动，这里需要特别注意，向哪个方向移动就要先从哪个方向开始判断
代码：
将上、右、下四个方向写完以后，游戏基本的操作就已经完成了。
游戏分数和判断游戏结束
游戏的分数是每个相加的数的和，所以我们在每个数相加的时候更新分数就可以了
代码：
判断游戏是否结束很简单，用我们之前定义的方法就可以实现
代码：
最后优化
1、游戏中会出现一次移动，一个数会被累加很多次
在原游戏中，每个数在每次操作中只能累加一次，所以我们在定义一个4x4的值为false的数组，与中间层的数组一一对应，专门用来防止一个数的多次累加，如果是false则可以累加，并将值改为false，否则不可以累加
2、结束死循环
由于在设置随机数的时候用到了一个死循环，但是在游戏结束后，该循环还在，所以我们在死循环中在添加一个条件，如果游戏结束就跳出循环
3、最后的结束游戏提示不执行
从代码中可以看出，判断游戏是否结束是在随机产生一个数字前执行的，所以在判断游戏结束时，总是有一个空的格子，所以代码执行后认为游戏没有结束，但是当这个随机数字产生后，所有的格子不能移动，当我们按键时，if条件不通过，判断游戏是否结束的函数不能执行。所以我们要给判断游戏结束的函数设置定时器，让他在随机产生一个数字后再进行判断
4、在移动端可以执行
由于原作者没有写有关移动端的操作，所以我在网上找的判断移动端触屏手机滑动位置的代码，加入了游戏的事件就可以执行了
总结
总体来说这个游戏实现起来并不是太难，就是许多小的操作集合起来
标签: jquery网站开发
本文链接地址:https://www.jiuchutong.com/biancheng/374055.html 转载请保留说明！上一篇：利用JQuery实现datatables插件的增加和删除行功能
下一篇：jQuery EasyUi 验证功能实例解析(easyui的表单验证)
