程序思路：如图：将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着24块方格，黑色每行随机产生一个，“游戏板”向下滚动并交替显示，将每个操作板的黑块位置存入数组，每次点击时将数组pop出来进行比对（我觉得亮点在这……）。
这里是游戏的GitHub地址，大家可以到里点击中部菜单最右边的的Download ZIP按钮下载到桌面一试，HTML和JS，无需服务器。
下载地址
以下是具体实现，关键部分有注释。
HTML部分:
别踩白块 //初始化一个boardb,使ab同时存在
CSS部分：
代码如下:*{margin: 0px;padding: 0px;box-sizing: border-box;} //简单的reset一下,并用box-sizing设置盒子尺寸将边框也计算进去,便于后面计算小方块位置
#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //游戏区域，多两个像素是为了除去边框外还有足够的300*600的空间
.square{width: 75px;height: 100px;float: left;border: 1px solid black;}
.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//每个小方块为75*100，并且设置黑色小方块的背景色。
JS部分：
这里分函数介绍：
全局变量初始化
//用闭包函数使每次创建的游戏板的ID为boarda与boardb，其实用一个全局变量也行，不过为了有点逼格。。
每次点击判定结果的函数
产生大框中小黑框位置的随机数，每次创建游戏板时调用此函数，根据产生数定义小黑块的位置
每次调用在游戏区域的上方生成一个待往下滚动的游戏板，并将其黑色的部分的数字PUSH进locArr中
找到脚本中存在的两个游戏板，使其往下滚动
将主体调用写在window.onload函数里，使得页面的游戏区域加载完成后再调用函数。
游戏扩展:
增加页面UI：因为一开始的HTML特别简单，所以UI也很好修改，设置按钮，点击触发开始函数。
改变游戏难度：修改setInterval的值，也可以对judge函数内的间隔数目进行修改，或将下落加速的表达式优化一下。
增加比分排行等：用ajax连接服务器，在游戏结束后将结果写入数据库，并引用数据中的排行榜。
改为街机模式：去除定时，修改judge函数，使其每次点击游戏板下落一个小方格的高度。设置总数，开始计时，结束计时。
下载本文