JavaScript实现双人井字棋时乘-1切换玩家回合失效如何解决

现有代码核心问题 #

• 你当前的handleClick函数里没有执行回合标识切换的逻辑，每次落子后没有修改whoseTurn的值，所以一直停留在初始的1（X）回合，这是切换失效的核心原因
• render函数逻辑倒置，正确的render作用是把内存中board数组的状态同步到页面DOM，你现在是反过来读DOM的内容去覆盖board数组，会导致状态完全混乱
• 没有做已落子格子的重复点击校验，用户点击已经落子的格子也会触发异常
• 回合状态提示时机错误：你在X落子后还是显示X的回合，应该在切换回合后更新提示文案

修正后完整代码 #

/*---------------------------- Variables (state) ----------------------------*/
let whoseTurn, winner, board

/*------------------------ Cached Element References ------------------------*/
const squares = document.querySelectorAll(".square")
const gameStatus = document.querySelector("#message")

/*----------------------------- Event Listeners -----------------------------*/
for(let i = 0; i < squares.length; i++){
  squares[i].addEventListener("click", handleClick)
}

/*-------------------------------- Functions --------------------------------*/
init()

function handleClick(event) {
  const sqId = Number(event.target.id)
  // 拦截已落子的格子、游戏已结束的场景
  if (board[sqId] !== "" || winner) return

  // 落子逻辑
  if (whoseTurn === 1){
    event.target.innerText = "X"
    board[sqId] = 1
  } else {
    event.target.innerText = "O"
    board[sqId] = -1
  }

  // 核心：执行你原本设计的乘-1切换回合逻辑
  whoseTurn *= -1
  // 更新回合提示文案
  gameStatus.innerText = whoseTurn === 1 ? "It's Player X's turn" : "It's Player O's turn"

  // 此处可自行补充胜负、平局判定逻辑
}

function init() {
  whoseTurn = 1
  winner = null
  board = ["", "", "", "", "", "", "", "", ""]
  render()
}

function render() {
  // 用board内存状态同步页面显示
  for (let i = 0; i < board.length; i++) {
    squares[i].innerText = board[i] === 1 ? "X" : board[i] === -1 ? "O" : ""
  }
  // 初始化回合提示
  gameStatus.innerText = "It's Player X's turn"
}

逻辑说明 #

你原本设计的用whoseTurn *= -1切换回合的思路是完全可行的，初始值为1对应X回合，乘-1后变成-1对应O回合，再次合法落子后又变回1，循环往复即可实现正常的回合切换。

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