微信小程序之Canvas--玩坏FlappyBird

说点：小程序平台，玩过五子棋，玩过贪吃蛇， 你玩过FlappyBird吗？ 
效果图：

实现细节：

JS逻辑:

主要包括 小鸟下降逻辑、随机空隙管道逻辑、 单机屏幕事件、碰撞事件、计数逻辑

小鸟下降：

1. birdDown:function(){
2.  
3. ctx.clearRect(0, 0, res.windowWidth, res.windowHeight)
4.  
5. bird.y += bird.factor
6.  
7. ctx.drawImage(birds[Math.floor(Math.random()*2)], bird.x, bird.y, bird.px, bird.px)
8.  
9.  
10.  
11. ctx.draw()
12.  
13.  
14.  
15. timer1 = requestAnimationFrame(this.birdDown)
16.  
17.  
18.  
19.  
20.  
21. if( bird.y>res.windowHeight){
22.  
23. cancelAnimationFrame(timer1)
24.  
25.  
26.  
27. }

随机空隙管道：

1. pipe:function(){
2.  
3. pipe.x-=pipe.factor
4.  
5. bird.y += bird.factor
6.  
7. if(pipe.x <-pipe.width){
8.  
9. pipe.x = res.windowWidth
10.  
11. gapHeightY = Math.floor(Math.random()*(res.windowHeight-200))+20
12.  
13.  
14.  
15. }
16.  
17. ctx.drawImage('../../images/flappybird/pipe_down.png', pipe.x, 0, pipe.width, gapHeightY)
18.  
19. ctx.drawImage('../../images/flappybird/pipe_up.png', pipe.x, gapHeightY+gapHeight, pipe.width, res.windowHeight-gapHeightY-gapHeight)
20.  
21. }

单机屏幕事件：

1. bird.y -= bird.factor2
2.  
3.  
4.  
5. // 只需改变bird的y坐标值即可

碰撞事件：

1. // 这里加了一个插值数10，目的是为了更贴近碰撞
2.  
3. crash:function(){
4.  
5. bird.cX = bird.x+bird.px-10
6.  
7. bird.cY = bird.y
8.  
9. pipe.cX = pipe.x
10.  
11. pipe.cY = gapHeightY
12.  
13. if(bird.cX > pipe.cX & bird.cY < pipe.cY-10 ){
14.  
15. if(bird.cX < pipe.cX+pipe.width){
16.  
17. cancelAnimationFrame(timer1)
18.  
19. this.gameOver();
20.  
21. }
22.  
23.  
24.  
25. }else if(bird.cX > pipe.cX & bird.cY+bird.px > pipe.cY+gapHeight+10){
26.  
27. if(bird.cX < pipe.cX+pipe.width){
28.  
29. cancelAnimationFrame(timer1)
30.  
31. this.gameOver();
32.  
33. }
34.  
35.  
36.  
37. }
38.  
39.  
40.  
41. },

计数逻辑：

1. // 根据小鸟x坐标和管道宽度进行判断 每完成一次就加1
2.  
3. if(pipe.x ==10){
4.  
5. bnum+=1;
6.  
7. console.log(bnum)
8.  
9. this.setData({
10.  
11. bird_number:bnum
12.  
13. })
14.  
15. }

源码地址： https://github.com/jeffer0323/We-Canvas