我们先看到的未开始的页面黑色和白色方块是随机生成的，完了这么多把没有发现时固定不变的。点击一次方块，程序需要判断是黑色还是白色的。如果是黑色的，当然程序也是实现了一次自减，在动画中是实现一次下移的，下移的时候点击的方块到黄颜色的区域会变成灰色。
【GIF】点我查看
这个别踩白块主要是应用JS对DOM和数组的操作。
思路：
如图：将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着24块方格，黑色每行随机产生一个，“游戏板”向下滚动并交替显示，将每个操作板的黑块位置存入数组，每次点击时将数组pop出来进行比对（我觉得亮点在这……）。
这里是游戏的GitHub地址，大家可以到里点击中部菜单最右边的的Download ZIP按钮下载到桌面一试，HTML和JS，无需服务器。
怎样获取案例源码？
当然，在这里不得不得强势来一波GG了，获取此案例的小伙伴们，可以直接来前端群：621071874，欢迎小白进来一起学习，共同进步，当然我也会找一些比较经典的案例，符合现在企业的面试需求以及适合小白学习的基础视屏以及学习素材都会相应的在群里共享。（包括此案例，仅限于小白哦，大牛我想这个对你已经很简单了吧）
以下是具体实现，关键部分有注释
HTML部分:
HTML
CSS部分：
CSS
JS部分：
这里分函数介绍：
全局变量初始化
JS
//用闭包函数使每次创建的游戏板的ID为boarda与boardb，其实用一个全局变量也行，不过为了有点逼格。。。
每次点击判定结果的函数
JS
扩展:
增加页面UI：因为一开始的HTML特别简单，所以UI也很好修改，设置按钮，点击触发开始函数。
改变游戏难度：修改setInterval的值，也可以对judge函数内的间隔数目进行修改，或将下落加速的表达式优化一下。
增加比分排行等：用ajax连接服务器，在游戏结束后将结果写入数据库，并引用数据中的排行榜。
改为街机模式：去除定时，修改judge函数，使其每次点击游戏板下落一个小方格的高度。设置总数，开始计时，结束计时。
如果想了解更多关于前端经典案例的小伙伴们记得关注我哦。
网友评论