You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

开发井字棋游戏时无法实现玩家回合交替功能问题求助

问题核心原因
  • 回合状态未持久化:turn变量定义在markBoard函数内部,每次调用都会被重置为true,且return语句后的变量赋值代码属于死代码永远不会执行,回合状态从未发生切换。
  • 事件绑定逻辑错误:Player.boardMove方法每次调用都会给所有棋盘格子新增点击事件监听,初始化时仅执行了一次markBoard,所有格子都绑定了填充X的点击事件,永远不会触发O的填充逻辑。如果后续重复调用boardMove切换回合,也只会给格子叠加多个点击事件,点击时会同时触发多个回调,逻辑完全混乱。
  • 交替逻辑设计错误:回合交替应该在每次格子点击完成后触发,而非提前绑定不同玩家的点击事件。
修正方案
//Tic-Tac-Toe board pieces and DOM elements
let ticTacToeBoard = (function() {
  let topLeft = document.querySelector('#top-left')
  let topMid = document.querySelector('#top-mid')
  let topRight = document.querySelector('#top-right')
  let midLeft = document.querySelector('#mid-left')
  let midMid = document.querySelector('#mid-mid')
  let midRight = document.querySelector('#mid-right')
  let botLeft = document.querySelector('#bot-left')
  let botMid = document.querySelector('#bot-mid')
  let botRight = document.querySelector('#bot-right')
  let gameBoard = []


  let gridSquares = () => {
    gameBoard = [topLeft, topMid, topRight,
      midLeft, midMid, midRight,
      botLeft, botMid, botRight
    ]
    for (let square of gameBoard) {
      square.textContent = ''
      // 重置格子点击状态标记,避免重复点击
      square.dataset.clicked = 'false'
    }
  }

  gridSquares()

  return {
    gridSquares,
    gameBoard
  }
})()
//Player factory function
const Player = function(name, move, marker) {
  return {
    name,
    move,
    marker
  }
}
//Logic that creates player moves for both players
let playerMoves = (function() {
  // 回合状态提到外层持久化存储
  let turn = true;
  const playerOne = Player('player-one', 1, 'X')
  const playerTwo = Player('player-two', 2, 'O')

  // 全局仅绑定一次点击事件
  function initEvent() {
    for (let place of ticTacToeBoard.gameBoard) {
      place.addEventListener('click', function(e) {
        // 已点击的格子不允许重复操作
        if (e.target.dataset.clicked === 'true') return
        e.target.dataset.clicked = 'true'
        // 根据当前回合填充对应标记
        e.target.textContent = turn ? playerOne.marker : playerTwo.marker
        // 点击完成后切换回合
        turn = !turn
      })
    }
  }

  initEvent()


  return {
    playerOne,
    playerTwo
  }

})()


let game = (function() {})()

内容的提问来源于stack exchange,提问作者Albert Yoo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 16:24:03