用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    945

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-3-23 11:03:34 柿霖不是林 咫尺尊享 楼主 51464
    说点:小程序平台,玩过五子棋,玩过贪吃蛇, 你玩过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
    使用道具 举报 回复
    谢~楼主分享!!!!!!!!!!!!!!!
    看看看看看
    88888888888888888888888
    希望是我想要的 学习一下
    使用道具 举报 回复
    发新帖
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X