[从零开始]使用Vue.js制作俄罗斯方块小游戏（四）ui实现

// 当一个方块固定
    squareOk () {
      this.data.cur_points++
      if (this.data.cur_points > this.data.max_points) {
        this.data.max_points = this.data.cur_points
      }
    },
    // 当一行被消除
    lineOk () {
      this.data.cur_points += 50
      if (this.data.cur_points > this.data.max_points) {
        this.data.max_points = this.data.cur_points
      }
      this.data.speed += 0.05
      clearInterval(this.timer)
      this.timer = setInterval(() => this.next(), 500 / this.data.speed)// 把他放在computed里更好。
    }

next () { // 方块下移
      if (this.$refs.gameCanvas.moveDown()) {
        // 判断是否触顶
        for (let i = 0; i this.$refs.gameCanvas.currentFall.length; i++) {
          if (this.$refs.gameCanvas.currentFall[i].y === 0) {
            // gameEnd()
            console.log(‘game end‘)
            return
          }
        }
        // 新的block
        this.$refs.gameCanvas.createBlock()
        this.squareOk()
      }
    }

moveDown () {
      for (let i = 0; i this.currentFall.length; i++) {
        if (this.currentFall[i].y >= this.TETRIS_ROWS - 1 || this.tetris_status[this.currentFall[i].y + 1][this.currentFall[i].x] !== this.NO_BLOCK) {
          // 记录block
          for (let i = 0; i this.currentFall.length; i++) {
            this.tetris_status[this.currentFall[i].y][this.currentFall[i].x] = this.HAVE_BLOCK
          }
          // 判断有没有满行的
          for (let j = 0; j this.currentFall.length; j++) {
            for (let i = 0; i this.TETRIS_COLS; i++) {
              if (this.tetris_status[this.currentFall[j].y][i] === this.NO_BLOCK) {
                break
              }
              // 最后一行满了
              if (i === this.TETRIS_COLS - 1) {
                // 消除最后一行
                for (let i = this.currentFall[j].y; i > 0; i--) {
                  for (let j = 0; j this.TETRIS_COLS; j++) {
                    this.tetris_status[i][j] = this.tetris_status[i - 1][j]
                  }
                }
                // 加分
                this.$parent.lineOk()
              }
            }
          }
          return true
        }
      }
      for (let i = 0; i this.currentFall.length; i++) {
        this.currentFall[i].y += 1
      }
      this.drawBlocks()
      return false
    }

template>
  div id="container" class="bg">
        
        div id="ui_bg" class="ui_bg">
            div style="float:left;margin-right:4px;">
                
                速度：span>{{ data.speed.toFixed(1) }}span>
            div>
            div style="float:left;">
                当前分数：span>{{ data.cur_points }}span>
            div>
            div style="float:right;">
                最高分数：span>{{ data.max_points }}span>
            div>
        div>
        game-canvas ref="gameCanvas">game-canvas>
    div>
template>