Small projects distal practice hand - white blocks do not step

Small projects distal practice hand - white blocks do not step

In fact, it can be said is pure they want it the most difficult step in or make a box (block) moved up there

1, initialization event listeners

There are two places to spend listening (in fact there is one, but that is their own handwriting monitor function)

• The Start button
  • Start page fadeOut
  • Page starts to move
  • Plus there listening own handwriting function (internally setInterval)
  • Get event updates millisecond timing and the contents inside
• Resume button
  • In addition to all of the above but also have:
  • The end of the page fadeOut
  • Let fraction cleared
  • Let cleared events
• Click on the black and white blocks
  • Here we use the event delegate to bind, because the cell is then created out of the new element, to bind with on
  • Each element with jQuery traversal methods are bound to each

2, page begins to move

My main idea here is to use a large box to move (if called father), which added to the game interface children (if called son1, son2 ... actually two) to achieve seamless

• Father is a start position -460 (height of the box), which is a whole hidden
• Every 20 milliseconds to move from here down speed with speed rather than hard-coded modifications can be made to improve the gaming experience with the score increasing in the back
• If you move to the top = 0, then the move to the very bottom, this time to start adding son2, that is to add a child in front of the box content, height 460 (note that children can be separated from the document flow, which is positioned not is absolute, so as to put father to distraction)
• Use the following illustration to explain it
• 

• 

• 

• 

• Finally whenever the number of children reached three to delete the last number of children to ensure that not too much like a

3, and add a random black block children

Write a function, which performs the following steps:

• Create a node
• To each row of the node's random (Math.random ()) a black block appears (by addition to the performance-based no-click)
• Add game page front

4, the game is over rule implementation

There are two ways to end the game

1) across the lower edge of the black block has not been clicked

I'm my own handwriting a listener function, see once every 100ms (using setInterval)

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

2）点击到了白块

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

5、游戏开始时间的计算

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

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

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

6、游戏结束函数的实现

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

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