jQuery实现别踩白块儿网页版小游戏

推荐整理分享jQuery实现别踩白块儿网页版小游戏，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

大致介绍

终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery编写网页版小游戏 要简单一点，基本的思路都差不多。

这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

思路

这个小游戏可以抽象化分为3层

　◆最底下的一层是基本的样式（可见的）

　◆中间的层是最主要的，是一个4x3的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）

　◆最上面的一层也是一个4x3的二维数组，是用户能最终看见的

我们通过最底下的一层显示最基本的个小方格，不同的颜色，每个格子对应的中间的层有不同的值，最上面的一层负责显示样式

基本结构与样式

基本的结构和样式都挺简单，直接看代码

结构：

样式：

这里并没有设置每个格子的位置，位置由js代码来设置，以及第二层的二维数组、第三层的显示层都由js来设置，这里和 jQuery编写网页版小游戏 并没有什么大的区别

代码：

初始化

游戏开始时，要在每一行随机的位置显示一个黑色的方块，并且在最下面的那一行的黑色方块上要有提示信息

代码：

基本操作

我们通过switch循环，来根据用户不同的输入进行不同的操作

代码：

在这里设置 keyDown 这个全局变量的目的是为了防止用户在游戏结束时，继续按键。

timeRan()这个函数是显示游戏时间的

代码：

clearText()这个函数是在游戏开始后，将最下面一行的提示信息去掉

代码：

moveDown()这个函数是方块移动的最主要函数，因为方块要向下移动，所以我们要从最下面开始遍历二维数组，如果该格子是黑色的并且是最下面一行的，就只是简单的把该格子的颜色变回白色，如果该格子是黑色的并且是第一行至第三行的，这个格子变为白色，并且它的正下方的一个格子变为黑色，最后，在第一行的随机位置上显示一个黑色的格子

代码：

isgameover()是显示游戏结束样式的函数，比较简单

代码：

总结

这个小游戏，如果学会了之前的 jQuery编写网页版小游戏，就会觉得这个挺简单的，基本的思想和方法都大同小异，如果有任何的建议如果或者想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)