本文旨在帮助开发者解决在JavaScript井字棋游戏中，当棋盘填满时，平局判断与胜负判断冲突的问题。通过修改`checkWin()`和`draw()`函数，确保在棋盘填满且没有玩家获胜时，正确地判定为平局，避免胜负判断的错误覆盖。
在开发井字棋游戏时，一个常见的挑战是如何正确地判断平局，尤其是在棋盘填满的同时，还要避免与胜负判断产生冲突。以下提供一种解决方案，通过修改 checkWin() 和 draw() 函数，确保逻辑的正确性。
问题分析
原代码中，draw() 函数仅简单地检查棋盘是否已满，并直接输出 "tie"。然而，如果最后一步导致某位玩家获胜，checkWin() 函数会先判断出胜者，但 draw() 函数随后仍然会执行，导致最终输出 "tie"，覆盖了正确的胜负结果。
解决方案：修改 checkWin() 和 draw() 函数
核心思路是让 checkWin() 函数返回胜者（如果有），否则返回空字符串。draw() 函数返回一个布尔值，表示是否平局。在主循环中，首先检查是否有胜者，如果没有，再检查是否平局。
1. 修改 checkWin() 函数
将 checkWin() 函数修改为返回胜者，如果没有胜者则返回 null。
function checkWin(){
if (squares[0].textContent == 'X' && squares[1].textContent == 'X' && squares[2].textContent == 'X') return 'X Wins';
if (squares[0].textContent == 'O' && squares[1].textContent == 'O' && squares[2].textContent == 'O') return 'O Wins';
if (squares[3].textContent == 'X' && squares[4].textContent == 'X' && squares[5].textContent == 'X') return 'X Wins';
if (squares[3].textContent == 'O' && squares[4].textContent == 'O' && squares[5].textContent == 'O') return 'O Wins';
if (squares[6].textContent == 'X' && squares[7].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
if (squares[6].textContent == 'O' && squares[7].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
if (squares[0].textContent == 'X' && squares[3].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
if (squares[0].textContent == 'O' && squares[3].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
if (squares[1].textContent == 'X' && squares[4].textContent == 'X' && squares[7].textContent == 'X') return 'X Wins';
if (squares[1].textContent == 'O' && squares[4].textContent == 'O' && squares[7].textContent == 'O') return 'O Wins';
if (squares[2].textContent == 'X' && squares[5].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
if (squares[2].textContent == 'O' && squares[5].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
if (squares[0].textContent == 'X' && squares[4].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
if (squares[0].textContent == 'O' && squares[4].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
if (squares[2].textContent == 'X' && squares[4].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
if (squares[2].textContent == 'O' && squares[4].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
return null;
}2. 修改 draw() 函数
修改 draw() 函数，使其返回一个布尔值，表示是否平局。只有当所有格子都被填充且没有玩家获胜时，才返回 true。
function draw(){
return squares.every(square => square.textContent !== '');
}3. 修改主循环
在主循环中，先调用 checkWin() 函数，如果返回了胜者，则显示胜者信息。否则，调用 draw() 函数，如果返回 true，则显示平局信息。
squares.forEach(function(e, i){
squares[i].onclick = ()=>{
squares[i].textContent = player = player === 'O' ? 'X' : 'O';
squares[i].textContent === 'X' ? message.textContent = "It's O's turn" :
message.textContent = "It's X's turn";
let winner = checkWin();
if (winner) {
message.textContent = winner;
} else if (draw()) {
message.textContent = 'Draw';
console.log('Tie Game');
}
}
});完整代码示例 (修改后的关键部分)
function checkWin(){
if (squares[0].textContent == 'X' && squares[1].textContent == 'X' && squares[2].textContent == 'X') return 'X Wins';
if (squares[0].textContent == 'O' && squares[1].textContent == 'O' && squares[2].textContent == 'O') return 'O Wins';
if (squares[3].textContent == 'X' && squares[4].textContent == 'X' && squares[5].textContent == 'X') return 'X Wins';
if (squares[3].textContent == 'O' && squares[4].textContent == 'O' && squares[5].textContent == 'O') return 'O Wins';
if (squares[6].textContent == 'X' && squares[7].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
if (squares[6].textContent == 'O' && squares[7].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
if (squares[0].textContent == 'X' && squares[3].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
if (squares[0].textContent == 'O' && squares[3].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
if (squares[1].textContent == 'X' && squares[4].textContent == 'X' && squares[7].textContent == 'X') return 'X Wins';
if (squares[1].textContent == 'O' && squares[4].textContent == 'O' && squares[7].textContent == 'O') return 'O Wins';
if (squares[2].textContent == 'X' && squares[5].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
if (squares[2].textContent == 'O' && squares[5].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
if (squares[0].textContent == 'X' && squares[4].textContent == 'X' && squares[8].textContent == 'X') return 'X Wins';
if (squares[0].textContent == 'O' && squares[4].textContent == 'O' && squares[8].textContent == 'O') return 'O Wins';
if (squares[2].textContent == 'X' && squares[4].textContent == 'X' && squares[6].textContent == 'X') return 'X Wins';
if (squares[2].textContent == 'O' && squares[4].textContent == 'O' && squares[6].textContent == 'O') return 'O Wins';
return null;
}
function draw(){
return squares.every(square => square.textContent !== '');
}
squares.forEach(function(e, i){
squares[i].onclick = ()=>{
squares[i].textContent = player = player === 'O' ? 'X' : 'O';
squares[i].textContent === 'X' ? message.textContent = "It's O's turn" :
message.textContent = "It's X's turn";
let winner = checkWin();
if (winner) {
message.textContent = winner;
} else if (draw()) {
message.textContent = 'Draw';
console.log('Tie Game');
}
}
});总结
通过修改 checkWin() 和 draw() 函数的返回值，并在主循环中先检查胜者，再检查平局，可以有效地解决井字棋游戏中平局判断与胜负判断冲突的问题。这种方法确保了在任何情况下，游戏都能正确地判断胜负或平局。记住，清晰的逻辑和适当的函数设计是解决问题的关键。
