基于vue写一个简单网页游戏代码

好的，下面是一个基于Vue的简单点击方块游戏的代码示例：

<template>
  <div id="game">
    <div class="score">得分：{{ score }}</div>
    <div class="board">
      <div v-for="(block, index) in blocks" :key="index" class="block" @click="clickBlock(index)">
        {{ block }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blocks: [], // 存储方块的数组
      score: 0 // 得分
    };
  },
  mounted() {
    this.initBlocks();
  },
  methods: {
    // 初始化方块
    initBlocks() {
      for (let i = 0; i < 16; i++) {
        this.blocks.push("");
      }
      this.randomBlock();
    },
    // 随机生成方块
    randomBlock() {
      const index = Math.floor(Math.random() * 16);
      if (this.blocks[index] === "") {
        this.blocks.splice(index, 1, "X");
      } else {
        this.randomBlock();
      }
    },
    // 点击方块
    clickBlock(index) {
      if (this.blocks[index] === "X") {
        this.score++;
        this.blocks.splice(index, 1, "");
        this.randomBlock();
      }
    }
  }
};
</script>

<style>
#game {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score {
  font-size: 24px;
  margin-bottom: 20px;
}

.board {
  display: flex;
  flex-wrap: wrap;
  width: 340px;
  height: 340px;
}

.block {
  width: 80px;
  height: 80px;
  font-size: 40px;
  text-align: center;
  line-height: 80px;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>

这个游戏是一个简单的点击方块游戏，游戏开始时会随机生成一个 "X" 方块，玩家需要点击该方块来得分。每次点击后， "X" 方块会消失并随机生成一个新的方块。玩家可以通过得分来衡量自己的游戏成绩。