用 JS 征服井字棋：决战胜利与终局

2024-01-18 20:50:59

井字棋的胜利与终局（JS 实现——下）##

在上一篇中，我们创建了井字棋游戏的框架，包括创建棋盘、添加点击事件监听器和交替玩家回合。现在，让我们继续完善游戏，实现判断胜利、平局和显示获胜信息的功能。

封装判断胜利函数

为了确定获胜者，我们需要封装一个函数来检查棋盘上的符号是否形成获胜组合。获胜组合包括：

水平行中三个相同符号
垂直行中三个相同符号
对角线中三个相同符号

我们可以使用嵌套循环来遍历棋盘并检查每个可能组合。以下代码演示了如何封装该函数：

function checkWinner() {
  // 检查水平行
  for (let i = 0; i < 3; i++) {
    if (board[i][0] && board[i][0] === board[i][1] && board[i][1] === board[i][2]) {
      return board[i][0];
    }
  }

  // 检查垂直行
  for (let i = 0; i < 3; i++) {
    if (board[0][i] && board[0][i] === board[1][i] && board[1][i] === board[2][i]) {
      return board[0][i];
    }
  }

  // 检查对角线
  if (board[0][0] && board[0][0] === board[1][1] && board[1][1] === board[2][2]) {
    return board[0][0];
  }
  if (board[0][2] && board[0][2] === board[1][1] && board[1][1] === board[2][0]) {
    return board[0][2];
  }

  return null;
}

判断平局

当棋盘上所有方格都被填满，但没有玩家获胜时，则游戏平局。我们可以通过检查棋盘上是否有空方格来判断平局。以下代码演示了如何封装该函数：

function checkTie() {
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      if (!board[i][j]) {
        return false;
      }
    }
  }

  return true;
}

展示获胜信息

当有玩家获胜或游戏平局时，我们需要向用户展示获胜或平局的信息。我们可以使用以下代码向用户显示信息：

function displayResult(winner) {
  if (winner) {
    alert(`恭喜 ${winner} 获胜！`);
  } else {
    alert("平局！");
  }
}

重新开始游戏

当游戏结束时，我们希望用户能够重新开始游戏。我们可以使用以下代码重置游戏：

function resetGame() {
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      board[i][j] = null;
    }
  }

  currentPlayer = "X";
  displayBoard();
}

整合所有功能

现在，我们将所有功能整合到我们的游戏中。当玩家点击方格时，我们将检查获胜情况，判断平局情况，并显示获胜或平局信息。如果游戏结束，我们将提供重置游戏的选项。

// 获取棋盘元素
const boardElement = document.getElementById("board");

// 创建棋盘
const board = [
  [null, null, null],
  [null, null, null],
  [null, null, null],
];

// 当前玩家
let currentPlayer = "X";

// 添加点击事件监听器
boardElement.addEventListener("click", (e) => {
  // 获取点击方格的坐标
  const row = e.target.dataset.row;
  const col = e.target.dataset.col;

  // 检查方格是否已被点击
  if (board[row][col]) {
    return;
  }

  // 玩家在方格上落子
  board[row][col] = currentPlayer;

  // 检查获胜情况
  const winner = checkWinner();

  // 检查平局情况
  const tie = checkTie();

  // 根据结果显示获胜或平局信息
  if (winner) {
    displayResult(winner);
    return;
  } else if (tie) {
    displayResult();
    return;
  }

  // 交替玩家回合
  currentPlayer = currentPlayer === "X" ? "O" : "X";

  // 显示棋盘
  displayBoard();
});

// 显示棋盘
function displayBoard() {
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      const cell = document.getElementById(`cell-${i}-${j}`);
      cell.textContent = board[i][j] || "";
    }
  }
}

// 重置游戏
const resetButton = document.getElementById("reset");
resetButton.addEventListener("click", resetGame);