开发井字棋游戏：如何将点击的X/O记录到数组用于胜负判定？

用数组记录棋盘上的X/O状态，是后续判定胜负、处理回合切换的核心基础。我给你拆解下具体的实现思路和代码示例：

1. 先设计你的棋盘状态数组 #

通常我们会用一个3x3的二维数组来对应井字棋的9个格子，初始时可以用null、空字符串或者特定标记表示空位。比如：

// 初始化3x3的空棋盘数组
let board = Array(3).fill().map(() => Array(3).fill(null));
// 初始状态：[[null, null, null], [null, null, null], [null, null, null]]

2. 点击棋盘时同步更新数组 #

当用户点击某个格子时，你需要先确定这个格子对应的「行号」和「列号」（可以通过DOM元素的自定义属性、索引计算等方式获取），然后把当前玩家的标记（X/O）存入数组对应位置：

举个简单的DOM交互示例：

<!-- 假设你的棋盘HTML是这样的，每个格子带data-row和data-col标记位置 -->
<div class="board">
  <div class="cell" data-row="0" data-col="0"></div>
  <div class="cell" data-row="0" data-col="1"></div>
  <div class="cell" data-row="0" data-col="2"></div>
  <!-- 剩下6个格子同理，行0-2，列0-2 -->
</div>

let currentPlayer = 'X'; // 当前玩家，回合切换时改成'O'

// 给所有格子绑定点击事件
document.querySelectorAll('.cell').forEach(cell => {
  cell.addEventListener('click', () => {
    // 先获取当前格子的行和列
    const row = parseInt(cell.dataset.row);
    const col = parseInt(cell.dataset.col);

    // 检查这个格子是否已经被占用，避免重复点击
    if (board[row][col] !== null) return;

    // 1. 更新数组：把当前玩家的标记存入对应位置
    board[row][col] = currentPlayer;
    // 2. 更新UI：在格子里显示X/O
    cell.textContent = currentPlayer;

    // 3. 这里就可以调用胜负判定函数了！
    if (checkWin(board, currentPlayer)) {
      alert(`${currentPlayer} 获胜！`);
      // 重置棋盘等逻辑...
    } else if (checkDraw(board)) {
      alert('平局！');
    } else {
      // 切换玩家
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
  });
});

3. 基于数组实现胜负判定 #

有了记录状态的数组，胜负判定就变得很简单——只需要检查数组的行、列、两条对角线是否有连续三个相同的非空标记：

function checkWin(board, player) {
  // 检查行
  for (let row = 0; row < 3; row++) {
    if (board[row][0] === player && board[row][1] === player && board[row][2] === player) {
      return true;
    }
  }

  // 检查列
  for (let col = 0; col < 3; col++) {
    if (board[0][col] === player && board[1][col] === player && board[2][col] === player) {
      return true;
    }
  }

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

  return false;
}

// 可选：检查平局（数组没有空位且没人获胜）
function checkDraw(board) {
  return board.every(row => row.every(cell => cell !== null));
}

这样一来，数组就完美承担了「记录棋盘状态」的角色，所有的逻辑判断都基于这个数组来做，既清晰又容易维护。

内容的提问来源于stack exchange，提问作者user8840209