优化J*aScript井字棋游戏：实现平局检测的完整指南

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

优化J*aScript井字棋游戏：实现平局检测的完整指南

2025-11-08

浏览次数：次

返回列表

优化JavaScript井字棋游戏：实现平局检测的完整指南

本文详细介绍了如何在j*ascript实现的井字棋游戏中准确检测平局。通过分析现有赢家判断逻辑的局限性，我们提出了一种引入步数计数器（`filledfields`）的解决方案。该方法确保只有在所有棋盘格子被填满且没有玩家获胜的情况下，才判定为平局，从而避免了游戏过早结束的问题，提升了游戏状态管理的准确性和用户体验。

井字棋游戏状态管理与平局检测挑战

在开发井字棋（Tic-Tac-Toe）这类回合制游戏时，核心挑战之一是准确管理游戏状态，包括判断当前轮到哪位玩家、是否有玩家获胜，以及最重要的——如何判定平局。当所有格子都被填满，但没有任何玩家满足获胜条件时，游戏应宣告平局。然而，不正确的逻辑实现可能导致游戏过早结束，或者根本无法检测到平局。

原始代码中，已经成功实现了玩家获胜的判断逻辑，但平局检测存在问题。尝试在 getWinner() 函数中直接添加 return 'T'; 会导致游戏在第一步后就判定为平局，这是因为该判断语句执行得过早，没有考虑到游戏尚未结束的情况。

理解现有赢家判断逻辑

在深入探讨平局检测之前，我们先回顾一下现有的赢家判断逻辑。getWinner() 函数通过遍历预定义的获胜组合（COMBOS），检查是否有三个连续的相同标记。

function getWinner() {
  for (let i = 0; i < COMBOS.length; i++) {
    // 检查每个获胜组合
    // board[COMBOS[i][0]] + board[COMBOS[i][1]] + board[COMBOS[i][2]] 等于 3 或 -3 表示有玩家获胜
    if (Math.abs(board[COMBOS[i][0]] + board[COMBOS[i][1]] + board[COMBOS[i][2]]) === 3) {
      return board[COMBOS[i][0]]; // 返回获胜玩家的标记 (1 或 -1)
    }
    // 原始代码中的 board.includes(null) 是不准确的，因为空位用 0 表示
    // else if (board.includes(null)) {
    //   return null; // 游戏尚未结束
    // }
  }
  // 在这里直接 return 'T' 会导致问题
  // return 'T';
}

这里需要注意的是，原始代码中 board.includes(null) 的判断是无效的，因为游戏板（board）的空位是用 0 来表示的，而不是 null。正确的做法是，在遍历完所有获胜组合后，如果没有发现赢家，再进一步判断是否为平局。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

解决方案：引入步数计数器

为了准确检测平局，我们需要知道棋盘上已经被填入了多少个格子。一个简单而有效的解决方案是引入一个名为 filledFields 的计数器。

声明状态变量： 在 state variables 部分添加 filledFields 变量，并初始化为 0。

/*----- 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; // 新增：记录已填充的格子数量

初始化 filledFields： 在 init() 函数中，每次游戏开始或重置时，将 filledFields 重置为 0。

//Initializes state and calls render()
function init() {
  board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  turn = 1;
  winner = null;
  filledFields = 0; // 初始化 filledFields
  render();
}

更新 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();
}

修改 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() {
  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]]; // 有赢家
    }
  }
  // 如果循环结束，意味着没有玩家获胜
  // 此时检查是否所有格子都已填满
  if (filledFields >= 9) {
    return 'T'; // 平局
  }
  return null; // 游戏仍在进行中，没有赢家也没有平局
}

完整代码示例（关键部分）

以下是修改后的关键J*aScript代码片段，展示了如何集成 filledFields 计数器来实现平局检测。

/*----- constants -----*/
const COLORS = { '0': 'white', '1': 'pink', '-1': 'lightgreen' };
const MARK = { '0': '', '1': 'X', '-1': 'O' };
const COMBOS = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8],
  [6, 4, 2], [0, 4, 8], [0, 3, 6],
  [1, 4, 7], [2, 5, 8]
];

/*----- 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; // 新增：记录已填充的格子数量

/*----- cached elements  -----*/
const message = document.querySelector('h1');
const resetButton = document.querySelector('button');

/*----- event listeners -----*/
document.getElementById('board').addEventListener('click', handleClick);
resetButton.addEventListener('click', init);

/*----- 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; // 初始化 filledFields
  render();
}

// Visualizes all state in the DOM
function render() {
  renderBoard();
  renderMessage();
}

// Iterate over the squares in the board
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];
    squareEl.style.display = 'flex';
    squareEl.style.justifyContent = 'center';
    squareEl.style.alignItems = 'center';
    squareEl.style.fontSize = '19vmin';
  });
}

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

// Get index of the clicked box
function handleClick(event) {
  const boxIdx = parseInt(event.target.id.replace('box-', ''));
  if (isNaN(boxIdx) || board[boxIdx] || winner)
    return;

  board[boxIdx] = turn;
  filledFields++; // 每次落子后增加计数器

  turn *= -1;
  winner = getWinner();
  render();
}

// Check for a winner or tie
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]]; // 有赢家
    }
  }
  // 如果没有赢家，检查是否所有格子都已填满
  if (filledFields >= 9) { // 棋盘共有9个格子
    return 'T'; // 平局
  }
  return null; // 游戏仍在进行中
}

注意事项

变量作用域： 确保 filledFields 被声明为一个全局状态变量（或通过其他方式在 init 和 handleClick 之间共享），以便所有相关函数都能访问和修改它。
初始化与重置： 在 init() 函数中正确初始化 filledFields 为 0 至关重要，以确保每次新游戏开始时计数器都是准确的。
判断顺序： 在 getWinner() 函数中，必须优先判断是否有玩家获胜，只有在没有赢家的情况下，才去判断是否达到平局条件。这种顺序可以确保即使在最后一步棋同时满足获胜和平局条件（理论上不可能，因为获胜会先被检测到），也能正确判定为获胜。
棋盘大小： 示例中的 filledFields >= 9 是针对 3x3 棋盘的。如果棋盘大小发生变化，需要相应调整这个阈值。

总结

通过引入一个简单的 filledFields 计数器，我们成功解决了井字棋游戏中平局检测的难题。这种方法确保了游戏状态判断的准确性，避免了因逻辑错误导致的游戏过早结束或无法判定平局的问题。这种对游戏状态的精细化管理是开发健壮、用户友好型游戏的关键一环。在未来的游戏开发中，类似的状态计数器模式可以应用于多种场景，以实现更复杂的游戏逻辑。

以上就是优化J*aScript井字棋游戏：实现平局检测的完整指南的详细内容，更多请关注其它相关文章！

# 时计 # seo顾问怎么运营 # 网站建设所属税目 # 网站建设dw实训总结 # 宁夏网站推广徽hyhyk1 # 品牌推广样机网站 # 吉安网站开发建设 # 专业的昆明网站建设 # 广西网站建设厂家排名 # 网站建设的公司有哪些 # 如何搜索全站关键词排名 # 如何实现 # 如何使用 # 都已 # javascript # 自定义 # 如果没有 # 判断是否 # 遍历 # 有哪些 # 回合制 # 作用域 # 游戏开发 # win # switch # html # java