用Vue帮我写一个扫雷程序

好的，通过Vue框架，我们可以快速构建一个扫雷程序。以下是代码示例：

1. 在HTML文件中添加以下代码：

<div id="app">
  <div class="board">
    <div v-for="(row, rowIndex) in board" :key="rowIndex" class="row">
      <div v-for="(cell, cellIndex) in row" :key="cellIndex" class="cell"
        @click="handleClick(rowIndex, cellIndex)"
        @contextmenu.prevent="handleRightClick(rowIndex, cellIndex)">
        <span v-if="cell.isMine && cell.isRevealed">💣</span>
        <span v-else-if="cell.isFlagged">🚩</span>
        <span v-else-if="cell.isRevealed">{{ cell.adjacentMines }}</span>
      </div>
    </div>
  </div>
</div>

2. 在JavaScript文件中添加以下代码：

const ROWS = 10;
const COLS = 10;
const MINES = 10;

Vue.createApp({
  data() {
    return {
      board: [],
      gameOver: false,
      wins: 0,
    };
  },
  created() {
    this.initBoard();
  },
  methods: {
    initBoard() {
      // create empty board
      for (let i = 0; i < ROWS; i++) {
        this.board.push([]);
        for (let j = 0; j < COLS; j++) {
          this.board[i].push({
            isMine: false,
            isFlagged: false,
            isRevealed: false,
            adjacentMines: 0,
          });
        }
      }

      // add mines
      let mineCount = 0;
      while (mineCount < MINES) {
        const row = Math.floor(Math.random() * ROWS);
        const col = Math.floor(Math.random() * COLS);
        if (!this.board[row][col].isMine) {
          this.board[row][col].isMine = true;
          mineCount++;
        }
      }

      // calculate adjacent mines
      for (let i = 0; i < ROWS; i++) {
        for (let j = 0; j < COLS; j++) {
          if (this.board[i][j].isMine) {
            continue;
          }
          let count = 0;
          for (let rowOffset = -1; rowOffset <= 1; rowOffset++) {
            for (let colOffset = -1; colOffset <= 1; colOffset++) {
              const row = i + rowOffset;
              const col = j + colOffset;
              if (row < 0 || row >= ROWS || col < 0 || col >= COLS) {
                continue;
              }
              if (this.board[row][col].isMine) {
                count++;
              }
            }
          }
          this.board[i][j].adjacentMines = count;
        }
      }
    },
    handleClick(row, col) {
      if (this.gameOver || this.board[row][col].isFlagged) {
        return;
      }
      if (this.board[row][col].isMine) {
        this.gameOver = true;
        return;
      }
      this.revealCell(row, col);
      if (this.checkWin()) {
        this.wins++;
        this.gameOver = true;
      }
    },
    handleRightClick(row, col) {
      if (this.gameOver) {
        return;
      }
      this.board[row][col].isFlagged = !this.board[row][col].isFlagged;
    },
    revealCell(row, col) {
      if (this.board[row][col].isRevealed) {
        return;
      }
      this.board[row][col].isRevealed = true;
      if (this.board[row][col].adjacentMines === 0) {
        for (let rowOffset = -1; rowOffset <= 1; rowOffset++) {
          for (let colOffset = -1; colOffset <= 1; colOffset++) {
            const newRow = row + rowOffset;
            const newCol = col + colOffset;
            if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS) {
              continue;
            }
            this.revealCell(newRow, newCol);
          }
        }
      }
    },
    checkWin() {
      for (let i = 0; i < ROWS; i++) {
        for (let j = 0; j < COLS; j++) {
          if (this.board[i][j].isMine) {
            continue;
          }
          if (!this.board[i][j].isRevealed) {
            return false;
          }
        }
      }
      return true;
    },
  },
}).mount("#app");

3. 在CSS文件中添加以下样式：

.board {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.row {
  display: flex;
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid black;
  cursor: pointer;
}

.cell:hover {
  background-color: lightgray;
}

.cell:active {
  background-color: darkgray;
}

.cell span {
  font-size: 20px;
}

.cell span:hover {
  cursor: default;
}

这样，一个简单的扫雷程序就完成了。您可以根据自己的需要进行修改和扩展。