属于简化版别踩白块，代码相对较为简单易学，主要涉及通过 javascript 操作元素节点的增删以及属性节点（class）的操作。
HTML/CSSJavaScript元素节点增删属性节点操作
在开始编程之前，让我们先来分析下整个游戏的流程：一定的速度下移，点击黑块，黑块消失，新的黑块出现在普通游戏玩家眼中，应该是游戏开始，黑块不断向下移动，若黑块触底则游戏结束；
而以开发者来说，应将每一个黑块和白块抽象成一个个的数据结构，黑块的消失和出现其实就是数据结构的创造和销毁，我们来看一张游戏的流程图，对于要编写的功能有一个大概的了解：
可以用
div+css 布局来实现别踩白块的静态效果展示，直接上 HTML 代码，我来简要说下 HTML 思路，将主界面分解成一个 4x4 的大矩形格子，每一个方块代表其中一个小的矩形格，其中每一行的四个白块中有一个黑块，每一行中黑块位于哪一列是随机生成的，但是我们这里现在是静态页面就自己确定了，然后通过 css 控制样式。
创建 index.html 文件，并输入以下代码：
下面是 css 代码，这里有一个要注意的地方，我将 块级元素向上提了 100 px，这样在游戏的开始就出现了最底一行的空白，隐藏最上面那行，为什么要这样呢，继续往下看就知道了。设置黑白块的样式，为 js 部分动态插入黑白块做准备。
创建 文件，并输入以下代码：
如果以上部分你都能够理解并且对应着代码实现的话，那么我们看到的应该是一个空格子，我们设置 id 为 con 的 div 的 top 属性为 0 px: ，这样我们就可以看见：
是不是很像别踩白块的界面了呢，我们已经成功了一大步，然后就是通过 js 来实现动态的插入黑块或白块，以及操作。
根据前面的 HTML 部分我们可以知道，每个 就代表一个白块， 就代表一个黑块，每点击一个黑块消失其实是删除了一个 然后从上面添加一个新的 所以我们首先要通过 js 来控制 的创造和生成（记得删除在编写静态页面时候指定生成的 4 个 ）。具体方法如下：
删除之前写的 4 个 div.row，将 index.html 文件改为以下代码：
对游戏进行初始化，在 文件中写入以下代码：
在可以通过 js 来创造和销毁 后，我们就要让黑块动起来，这个时候我们就用到了之前 css 提到的设定 隐藏了一行的 ，我们通过 js 的 DOM 操作使其向下方移动，并设置定时器每 30 毫秒移动一次，这样就实现了黑块的平滑移动，在黑块移动的同时，我们要判断黑块是否已经触底，触底则游戏失败，停止调用 ，触底后调用函数 游戏失败，具体方法如下：
让黑块动起来之后呢，我们就来考虑怎么判断用户有没有点击到黑块呢，同时用户若点击到黑块，我们要让所在那一行消失，那么我们需要一个 方法，具体如下：
其实程序写到这里，几个核心的功能点都已经实现了，是不是感觉很简单呢。剩下来的就是将这些方法组合起来，组成完整的逻辑关系，在我给出的源码里添加有一个记分器记录用户分数的功能，同时设置加速方法，使黑块的移动越来越快等等。有兴趣的的同学可以尝试着添加事件按钮，使这个游戏更接近 APP 版本。
仅仅一百多行代码我们就实现了一个简单有趣的 Web 小游戏。如果你刚入门前端，相信本项目可以很好的让你理解，练习如何使用 JavaScript 操作 DOM.
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery