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

STEP ONE：设计游戏规则。

 作为一个合格的游戏，我们肯定要设计一个合理的游戏规则。

以下是我的方案：

得分=已固定的方块数*1+已消除的行数*50

方块掉落速度=1+已消除的行数*0.05

方块下落的时间间隔=500/方块掉落速度

ok！

STEP TWO：ui实现。

这一步我们放在Index.vue里实现。

// 当一个方块固定
    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里更好。
    }

我们先实现以上两个方法，然后就可以调用他们了。

TIP：

问：如何在子组件里调用父组件？

答：在子组件里使用this.$parent.方法名即可。

如下:

next里添this.squareOk()

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()
      }
    }

GameCanvas里的moveDown（）添加this.$parent.lineOk()

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
    }

最后修改我们的html代码

<template>
  <div id="container" class="bg">
        <!--ui-->
        <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>

然后，如图。

 （至于最高分数的实现等之后服务器搭建后在实现。）

 代码可能后来修改了一下，具体以github的版本为准。