Tic-Tac-Toe 游戏中的平局检测机制优化-js教程-PHP中文网

Tic-Tac-Toe 游戏中的平局检测机制优化

心靈之曲

发布： 2025-11-08 23:20:01

原创

856人浏览过

tic-tac-toe 游戏中的平局检测机制优化

本教程详细探讨了在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`;
  }
}

登录后复制