JavaScript井字棋游戏符号分配与CPU落子逻辑故障排查

一、符号分配逻辑修正 #

先聚焦setPlayerSymbol函数，核心要保证玩家选择的符号被正确赋值，同时CPU符号取反：

• 常见错误是条件判断颠倒，导致玩家选O时被分配X，示例修正如下：

// 错误写法（符号分配颠倒）
function setPlayerSymbol(selectedSymbol) {
  if (selectedSymbol === 'O') {
    playerSymbol = 'X';
    cpuSymbol = 'O';
  } else {
    playerSymbol = 'X';
    cpuSymbol = 'O';
  }
}

// 正确写法
function setPlayerSymbol(selectedSymbol) {
  playerSymbol = selectedSymbol;
  cpuSymbol = selectedSymbol === 'X' ? 'O' : 'X';
}

• 额外要注意：切换游戏模式（单人/双人）时，需重置playerSymbol、cpuSymbol变量，避免双人模式的符号残留影响单人模式逻辑。

二、CPU落子触发与逻辑修正 #

1. 先手逻辑调整 #

单人模式下，若玩家选择O，CPU作为X应先手落子，游戏初始化时需主动触发CPU回合：

function startSinglePlayerGame(selectedSymbol) {
  setPlayerSymbol(selectedSymbol);
  gameMode = 'single';
  // 玩家选O时，CPU先手
  if (cpuSymbol === 'X') {
    cpuMove();
  }
}

2. CPU落子核心逻辑修复 #

确保cpuMove只在单人模式、当前为CPU回合、棋盘有空位时执行，且落子后正确切换回合：

function cpuMove() {
  // 过滤空格子
  const emptyCells = Array.from(document.querySelectorAll('.cell:not(.taken)'));
  if (emptyCells.length === 0 || gameMode !== 'single') return;

  // 随机选择空格子（可替换为AI算法）
  const randomIndex = Math.floor(Math.random() * emptyCells.length);
  const targetCell = emptyCells[randomIndex];
  
  // 落子并标记状态
  targetCell.textContent = cpuSymbol;
  targetCell.classList.add('taken');
  
  // 落子后检查胜负/平局，切换回玩家回合
  if (checkWinner() || checkDraw()) return;
  currentTurn = playerSymbol;
}

3. 玩家落子后的回合切换 #

玩家落子后，必须确认胜负状态，再切换到CPU回合并触发落子：

function handleCellClick(e) {
  const cell = e.target;
  // 非单人模式、非玩家回合、格子已被占用时直接返回
  if (gameMode !== 'single' || currentTurn !== playerSymbol || cell.classList.contains('taken')) return;

  // 玩家落子
  cell.textContent = playerSymbol;
  cell.classList.add('taken');

  // 检查玩家是否获胜或平局
  if (checkWinner() || checkDraw()) return;

  // 切换到CPU回合并触发落子
  currentTurn = cpuSymbol;
  cpuMove();
}

三、调试技巧 #

在关键函数中添加日志输出，快速定位变量错误：

// 在setPlayerSymbol、cpuMove、handleCellClick中添加
console.log(`玩家符号: ${playerSymbol}, CPU符号: ${cpuSymbol}, 当前回合: ${currentTurn}`);

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