优化井字棋游戏：正确实现平局判断逻辑-js教程-PHP中文网

优化井字棋游戏：正确实现平局判断逻辑

花韻仙語

发布： 2025-11-08 21:33:21

原创

928人浏览过

优化井字棋游戏：正确实现平局判断逻辑

本教程旨在解决井字棋（tic-tac-toe）游戏中平局判断逻辑不准确的问题。通过分析现有代码中的常见陷阱，特别是对棋盘状态的错误检查，我们将展示如何正确地在没有胜者且所有格子均被填充时宣布平局。文章将提供详细的代码示例和解释，帮助开发者构建一个功能完善的井字棋游戏。

井字棋游戏状态管理概述

在开发井字棋游戏时，核心在于准确地管理游戏状态。我们的游戏通过以下几个关键变量来维护其状态：

board: 一个包含9个元素的数组，代表9个棋盘格子。初始时所有元素为0（表示空），玩家1下棋后为1（代表'X'），玩家2下棋后为-1（代表'O'）。
turn: 当前轮到哪个玩家下棋，值为1或-1。
winner: 游戏结果，null表示游戏进行中，1或-1表示对应玩家获胜，'T'表示平局。
COLORS和MARK: 常量对象，用于映射棋盘格子的背景颜色和显示标记（'X'或'O'）。
COMBOS: 包含所有获胜组合的数组，用于判断是否有玩家获胜。

游戏的逻辑流程通常是：玩家点击格子 (handleClick) -> 更新棋盘状态 (board) -> 切换玩家 (turn) -> 检查胜者或平局 (getWinner) -> 渲染游戏界面 (render)。

现有平局判断逻辑的问题分析

在原始代码中，getWinner函数负责判断游戏结果。它首先遍历COMBOS数组来检查是否有玩家达成胜利条件。如果找到胜利者，则立即返回胜者的标识符（1或-1）。

然而，问题出在平局的判断逻辑上：

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)) { // 错误的平局或游戏进行中判断
      return null;
    }
  }
  // return 'T'; // 尝试在此处返回'T'会导致游戏过早结束
}

登录后复制

board.includes(null)的误用: 我们的board数组使用0来表示空闲格子，而不是null。因此，board.includes(null)永远不会为真，这导致游戏在没有胜利者的情况下，无法正确判断是继续进行还是平局。
return 'T'的位置问题: 如果简单地将return 'T'放在for循环的外部、getWinner函数的末尾，那么在每次调用getWinner（即每次玩家落子后）时，只要没有立即检测到胜利者，函数就会执行到最后并返回'T'，从而导致游戏在第一步后就宣布平局。

正确的平局判断逻辑必须满足两个条件：没有玩家获胜 且 所有格子都已被填充。

正确的平局判断策略

为了准确地判断平局，我们需要调整getWinner函数的逻辑顺序。正确的策略应该是：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

优先检查获胜条件: 遍历所有获胜组合，如果任何一个玩家满足了获胜条件，则立即返回该玩家的标识符。
在没有获胜者的情况下，检查棋盘是否已满: 如果遍历完所有获胜组合后仍未发现胜利者，此时才需要检查棋盘上是否还有空闲的格子。
- 如果棋盘上没有空闲格子（即board数组中不再包含0），则说明所有格子都已被填充，且没有胜利者，此时游戏为平局，应返回'T'。
- 如果棋盘上仍有空闲格子（即board数组中包含0），则说明游戏仍在进行中，应返回null。

代码实现

根据上述策略，我们对getWinner函数进行如下修改：

function getWinner() {
  // 1. 检查获胜条件
  for (let i = 0; i < COMBOS.length; i++) {
    const [a, b, c] = COMBOS[i]; // 解构获胜组合的索引
    // 检查当前组合的三个格子是否都被同一个玩家占据，并且这些格子不为空
    if (board[a] !== 0 && board[a] === board[b] && board[b] === board[c]) {
      return board[a]; // 返回获胜玩家的标识符
    }
  }

  // 2. 如果没有获胜者，则检查是否平局
  // 平局的条件是：没有获胜者 AND 棋盘上所有格子都已填充（即不再包含0）
  if (!board.includes(0)) {
    return 'T'; // 返回平局标识符
  }

  // 3. 如果既没有获胜者，也不是平局，则游戏仍在进行中
  return null;
}

登录后复制

代码解释：

获胜条件检查: board[a] !== 0确保了获胜的三个格子不是空的。然后检查这三个格子是否由同一个玩家占据。
平局条件检查: 在for循环结束后，如果仍然没有返回胜利者，我们使用!board.includes(0)来判断棋盘是否已满。board.includes(0)会检查数组中是否存在值为0的元素，如果不存在，则表示所有格子都已被填充。
游戏进行中: 如果上述两个条件都不满足，说明游戏还在进行中，此时返回null。

整合到现有游戏逻辑

将修改后的getWinner函数替换掉原始代码中的版本即可。handleClick函数在每次点击后都会调用getWinner并更新winner状态，render函数则会根据winner的值来显示相应的消息。

// ... (其他常量和状态变量保持不变) ...

/*----- functions -----*/
init();

function init() {
  board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  turn = 1;
  winner = null;
  render();
}

function render() {
  renderBoard();
  renderMessage();
}

function renderBoard() {
  board.forEach(function(boardArr, boardIdx) {
    const squareId = `box-${boardIdx}`;
    const squareEl = document.getElementById(squareId);
    squareEl.style.backgroundColor = COLORS[boardArr];
    squareEl.innerHTML = MARK[boardArr];
    // ... (其他样式保持不变) ...
  });
}

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`;
  }
}

function handleClick(event) {
  const boxIdx = parseInt(event.target.id.replace('box-', ''));
  if (isNaN(boxIdx) || board[boxIdx] !== 0 || winner) // 注意这里是 board[boxIdx] !== 0
    return;
  board[boxIdx] = turn;
  turn *= -1;
  winner = getWinner(); // 调用更新后的getWinner
  render();
}

// 替换为上面提供的修改后的 getWinner 函数
function getWinner() {
  for (let i = 0; i < COMBOS.length; i++) {
    const [a, b, c] = COMBOS[i];
    if (board[a] !== 0 && board[a] === board[b] && board[b] === board[c]) {
      return board[a];
    }
  }

  if (!board.includes(0)) {
    return 'T';
  }

  return null;
}

登录后复制