用JS实现井字棋——功能实现（上）

2023-10-09 14:48:42

好的，我会根据您的要求完成这篇技术博客。

用JS实现井字棋——功能实现（上）

井字棋是一款经典的策略游戏，两个人轮流在3x3的格子中放置自己的棋子，先组成一条直线（横、竖、斜）的一方获胜。井字棋的玩法简单，但要想获胜却并不容易。今天我们就来用JavaScript实现一个井字棋游戏，并在此过程中学习一些JavaScript的知识。

单元格点击

首先，我们需要创建一个井字棋的棋盘。我们可以使用一个二维数组来表示棋盘，其中每个元素代表一个单元格。单元格可以是空的，也可以是玩家1或玩家2的棋子。

const board = [
  [null, null, null],
  [null, null, null],
  [null, null, null],
];

接下来，我们需要给每个单元格添加一个点击事件监听器。当玩家点击一个单元格时，我们就将玩家的棋子放在该单元格中。

const cells = document.querySelectorAll('.cell');
cells.forEach((cell) => {
  cell.addEventListener('click', (event) => {
    const row = event.target.dataset.row;
    const col = event.target.dataset.col;

    if (board[row][col] === null) {
      board[row][col] = currentPlayer;
      renderBoard();
      checkWinner();
    }
  });
});

切换玩家

每当一个玩家放置了自己的棋子后，我们就需要切换到另一个玩家。我们可以使用一个布尔变量来表示当前玩家。

let currentPlayer = 1;

const switchPlayer = () => {
  currentPlayer = currentPlayer === 1 ? 2 : 1;
};

使用枚举

为了让代码更加易读，我们可以使用枚举来表示玩家和单元格的状态。

const Player = {
  None: 0,
  Player1: 1,
  Player2: 2,
};

const CellState = {
  Empty: 0,
  Player1: 1,
  Player2: 2,
};

游戏判赢思路讲解

井字棋的判赢条件很简单，先组成一条直线（横、竖、斜）的一方获胜。我们可以使用两个循环来检查所有的直线。

const checkWinner = () => {
  // 检查横向
  for (let i = 0; i < 3; i++) {
    if (
      board[i][0] !== CellState.Empty &&
      board[i][0] === board[i][1] &&
      board[i][0] === board[i][2]
    ) {
      return board[i][0];
    }
  }

  // 检查纵向
  for (let i = 0; i < 3; i++) {
    if (
      board[0][i] !== CellState.Empty &&
      board[0][i] === board[1][i] &&
      board[0][i] === board[2][i]
    ) {
      return board[0][i];
    }
  }

  // 检查斜向
  if (
    board[0][0] !== CellState.Empty &&
    board[0][0] === board[1][1] &&
    board[0][0] === board[2][2]
  ) {
    return board[0][0];
  }

  if (
    board[0][2] !== CellState.Empty &&
    board[0][2] === board[1][1] &&
    board[0][2] === board[2][0]
  ) {
    return board[0][2];
  }

  // 如果没有获胜者，则返回0
  return CellState.Empty;
};