前端练手小项目——别踩白块

前端练手小项目——别踩白块

其实可以说是纯自己想的吧 最难的一步还是在让盒子(块)移动起来那里

1、初始化事件监听

总共有两个地方要用监听（其实还有一个，不过那个是自己手写的监听函数）

• 开始按钮
  • 开始页面fadeOut
  • 页面开始移动
  • 加上自己手写的那里监听函数(内部是setInterval)
  • 获取事件毫秒并更新timing里面的内容
• 重新开始按钮
  • 除了有以上的所有外 还有：
  • 结束页面fadeOut
  • 让分数清零
  • 让事件清零
• 黑白块的点击
  • 这里要用事件委托来绑定，这是由于cell都是后来创建出来的新元素，用on来绑定
  • 用jQuery的元素遍历each方法来将每个都绑定

2、页面开始移动

这里我主要的思想是，用一个大盒子来移动(假如叫father)，里面添加的游戏界面孩子(假如叫son1、son2...实际上就俩)来实现无缝对接

• father一开始的位置是-460(盒子高度)，也就是整个隐藏起来
• 每20毫秒向下移动speed距离 这里用speed而不是写死 可以在后面随着分数增加进行修改 提高游戏体验
• 如果移动到top=0，则说明移动到了最底端，这个时候要开始添加son2了，也就是在盒子内容的前面添加一个孩子，高度460（注意孩子们都不能脱离文档流，也就是定位不能是absolute，这样才能把father给撑开）
• 用以下图示来解释吧
• 

• 

• 

• 

• 最后就只要当孩子个数达到三个就删掉最后一个孩子来保证个数不会太多就好了

3、添加孩子并随机出现黑块

写一个函数，里面进行以下几步：

• 创建一个结点
• 给该结点的每一行里随机（Math.random()）出现一个黑块（通过添加类no-click来表现）
• 添加的游戏页面前面

4、游戏结束规则实现

有两种方式可以让游戏结束

1）黑块碰到下边缘了还未被点击

我是自己手写了一个监听函数，每100ms查看一次(用setInterval)

• 一开始获取了整个游戏框距离文档的偏移量，现在每100ms获取一次所有黑块相对文档的偏移量，它俩相减，看有没有超过一定数值就能判断了

2）点击到了白块

这部分比较简单，就在之前绑定元素事件的时候写就行，判断以下当前点的是白还是黑，白就结束游戏调用gameover，黑就加分

5、游戏开始时间的计算

就是上面那个毫秒计数器，采用的方法是获取游戏开始前一刻的时间戳，与当前结束时刻的时间戳相减，得到了游戏开始的毫秒数，再做一下简单的处理 直接反应到页面中。

这里也是用的一个定时器 setInterval，时间间隔是1ms，刚好就对应了要显示的内容。

注意，一开始没有那个页面，以及游戏结束后也没有。

6、游戏结束函数的实现

游戏结束要做以下几件事情

• 清除三个定时器：
  • domMove，用于判断游戏规则1的定时器
  • timer，盒子移动的定时器
  • countTime，游戏时间计算的定时器
• 让当前发生错误的盒子变一下颜色（提高体验）
• 隔0.5秒后（为了让客户反应），继续进行下面几步
• alert弹出分数和游戏结束
• end页面fadeIn
• 清除游戏盒子里面剩余的所有黑白块（也就是把移动的盒子给删了）
• 时间给删了

前端练手小项目——别踩白块

原文：https://www.cnblogs.com/TRY0929/p/12081855.html