我正在参与「码上挑战赛」概况请看：码上挑战赛来了！

1.布景:

最近沉浸于小游戏的完成,用前端三件套+js写的一个小鸟游戏,沿用了一贯的玩法,整个项目主要由两部分组成,第一个是匀速水平移动的布景与障碍管子,然后就是水平固定的小鸟,其高度会自动减少,玩家鼠标点击屏幕可以让小鸟往上移动一段距离,当小鸟触碰到管道或者界面边缘时,游戏完毕且显示最后分数。整个完成该过程还是十分有趣的,get到了码上这个插件的便利之处。

项目链接:

2.完成:

流程图:

2.1布景图片与管道移动

经过设置大局的定时器,与速度参数,设置布景的移动

 time: function () {//定时器
    this.timer = setInterval(() => {
      this.gameBackground()
      }, 30)
  },
  gameBackground: function () {//布景移动
    this.gameLeft -= this.gameSpeed
    this.game.style.backgroundPositionX = this.gameLeft + 'px'
  },
  pipeMove: function () {//管道移动
    for (var i = 0; i < 7; i++) {
      var uppipe = this.pipeArr[i].up
      var downpipe = this.pipeArr[i].down
      var x = uppipe.offsetLeft - this.gameSpeed
      if (x == 15) {
        //得分判别
        this.score.innerText = ++this.scores
      }
      if (x <= -52) {
        x = 2045
        var upHeight = 100 + Math.floor(Math.random() * 200)
        var downHeight = 450 - upHeight
        uppipe.style.height = upHeight + 'px'
        downpipe.style.height = downHeight + 'px'
      }
      uppipe.style.left = x + 'px'
      downpipe.style.left = x + 'px'
    }
  },

2.2管道的高度设置

高度的设置使用了随机函数生成管子的top值,且坚持上下管子之间的缝隙恒定为450px

    var upHeight = 100 + Math.floor(Math.random() * 200)
    var downHeight = 450 - upHeight
    this.UpPipe = this.eleBorn('div', ['pipe', 'pipe-up'], {
      left: x + 'px',
      height: upHeight + 'px',
    })
    this.DownPipe = this.eleBorn('div', ['pipe', 'pipe-down'], {
      left: x + 'px',
      height: downHeight + 'px',
    })
    this.game.appendChild(this.UpPipe)
    this.game.appendChild(this.DownPipe)
    this.pipeArr.push({
      up: this.UpPipe,
      down: this.DownPipe,
    })
  },

2.3游戏完毕条件判定

判定设置水平边缘触碰或小鸟与管道触碰时,游戏完毕

gameBorder: function () {
    //上天入地游戏完毕
    if (this.birdTop <= 0 || this.birdTop >= 570) {
      this.playEnd()
    }
    //撞到柱子游戏完毕
    for (var i = 0; i < 7; i++) {
      var upheight = this.pipeArr[i].up
      if (upheight.offsetLeft <= 95 && upheight.offsetLeft >= 11) {
        if (this.birdTop <= upheight.clientHeight || this.birdTop >= upheight.clientHeight + 120) {
          this.playEnd()
        }
      }
    }
  },