微信小程序开发|教程|文档|资源汇总_即速论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 7045|回复: 11

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

  [复制链接]
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    发表于 2017-3-23 11:03:34 | 显示全部楼层 |阅读模式
    说点:小程序平台,玩过五子棋,玩过贪吃蛇, 你玩过FlappyBird吗?
    效果图:



    实现细节:

    JS逻辑:  

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

    小鸟下降:



    [HTML] 纯文本查看 复制代码
    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)
          
    }



    随机空隙管道
    [HTML] 纯文本查看 复制代码
    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)
      }



    单机屏幕事件:
    [HTML] 纯文本查看 复制代码
    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
          })
        }



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

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    帖子

    34

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2017-3-28 18:45:45 | 显示全部楼层
    谢~楼主分享!!!!!!!!!!!!!!!

    该用户从未签到

    0

    主题

    5

    帖子

    26

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2018-5-11 21:27:51 | 显示全部楼层
    看看看看看

    该用户从未签到

    0

    主题

    78

    帖子

    354

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2018-5-11 23:46:30 | 显示全部楼层
    88888888888888888888888

    该用户从未签到

    0

    主题

    15

    帖子

    52

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2018-5-16 11:48:37 | 显示全部楼层
    希望是我想要的 学习一下

    该用户从未签到

    0

    主题

    12

    帖子

    28

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2019-1-4 14:20:49 | 显示全部楼层
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    11

    帖子

    62

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2019-6-21 00:07:30 | 显示全部楼层
    jkhjkhjklhlkj

    该用户从未签到

    0

    主题

    2

    帖子

    26

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2020-3-6 21:00:13 | 显示全部楼层
    23333333333333!

    该用户从未签到

    0

    主题

    353

    帖子

    830

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2020-3-26 14:22:49 | 显示全部楼层
    我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊

    该用户从未签到

    0

    主题

    3

    帖子

    26

    金钱

    新人求带

    Rank: 1

    积分
    0
    发表于 2020-4-24 09:22:04 | 显示全部楼层
    66666666666666666,楼主棒
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略

    QQ|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1|网站地图   

    GMT+8, 2021-9-21 13:42 , Processed in 0.176830 second(s), 47 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表