柿霖不是林 发表于 2017-3-23 11:03:34

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

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



实现细节：

JS逻辑:

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

小鸟下降：



birdDown:function(){
    ctx.clearRect(0, 0, res.windowWidth, res.windowHeight)
    bird.y += bird.factor
    ctx.drawImage(birds, 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();
          }
         
      }

},



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



**** Hidden Message *****

夏目 发表于 2017-3-28 18:45:45

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

tanqingyao 发表于 2018-5-11 21:27:51

看看看看看

michael221 发表于 2018-5-11 23:46:30

88888888888888888888888

lbb513 发表于 2018-5-16 11:48:37

希望是我想要的 学习一下

Aezom 发表于 2019-1-4 14:20:49

:loveliness:

发生的 发表于 2019-6-21 00:07:30

jkhjkhjklhlkj

彩虹飞满天 发表于 2020-3-6 21:00:13

23333333333333!

jack369 发表于 2020-3-26 14:22:49

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

bezhu 发表于 2020-4-24 09:22:04

66666666666666666,楼主棒:lol
页: [1] 2
查看完整版本: 微信小程序之Canvas--玩坏FlappyBird