井字棋isWinAndFin函数故障：无法正确判定胜负并终止游戏

问题分析 #

原isWinAndFin()函数存在以下核心问题：

• 局部声明gameOn，无法修改全局游戏状态，导致胜负判定后无法终止游戏
• 胜负判定逻辑完全错误，直接将获胜条件数组与布尔值对比，未实际检查棋盘格子内容
• 循环条件i<=winningCondition.length会触发数组越界
• 平局判定逻辑缺失，未检查棋盘是否填满就直接返回平局提示

修复步骤 #

1. 全局状态修正：删除函数内的let gameOn=false;，直接修改全局gameOn变量以控制游戏启停
2. 胜负判定逻辑重构：遍历获胜条件数组，检查对应位置的棋盘格子是否全部为同一非空玩家标记
3. 循环边界修正：将循环条件改为i<winningCondition.length，避免数组越界
4. 平局判定完善：先检查胜负，再判断棋盘是否无空格子来判定平局
5. 获胜方提示修正：在buttonClick中先记录当前玩家，再切换玩家，避免提示错误的获胜方

修正后的完整代码 #

let board=["","","","","","","","",""];
const boardIndex =['b1','b2','b3','b4','b5','b6','b7','b8','b9']
const arr1=document.querySelectorAll(".button");
let playerTurn= document.getElementById('turn');

let currentPlayer= "X";
let gameOn=false;

console.log(arr1);
console.log(playerTurn);

const winningCondition = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6],
];

gameIsOn();

// 补上原代码缺失的按钮点击事件绑定
arr1.forEach(btn => {
  btn.addEventListener('click', () => buttonClick(btn.id));
});

function buttonClick(id){
   const clicked = document.getElementById(id)
   console.log(id)
   if (clicked.textContent != "" || !gameOn){
      return;
   }
   else{
      clicked.textContent = currentPlayer
      // 先记录当前玩家为潜在获胜者，再切换玩家
      const winner = currentPlayer;
      currentPlayer = currentPlayer === "X" ? "O" : "X";
      playerTurn.textContent = currentPlayer + "'s turn"
      isWinAndFin(winner);
   }
}

function isWinAndFin(winner){
   // 遍历所有获胜条件，检查是否达成
   for (let i=0; i<winningCondition.length; i++){
      const [a,b,c] = winningCondition[i];
      const cellA = document.getElementById(boardIndex[a]).textContent;
      const cellB = document.getElementById(boardIndex[b]).textContent;
      const cellC = document.getElementById(boardIndex[c]).textContent;
      
      if (cellA !== "" && cellA === cellB && cellB === cellC){
         playerTurn.innerHTML = winner + "'s Wins!";
         gameOn = false;
         return;
      }
   }

   // 检查棋盘是否填满（平局判定）
   const isBoardFull = Array.from(arr1).every(btn => btn.textContent !== "");
   if (isBoardFull){
      playerTurn.innerHTML = "Draw!";
      gameOn = false;
      return;
   }

   // 游戏未结束，无额外操作
}

function gameIsOn(){
   playerTurn.textContent= currentPlayer + "'s turn";
   gameOn=true;
}

额外说明 #

• 补上原代码缺失的按钮点击事件绑定逻辑，确保点击能触发函数
• 使用三元运算符简化玩家切换逻辑，提升代码可读性
• 解构获胜条件数组的索引，让格子内容检查更直观

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