原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0104/307.html

微信小程序-动手Flypy Bird

效果图： 

实现细节： 

JS逻辑:  

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

小鸟下降：

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)

}

随机空隙管道：

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)

  }

单机屏幕事件：

bird.y -= bird.factor2

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

碰撞事件：

// 这里加了一个插值数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();

          }

      }

  },

计数逻辑：

// 根据手机App外包小鸟x坐标和管道宽度进行判断   每完成一次就加1

if(pipe.x ==10){

      bnum+=1;

      console.log(bnum)

      this.setData({

        bird_number:bnum

      })

    }