用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:38

说点:平台,玩过五子棋,玩过贪吃蛇, 你玩过FlappyBird吗? 效果图:实现细节:JS逻辑:主要包括 小鸟下降逻辑、随机空隙管道逻辑、 单机屏幕事件、碰撞事件、计数逻辑小鸟下降:birdDown:function(){ ctx.clear ...

说点:平台,玩过五子棋,玩过贪吃蛇, 你玩过FlappyBird吗?
效果图:

实现细节:

JS逻辑:

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

小鸟下降:

  1. birdDown:function(){
  2. ctx.clearRect(0, 0, res.windowWidth, res.windowHeight)
  3. bird.y += bird.factor
  4. ctx.drawImage(birds[Math.floor(Math.random()*2)], bird.x, bird.y, bird.px, bird.px)
  5. ctx.draw()
  6. timer1 = requestAnimationFrame(this.birdDown)
  7. if( bird.y>res.windowHeight){
  8. cancelAnimationFrame(timer1)
  9. }

随机空隙管道:

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

单机屏幕事件:

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

碰撞事件:

  1. // 这里加了一个插值数10,目的是为了更贴近碰撞
  2. crash:function(){
  3. bird.cX = bird.x+bird.px-10
  4. bird.cY = bird.y
  5. pipe.cX = pipe.x
  6. pipe.cY = gapHeightY
  7. if(bird.cX > pipe.cX & bird.cY < pipe.cY-10 ){
  8. if(bird.cX < pipe.cX+pipe.width){
  9. cancelAnimationFrame(timer1)
  10. this.gameOver();
  11. }
  12. }else if(bird.cX > pipe.cX & bird.cY+bird.px > pipe.cY+gapHeight+10){
  13. if(bird.cX < pipe.cX+pipe.width){
  14. cancelAnimationFrame(timer1)
  15. this.gameOver();
  16. }
  17. }
  18. },

计数逻辑:

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

源码地址:

https://github.com/jeffer0323/We-Canvas


你如果觉得不错,欢迎给我一个star!

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏