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

柿霖不是林

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



实现细节：

JS逻辑:  

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

小鸟下降：



[mw_shl_code=html,true]birdDown:function(){
    ctx.clearRect(0, 0, res.windowWidth, res.windowHeight)
    bird.y += bird.factor
    ctx.drawImage(birds[Math.floor(Math.random()*2)], bird.x, bird.y, bird.px, bird.px)

    ctx.draw()

    timer1 = requestAnimationFrame(this.birdDown)

   
    if( bird.y>res.windowHeight){
      cancelAnimationFrame(timer1)
      
}[/mw_shl_code]


随机空隙管道
[mw_shl_code=html,true]pipe:function(){
        pipe.x-=pipe.factor
        bird.y += bird.factor
        if(pipe.x <-pipe.width){
            pipe.x = res.windowWidth
            gapHeightY = Math.floor(Math.random()*(res.windowHeight-200))+20
         
        }
        ctx.drawImage('../../images/flappybird/pipe_down.png', pipe.x, 0, pipe.width, gapHeightY)
        ctx.drawImage('../../images/flappybird/pipe_up.png', pipe.x, gapHeightY+gapHeight, pipe.width,          res.windowHeight-gapHeightY-gapHeight)
  }[/mw_shl_code]


单机屏幕事件：
[mw_shl_code=html,true]bird.y -= bird.factor2

        //  只需改变bird的y坐标值即可[/mw_shl_code]

碰撞事件：
// 这里加了一个插值数10，目的是为了更贴近碰撞
  crash:function(){
      bird.cX = bird.x+bird.px-10
      bird.cY = bird.y
      pipe.cX = pipe.x
      pipe.cY = gapHeightY
      if(bird.cX > pipe.cX & bird.cY < pipe.cY-10 ){
          if(bird.cX < pipe.cX+pipe.width){
              cancelAnimationFrame(timer1)
              this.gameOver();
          }
           
      }else if(bird.cX > pipe.cX & bird.cY+bird.px > pipe.cY+gapHeight+10){
          if(bird.cX < pipe.cX+pipe.width){
             cancelAnimationFrame(timer1)
             this.gameOver();
          }
         
      }

  },



计数逻辑：
// 根据小鸟x坐标和管道宽度进行判断   每完成一次就加1
if(pipe.x ==10){
      bnum+=1;
      console.log(bnum)
      this.setData({
        bird_number:bnum
      })
    }

游客，如果您要查看本帖隐藏内容请回复

夏目

谢~楼主分享！！！！！！！！！！！！！！！

tanqingyao

看看看看看

michael221

88888888888888888888888

lbb513

希望是我想要的 学习一下

Aezom

发生的

jkhjkhjklhlkj

彩虹飞满天

23333333333333!

jack369

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊

bezhu

66666666666666666,楼主棒