如何用JavaScript实现聊天机器人井字棋(Tic Tac Toe)功能及修复重复输出bug

问题根因 #

• 逻辑耦合：你将游戏初始化、玩家落子两个完全独立的流程放在了同一个判断分支，共用相同的消息上下文
• 上下文识别错误：用于判断的newChat大概率指向整个聊天区域的全部内容，而非用户最新发送的单条消息。输出初始棋盘后，整个聊天内容同时包含ttt和1-9所有数字，会再次触发判断逻辑，匹配到数字1的分支输出第二个棋盘
• 缺少状态管理：没有变量标记井字棋的运行状态，每次消息触发都会重复执行初始化逻辑

修复方案 #

1. 首先新增全局变量存储游戏运行状态

let tttGameRunning = false;

2. 拆分初始化和落子逻辑，调整判断规则，确保仅响应用户最新发送的单条消息，过滤机器人自身发送的消息

// 提前过滤：仅处理用户发送的单条消息，跳过机器人产生的消息
const userInput = newChat.textContent.toLowerCase().trim();

// 仅当用户单独输入ttt时初始化游戏
if (userInput === "ttt") {
  createBotChat(` 1  |  2  |  3 
 --------
 4  |  5  |  6 
--------
 7  |  8  |  9 `);
  tttGameRunning = true;
  // 初始化完成直接返回，不执行后续落子逻辑
  return;
}
// 仅游戏启动后才响应落子请求
else if (tttGameRunning && ["1","2","3","4","5","6","7","8","9"].includes(userInput)) {
  const posIndex = Number(userInput) - 1;
  const board = ["1","2","3","4","5","6","7","8","9"];
  board[posIndex] = "X";
  const renderBoard = ` ${board[0]}  |  ${board[1]}  |  ${board[2]} 
 --------
 ${board[3]}  |  ${board[4]}  |  ${board[5]} 
--------
 ${board[6]}  |  ${board[7]}  |  ${board[8]} `;
  createBotChat(renderBoard);
  // 可补充胜负判断、游戏结束后重置tttGameRunning为false的逻辑
}

内容的提问来源于stack exchange，提问作者NathanTolley