赋能Vue：打造你的专属井字棋游戏

2024-01-22 09:52:48

前言

井字棋，一个经典的棋盘游戏，以其简单的规则和令人着迷的策略而广受欢迎。今天，我们将使用Vue.js来构建一个简单的井字棋游戏，让您体验前端编程的魅力。

构建游戏棋盘

首先，我们需要创建一个Vue组件来表示游戏棋盘。该组件将包含9个方格，并负责处理玩家的点击事件。

<template>
  <div class="game-board">
    <div class="cell" v-for="cell in cells" @click="handleClick(cell)"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cells: Array(9).fill(null)
    }
  },
  methods: {
    handleClick(cell) {
      if (this.cells[cell] === null) {
        this.cells[cell] = this.currentPlayer;
        this.checkWin();
      }
    },
    checkWin() {
      // 检查是否有获胜情况，如果有，则宣布获胜并结束游戏
    }
  },
  computed: {
    currentPlayer() {
      return this.cells.filter(cell => cell !== null).length % 2 === 0 ? 'X' : 'O';
    }
  }
}
</script>

实现游戏逻辑

接下来，我们需要实现游戏逻辑，包括玩家的回合、获胜条件和游戏结束。

// 在handleClick方法中
if (this.cells[cell] === null) {
  this.cells[cell] = this.currentPlayer;
  this.checkWin();

  // 检查是否有获胜情况，如果有，则宣布获胜并结束游戏
  const winConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  for (let i = 0; i < winConditions.length; i++) {
    const condition = winConditions[i];
    if (this.cells[condition[0]] === this.currentPlayer &&
        this.cells[condition[1]] === this.currentPlayer &&
        this.cells[condition[2]] === this.currentPlayer) {
      alert('获胜者：' + this.currentPlayer);
      this.cells = Array(9).fill(null);
      return;
    }
  }

  // 检查是否平局，如果有，则宣布平局并结束游戏
  if (this.cells.filter(cell => cell === null).length === 0) {
    alert('平局');
    this.cells = Array(9).fill(null);
    return;
  }
}