本教程详细探讨了在javaScript实现的Tic-Tac-Toe游戏中，如何精确地检测游戏是否以平局结束。文章分析了传统平局判断逻辑的常见误区，并提出了一种通过跟踪已填充格子数量的优化方案。通过引入filledFields状态变量并在关键函数中进行更新和判断，确保游戏能在无获胜者且棋盘已满时，准确宣布平局，从而提升游戏逻辑的健壮性。
在开发Tic-Tac-Toe（井字棋）这类棋盘游戏时，实现获胜条件检测相对直观，但准确判断游戏是否以平局结束，往往是开发者容易混淆的地方。一个常见的错误是过早地声明平局，即在棋盘尚未完全填满但当前没有获胜者时就判断为平局。本教程将深入探讨Tic-Tac-Toe游戏中平局检测的正确实现方法，并提供一个基于javascript的优化方案。
理解游戏状态与获胜条件
在Tic-Tac-Toe游戏中，我们需要管理以下核心状态：
- board: 一个表示棋盘的数组，通常包含9个元素，每个元素代表一个格子。0表示空，1表示玩家1（X），-1表示玩家2（O）。
- turn: 当前轮到哪个玩家，通常是1或-1。
- winner: 游戏结果。NULL表示游戏进行中，1或-1表示对应玩家获胜，’T’表示平局。
- COMBOS: 一个包含所有获胜组合的数组，例如[[0, 1, 2], [3, 4, 5], …]。
getwinner() 函数的核心职责是检查当前棋盘状态，判断是否有玩家获胜，或者游戏是否已经平局。
初始平局检测逻辑的挑战
在原始的getWinner()实现中，开发者可能尝试在遍历所有获胜组合后，如果没有找到赢家，就直接返回’T’。
function getWinner() { for (let i = 0; i < COMBOS.length; i++) { if (Math.abs(board[COMBOS[i][0]] + board[COMBOS[i][1]] + board[COMBOS[i][2]]) === 3) { return board[COMBOS[i][0]]; // 找到赢家 } // 错误示范：此处不应立即检查平局或继续游戏 // else if (board.includes(null)) { // 原始代码中此处逻辑有误，board初始化为0而非null // return null; // 游戏继续 // } } // 错误示范：如果在此处直接返回 'T'，游戏会在第一步后就结束 // return 'T'; }
上述代码的问题在于：
- board.includes(null) 的误用：原始代码中board数组初始化为0s，因此board.includes(null)永远不会为真。正确检查空位应使用board.includes(0)。
- 过早的平局判断：如果在for循环结束后直接return ‘T’，意味着只要当前没有立即获胜的组合，游戏就会被判定为平局，即使棋盘上还有很多空位。这会导致游戏在第一步点击后就立即结束。
- else if 在循环内的逻辑问题：将else if (board.includes(null))放在循环内部会导致逻辑混乱。它可能在检查完第一个获胜组合后，如果没赢且有空位，就立即返回null，而没有检查其他获胜组合。
优化方案：引入已填充格子计数器
为了准确判断平局，我们需要确保两个条件同时满足：
- 没有玩家获胜。
- 棋盘上所有格子都已被填充。
我们可以通过引入一个额外的状态变量filledFields来跟踪已填充的格子数量。
1. 声明 filledFields 状态变量
首先，在状态变量区声明filledFields：
/*----- state variables -----*/ let board; // array of 9 boxes let turn; // 1 or -1 let winner; // null = no winner; 1 or -1 winner; 'T' = Tie let filledFields; // Counter for filled boxes
2. 初始化 filledFields
在游戏初始化函数init()中，将filledFields设置为0：
/*----- functions -----*/ init(); // Initializes state and calls render() function init() { board = [0, 0, 0, 0, 0, 0, 0, 0, 0]; turn = 1; winner = null; filledFields = 0; // 初始化已填充格子计数器 render(); }
3. 更新 filledFields
在处理玩家点击的handleClick()函数中，每次玩家成功落子后，递增filledFields：
// Get index of the clicked box function handleClick(event) { const boxIdx = parseInt(event.target.id.replace('box-', '')); // if statement in case someone clicks outside box, the box is filled or there is a winner if (isNaN(boxIdx) || board[boxIdx] || winner) return; // update state of board with the current turn value board[boxIdx] = turn; filledFields++; // 有效落子后，递增计数器 // switch player turn turn *= -1; // check for a winner winner = getWinner(); render(); }
4. 改进 getWinner() 函数
现在，getWinner()函数可以按照以下逻辑进行重构：
- 首先，检查是否有玩家获胜。 遍历所有获胜组合，如果找到，则立即返回获胜玩家。
- 如果没有任何玩家获胜，则检查是否已达到平局条件。 这意味着棋盘上的所有格子都已被填充（即filledFields达到9）。
- 如果既没有获胜者，也不是平局，则游戏继续。
// Check for a winner in the state. 1(X) or -1(O), 'T' for Tie, null for no winner yet function getWinner() { // 1. 检查是否有玩家获胜 for (let i = 0; i < COMBOS.length; i++) { const [a, b, c] = COMBOS[i]; if (Math.abs(board[a] + board[b] + board[c]) === 3) { return board[a]; // 找到赢家，返回赢家标识 } } // 2. 如果没有赢家，检查是否平局 (所有格子都已填充) if (filledFields === 9) { return 'T'; // 棋盘已满且无赢家，判定为平局 } // 3. 既没有赢家，也不是平局，游戏继续 return null; }
渲染消息的调整
renderMessage() 函数已经能够正确处理winner为’T’的情况，因此无需修改：
// Display whose turn it is and the winner function renderMessage() { if (winner === 'T') { message.innerhtml = 'Tie Game! Game Over!'; } else if (winner) { message.innerHTML = `Player ${MARK[winner]} Wins!`; } else { message.innerHTML = `Player ${MARK[turn]}'s Turn`; } }
总结与注意事项
通过引入filledFields计数器，我们能够精确地管理Tic-Tac-Toe游戏的平局检测逻辑。这种方法将平局判断的条件明确为“无获胜者”和“棋盘已满”，避免了在游戏进行中误判平局的问题。
关键要点：
- 状态管理： 确保filledFields作为游戏状态的一部分，并在init()中初始化，在handleClick()中更新。
- 逻辑顺序： 在getWinner()函数中，务必先检查获胜条件，再检查平局条件，最后才是游戏继续的条件。
- 避免冗余检查： 一旦找到赢家，立即返回；一旦判定平局，立即返回。避免不必要的后续计算。
- 代码清晰性： 保持函数职责单一，getWinner只负责判断游戏结果，handleClick负责处理玩家交互和状态更新。
这种优化方案不仅解决了Tic-Tac-Toe游戏中的平局检测难题，也为其他类似棋盘游戏的逻辑实现提供了宝贵的思路。