井字棋reset函数无法将turn设为X的问题求助

我希望reset函数能将turn的值设置为"X"，但实际并未生效。当前每次游戏结束后，起始回合会交替变化：游戏1由X开始，游戏2由O开始，游戏3又回到X……尽管我在reset函数的第一行添加了turn = "X"代码，但毫无作用。

问题根源 #

核心问题在于点击事件的执行顺序：
当玩家落子触发胜利/平局时，findWinningCombination()或checkDraw()会调用reset把turn设为"X"，但紧接着点击事件里的代码会执行turn = turn === "X" ? "O" : "X"，直接把刚重置的"X"切换成"O"，导致下一局起始回合被篡改。

另外还有两处次要错误：

1. findWinningCombination()中的board[(a, b, c)] != undefined是无效判断，逗号运算符只会取最后一个值c，无法正确检查三个格子是否非空
2. checkDraw()调用findWinningCombination()无意义，且该函数没有返回值，导致平局判断逻辑失效

解决方案 #

修改代码逻辑，确保触发胜利/平局后立即终止点击事件的后续执行，同时修复两处错误：

修改后的JavaScript代码 #

let board = new Array(9).fill();
const squares = document.getElementsByClassName("square");
let turn = "X";
let X = 0;
let O = 0;
// 新增游戏结束状态，防止重复操作
let gameOver = false;

// 获取分数元素（原代码遗漏了这部分定义）
const xText = document.getElementById('xText');
const oText = document.getElementById('oText');

for (let i = 0; i < squares.length; i++) {
  let element = squares[i];
  element.addEventListener("click", function (e) {
    // 游戏结束或格子已填充时直接返回
    if (gameOver || element.textContent) return;

    element.textContent = turn;
    board[e.target.id] = e.target.textContent;
    
    // 检查胜利
    if (findWinningCombination()) {
      updateScore();
      reset();
      return; // 终止后续代码，避免切换回合
    }
    
    // 检查平局
    if (checkDraw()) {
      reset();
      return; // 终止后续代码，避免切换回合
    }

    // 只有未结束时才切换回合
    turn = turn === "X" ? "O" : "X";
  });
}

function findWinningCombination() {
  const winningCombinations = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6]
  ];

  for (const combination of winningCombinations) {
    const [a, b, c] = combination;
    // 修复判断逻辑：检查三个格子非空且值相同
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      return true;
    }
  }
  return false;
}

// 抽离分数更新逻辑，代码更清晰
function updateScore() {
  switch (turn) {
    case "X":
      X++;
      xText.textContent = `X: ${X}`;
      break;
    case "O":
      O++;
      oText.textContent = `O: ${O}`;
      break;
  }
}

function checkDraw() {
  // 正确逻辑：无胜者且所有格子已填充
  return !findWinningCombination() && !board.includes(undefined);
}

function reset() {
  turn = "X";
  board = new Array(9).fill();
  gameOver = false;
  for (let i = 0; i < squares.length; i++) {
    squares[i].textContent = "";
  }
}

关键修改点 #

1. 新增gameOver状态变量，防止游戏结束后继续点击格子
2. 触发胜利/平局后立即return，避免执行后续的回合切换代码
3. 修复findWinningCombination()的判断条件，正确检查胜利组合
4. 抽离updateScore()函数，优化代码结构
5. 修正checkDraw()的判断逻辑，确保平局检测正确

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