人工智能对战井字棋，你敢来挑战吗？

2023-11-17 18:46:36

在本文中，我们将使用 JavaScript 实现一个井字棋游戏，并让人工智能与人类玩家对战。井字棋，又称三子棋或井字过三关，是一种古老的游戏，由两人在 3x3 的格子上轮流放置棋子。首先在一条直线上（水平、垂直或对角线）放置三个棋子的玩家获胜。

要实现这个游戏，我们需要以下步骤：

创建一个 3x3 的棋盘
让玩家选择是先手还是后手
让玩家轮流放置棋子
检查是否有玩家获胜
如果没有获胜，继续游戏
如果有获胜，宣布获胜者

在实现这个游戏时，我们可以使用 HTML、CSS 和 JavaScript。HTML 用于创建棋盘，CSS 用于设置样式，JavaScript 用于实现游戏逻辑。

以下是实现代码的一个示例：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }

    .cell {
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }

    .x {
      color: red;
    }

    .o {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>井字棋</h1>
  <div class="board">
    <div class="cell" id="cell-1-1"></div>
    <div class="cell" id="cell-1-2"></div>
    <div class="cell" id="cell-1-3"></div>
    <div class="cell" id="cell-2-1"></div>
    <div class="cell" id="cell-2-2"></div>
    <div class="cell" id="cell-2-3"></div>
    <div class="cell" id="cell-3-1"></div>
    <div class="cell" id="cell-3-2"></div>
    <div class="cell" id="cell-3-3"></div>
  </div>

  <script>
    // 定义棋盘
    const board = document.querySelector('.board');

    // 定义玩家
    const player1 = 'X';
    const player2 = 'O';

    // 定义当前玩家
    let currentPlayer = player1;

    // 定义棋盘状态
    const gameState = [
      ['', '', ''],
      ['', '', ''],
      ['', '', '']
    ];

    // 添加点击事件监听器
    board.addEventListener('click', (event) => {
      // 获取被点击的单元格
      const cell = event.target;

      // 获取被点击的单元格的坐标
      const coordinates = cell.id.split('-');
      const row = parseInt(coordinates[1]) - 1;
      const column = parseInt(coordinates[2]) - 1;

      // 检查单元格是否为空
      if (gameState[row][column] === '') {
        // 将棋子放入单元格
        gameState[row][column] = currentPlayer;

        // 更新棋盘
        cell.textContent = currentPlayer;

        // 检查是否有获胜者
        const winner = checkWinner();

        // 如果有获胜者，宣布获胜者
        if (winner) {
          alert(`玩家 ${winner} 获胜！`);

          // 重置游戏
          resetGame();
        }

        // 如果没有获胜者，切换玩家
        else {
          currentPlayer = currentPlayer === player1 ? player2 : player1;
        }
      }
    });

    // 检查是否有获胜者
    function checkWinner() {
      // 检查水平线是否有获胜者
      for (let i = 0; i < 3; i++) {
        if (gameState[i][0] !== '' && gameState[i][0] === gameState[i][1] && gameState[i][1] === gameState[i][2]) {
          return gameState[i][0];
        }
      }

      // 检查垂直线是否有获胜者
      for (let j = 0; j < 3; j++) {
        if (gameState[0][j] !== '' && gameState[0][j] === gameState[1][j] && gameState[1][j] === gameState[2][j]) {
          return gameState[0][j];
        }
      }

      // 检查对角线是否有获胜者
      if (gameState[0][0] !== '' && gameState[0][0] === gameState[1][1] && gameState[1][1] === gameState[2][2]) {
        return gameState[0][0];
      }

      if (gameState[0][2] !== '' && gameState[0][2] === gameState[1][1] && gameState[1][1] === gameState[2][0]) {
        return gameState[0][2];
      }

      // 如果没有获胜者，返回 null
      return null;
    }

    // 重置游戏
    function resetGame() {
      // 清空棋盘
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
          gameState[i][j] = '';
        }
      }

      // 更新棋盘
      const cells = document.querySelectorAll('.cell');
      cells.forEach((cell) => {
        cell.textContent = '';
      });

      // 设置当前玩家为玩家 1
      currentPlayer = player1;
    }
  </script>
</body>
</html>