[从零开始]使用Vue-cli制作俄罗斯方块小游戏（五）菜单界面

STEP ONE:设计菜单界面

在components里新建MenuBox.vue文件。

在其中，我们将设计菜单界面。

<template>
  <div class="menu-bg">
    <div class="content center">
      <button type="button">再来一次</button>
      <button type="button">排行榜</button>
      <button type="button">上传成绩</button>
    </div>
  </div>
</template>

<style scoped>
.menu-bg{
  background-color:rgba(0, 0, 0, .7)
}
button{
  text-align:center;
  background: #0000079c;
  color: white;
  font-size:1.5em;
  border: none;
  padding: 6px 14px;
  margin-top:14px;
  border-radius:6px;
}
.content{
  width:60%;
  height:70%;
  background: rgba(208, 109, 98, 0.7);
  border-radius:10px;
  /* 内容水平垂直居中 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.center{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}
</style>

如上。

STEP TWO：游戏结束时显示菜单

现在Index.vue里调用它。

 <menu-box class="menu" v-if="show"></menu-box>

然后定义一个show用来控制菜单的显示。

最后我们定义一个gameEnd方法。

gameEnd () {
      clearInterval(this.timer)
      this.show = true
    }

在我们next里调用。

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) {
            this.gameEnd()
            return
          }
        }
        // 新的block
        this.$refs.gameCanvas.createBlock()
        this.squareOk()
      }
    }

效果如下：

 

 

STEP THREE：再来一次

 现在我们的服务器还没有搭建，所以只能实现再来一次的功能。

点击事件实现。

<button type="button" @click="resume()">再来一次</button>

resume () {

      this.$parent.newGame()

 }

因为我们前期工作做的好，所以只需要实现点击事件就ok了！

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈！