Vue.js写一个扫雷游戏

好的，下面是一个简单的Vue.js扫雷游戏的代码示例：

HTML模板：

<template>
  <div class="minesweeper">
    <h1>扫雷游戏</h1>
    <div class="grid">
      <div
        v-for="(row, rowIndex) in board"
        :key="rowIndex"
        class="row"
      >
        <div
          v-for="(cell, cellIndex) in row"
          :key="cellIndex"
          :class="['cell', `cell-${cell.status}`]"
          @click="handleClick(rowIndex, cellIndex)"
          @contextmenu.prevent="handleRightClick(rowIndex, cellIndex)"
        >
          <span v-if="cell.status === 'hidden'">{{ cell.flag ? '🚩' : '' }}</span>
          <span v-if="cell.status === 'revealed'">{{ cell.value === 0 ? '' : cell.value }}</span>
          <span v-if="cell.status === 'exploded'">💣</span>
        </div>
      </div>
    </div>
    <div class="controls">
      <button @click="handleReset">重新开始</button>
      <span class="message">{{ message }}</span>
    </div>
  </div>
</template>

CSS样式：

.minesweeper {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.5rem;
  padding: 1rem;
}

.grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

.row {
  display: flex;
  justify-content: center;
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid black;
  cursor: pointer;
  font-size: 1.5rem;
}

.cell-hidden {
  background-color: grey;
}

.cell-revealed {
  background-color: white;
}

.cell-exploded {
  background-color: red;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.message {
  margin-left: 1rem;
}

JavaScript代码：

<script>
export default {
  data() {
    return {
      board: [],
      message: '',
      gameOver: false,
      numMines: 10,
      numRevealed: 0,
      numFlags: 0,
    };
  },
  created() {
    this.reset();
  },
  methods: {
    reset() {
      this.board = this.generateBoard();
      this.message = '';
      this.gameOver = false;
      this.numRevealed = 0;
      this.numFlags = 0;
    },
    generateBoard() {
      const board = [];
      for (let i = 0; i < 8; i++) {
        board[i] = [];
        for (let j = 0; j < 8; j++) {
          board[i][j] = { value: 0, status: 'hidden', flag: false };
        }
      }
      this.placeMines(board);
      this.calculateNumbers(board);
      return board;
    },
    placeMines(board) {
      let numMines = this.numMines;
      while (numMines > 0) {
        const i = Math.floor(Math.random() * 8);
        const j = Math.floor(Math.random() * 8);
        if (board[i][j].value !== -1) {
          board[i][j].value = -1;
          numMines--;
        }
      }
    },
    calculateNumbers(board) {
      for (let i = 0; i < 8; i++) {
        for (let j = 0; j < 8; j++) {
          if (board[i][j].value === -1) {
            continue;
          }
          let numMines = 0;
          if (i > 0 && j > 0 && board[i - 1][j - 1].value === -1) numMines++;
          if (i > 0 && board[i - 1][j].value === -1) numMines++;
          if (i > 0 && j < 7 && board[i - 1][j + 1].value === -1) numMines++;
          if (j > 0 && board[i][j - 1].value === -1) numMines++;
          if (j < 7 && board[i][j + 1].value === -1) numMines++;
          if (i < 7 && j > 0 && board[i + 1][j - 1].value === -1) numMines++;
          if (i < 7 && board[i + 1][j].value === -1) numMines++;
          if (i < 7 && j < 7 && board[i + 1][j + 1].value === -1) numMines++;
          board[i][j].value = numMines;
        }
      }
    },
    handleClick(i, j) {
      const cell = this.board[i][j];
      if (this.gameOver || cell.status !== 'hidden') {
        return;
      }
      if (cell.value === -1) {
        cell.status = 'exploded';
        this.gameOver = true;
        this.message = '你输了！';
      } else {
        this.revealCell(i, j);
        if (this.numRevealed === 64 - this.numMines) {
          this.gameOver = true;
          this.message = '你赢了！';
        }
      }
    },
    revealCell(i, j) {
      const cell = this.board[i][j];
      if (cell.status !== 'hidden' || cell.flag) {
        return;
      }
      cell.status = 'revealed';
      this.numRevealed++;
      if (cell.value === 0) {
        this.revealNeighbors(i, j);
      }
    },
    revealNeighbors(i, j) {
      if (i > 0 && j > 0) this.revealCell(i - 1, j - 1);
      if (i > 0) this.revealCell(i - 1, j);
      if (i > 0 && j < 7) this.revealCell(i - 1, j + 1);
      if (j > 0) this.revealCell(i, j - 1);
      if (j < 7) this.revealCell(i, j + 1);
      if (i < 7 && j > 0) this.revealCell(i + 1, j - 1);
      if (i < 7) this.revealCell(i + 1, j);
      if (i < 7 && j < 7) this.revealCell(i + 1, j + 1);
    },
    handleRightClick(i, j) {
      const cell = this.board[i][j];
      if (this.gameOver || cell.status === 'revealed') {
        return;
      }
      cell.flag = !cell.flag;
      this.numFlags += cell.flag ? 1 : -1;
    },
  },
};
</script>

这个示例中，我们使用了一个8x8的网格来表示扫雷游戏的棋盘。每个单元格可以有三种状态：未揭示、已揭示和爆炸。我们还可以在单元格上放置旗帜来标记它们可能有地雷。

要玩这个游戏，玩家需要点击单元格来揭示它们，或者右键单击来标记它们。如果一个单元格有地雷，它将爆炸并结束游戏。如果玩家成功揭示所有没有地雷的单元格，那么他们就赢了。