开发井字棋游戏时无法实现玩家回合交替功能问题求助
问题核心原因
- 回合状态未持久化:
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
相关产品推荐
相关产品推荐

