2018-06-25

踩黑白块

大家好,现在随着手机和电脑的广泛的应用,手机和电脑似乎已经成了不可分割的一部分,那么我们在生活中多多少少都会玩过小游戏,或者有的小伙伴们喜欢打网游,今天我就给大家介绍一个踩黑白块的小游戏,这个代码是如何实现的呢,让我们先来看一下效果图;

2018-06-25_214842.png

](https://upload-images.jianshu.io/upload_images/12852423-ca12a1f179ae3e48.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/12852423-6845e41d79dfeb1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里都是用纯div生成的,没有用到图片,究竟是怎么实现的这种效果呢,让我们来看一下下面的代码;

我们对它进行了简单的封装,使其更有耦合性,根据上面的注释,我们实现的思路是:

整体思路：

先玩几次，思考大概的实现思路；

1：创建基本的静态页面；

2：让div动起来

3：动态创建Div

4：动起来后，填补缺失的div

5：随机创建黑块

6：绑定点击事件

7：点击判断输赢

8：游戏结束后的限制处理

9：黑块触底的处理

10：加分

11：加速

注意变量作用域和this指向的问题

insertBefore、firstChild、getComputedStyle、appendChild、createElement、Math.random、Math.floor

1(1)创建一个初始化运行的方法:循环生成4行div,为了使其用户体验更好,我们先生成4行div这样只要一点开浏览器,立马就会生成4行白块,这里是一个小技巧;(2)生成一个控制器,用来控制开始移动的方法;(3)生成一个点击事件
2(1)根据逻辑,我们先写循环创建一个div(2)在封装一次生成一行div
3(1)再写出move,根据我们的注释理清楚逻辑关系;

编程使我更快乐.

有兴趣的同学记得关注一波呗!