使用 JavaScript 的简单井字游戏

本文将介绍如何使用 JavaScript 编写一个简单的井字游戏。我们将使用 HTML，CSS 和 JavaScript 来创建游戏界面并实现游戏逻辑。

游戏规则

井字游戏是一个两人玩的游戏，玩家轮流在九个小方格中标记自己的符号（通常是 X 或 O），先在一条水平、垂直或对角线上连成三个符号的玩家获胜。

创建游戏界面

我们将使用 HTML 和 CSS 来创建游戏界面。首先，我们需要一个包含九个小方格的容器。

<div class="board">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

接下来，我们可以使用 CSS 来设置容器和小方格的样式。这里我们简单设置一下样式，以使游戏界面看起来舒适。

.board {
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid black;
  margin: 50px auto;
}

.square {
  width: 96px;
  height: 96px;
  border: 1px solid black;
}

现在我们已经有了一个游戏界面，里面有九个小方格。我们可以将玩家选择的符号放在里面来实现游戏。

实现游戏逻辑

现在我们需要使用 JavaScript 来实现游戏的逻辑。首先，我们需要为小方格添加一个点击事件，以便玩家能够在其中选择符号。

document.querySelectorAll('.square').forEach(square => {
  square.addEventListener('click', () => {
    // 这里将会实现玩家选择符号的逻辑
  });
});

一旦玩家选择了一个格子，我们需要检查当前是否有玩家已经获胜，并在游戏结束时显示游戏结果。这里我们可以使用一个数组来跟踪哪些小方格由哪个玩家选中了。

const squares = Array.from(document.querySelectorAll('.square'));
let currentPlayer = 'X';
const selections = [null, null, null, null, null, null, null, null, null];

document.querySelectorAll('.square').forEach((square, idx) => {
  square.addEventListener('click', () => {
    if (selections[idx] !== null) {
      return;
    }

    selections[idx] = currentPlayer;
    square.textContent = currentPlayer;
    square.classList.add(currentPlayer);

    if (checkForWinner()) {
      endGame(false);
    } else if (isBoardFull()) {
      endGame(true);
    } else {
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      document.querySelector('.turn').textContent = `${currentPlayer}'s turn`;
    }
  });
});

上面的代码中，我们先初始化了一些变量，然后为每个小方格添加了一个点击事件。在点击事件中，我们首先检查当前小方格是否已经被选中了。如果已经被选中了，则不执行任何操作。否则，我们将其设为当前玩家所选，并更新游戏界面上的内容和样式。然后，我们检查是否有玩家已经获胜，如果有，则结束游戏并显示游戏结果。否则，我们检查是否棋盘已满，如果是，则结束游戏并显示游戏结果。否则，我们切换到另一个玩家，并在游戏界面上更新当前玩家标记。

现在，我们需要实现一些辅助函数来检查是否有玩家已经获胜或棋盘已满了。

function checkForWinner() {
  const winningCombinationIndexes = [
    // 横行
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    // 竖行
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    // 对角线
    [0, 4, 8],
    [2, 4, 6],
  ];

  return winningCombinationIndexes.some(indexes => {
    const [a, b, c] = indexes;
    return (
      selections[a] !== null &&
      selections[a] === selections[b] &&
      selections[b] === selections[c]
    );
  });
}

function isBoardFull() {
  return selections.every(selection => selection !== null);
}

上面的代码中，我们先定义了一个包含所有获胜组合的数组。然后，我们使用 JavaScript 的 Array.prototype.some() 方法来遍历数组中的每个组合，并检查是否其中一组组合被一个玩家选中了。如果找到一个组合，并且其中三个格子都被同一个玩家选中了，就返回一个 true 值表示这个玩家已经获胜了。否则，我们会检查棋盘是否已满，这可以通过检查 selections 数组中是否所有元素都非空得到。

最后，我们需要实现一个 endGame() 函数来结束游戏并显示游戏结果。

function endGame(tie) {
  document.querySelectorAll('.square').forEach(square => {
    square.removeEventListener('click', () => {});
  });

  if (tie) {
    document.querySelector('.turn').textContent = "It's a tie!";
  } else {
    document.querySelector('.turn').textContent = `${currentPlayer} wins!`;
  }
}

上面的代码中，我们先将之前添加的点击事件从每个小方格中删除。然后，根据游戏是否以平局结束来显示不同的消息。

现在，我们已经成功地创建了一个简单的井字游戏，玩家可以通过点击其中的方格来选择符号，并在一条水平、垂直或对角线上连成三个符号时获胜。如果棋盘已满，结果将会是平局。