本文解决 Tic Tac Toe 游戏中点击“Restart”后 X 先手但连续走两步、无法正常切换至 O 的问题，核心在于重置 nextTurn 状态变量，确保游戏逻辑与 DOM 类名严格同步。
本文解决 tic tac toe 游戏中点击“restart”后 x 先手但连续走两步、无法正常切换至 o 的问题，核心在于重置 `nextturn` 状态变量，确保游戏逻辑与 dom 类名严格同步。
该问题的根本原因在于：游戏状态变量 nextTurn 未在重启时重置。虽然你在 restartGame() 中通过 board.classList.add('x') 正确设置了 DOM 的视觉标识，但 JavaScript 变量 nextTurn 仍保留上一局结束时的值（例如 X 获胜后，nextTurn 实际为 'o'）。因此，首次点击时 changeTurns() 将其从 'o' 切换为 'x'，导致 X 实际执行了第二步——而用户看到的是“X 先落子 → X 再落子”，误以为 X 连走两步。
✅ 正确做法是：在 restartGame() 函数中显式重置 nextTurn = 'x'，使其与 DOM 状态（board.classList.add('x')）和游戏规则（X 总是先手）保持一致。
以下是修复后的 restartGame() 函数（关键修改已加粗）：
function restartGame() {
cell.forEach(cell => {
cell.innerHTML = '';
displayOutcome.classList.remove('show');
cell.classList.remove('o', 'x');
board.classList.remove('o', 'x');
board.classList.add('x');
});
nextTurn = 'x'; // ✅ 关键修复：重置状态变量
}
同时建议优化 changeTurns() 的健壮性，避免因类名未同步导致逻辑异常：
function changeTurns() {
nextTurn = nextTurn === 'x' ? 'o' : 'x';
board.className = board.className.replace(/x|o/g, '') + ` ${nextTurn}`; // 确保 class 干净且准确
}
⚠️ 注意事项：
- 不要仅依赖 DOM 类名推断游戏状态（如 board.classList.contains('x')），应始终以 nextTurn 变量为准；
- 所有状态重置操作（DOM 清空、类名清理、变量赋值）必须在 restartGame() 中集中完成；
- 若后续扩展支持人机对战或倒计时等功能，务必统一维护单一可信状态源（即 nextTurn）。
至此，重启后 X 将严格只走第一步，随后自动切换至 O，回合逻辑完全恢复正常。
