时间戳

首页 > 解决方案 > 坚持在井字游戏中添加切换玩家回合的能力

javascript - 坚持在井字游戏中添加切换玩家回合的能力

问题描述

试图建立井字游戏并坚持玩家交替的部分。播放器标记（“X”或“O”）在创建播放器的工厂函数中定义。我能够将它放到游戏板上的方块可以填充适当标记的位置，但我似乎无法弄清楚为什么它不会在玩家 1 和玩家 2 之间交替。

//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
    ]
    // let gridSquares = cacheDom
    // // let gridSquares = document.querySelectorAll('.game-square')
    // let squares = [...gridSquares]
    for (let square of gameBoard) {
      square.textContent = ''
    }
  }

  gridSquares()

  return {
    gridSquares,
    gameBoard
  }
})()
//Player factory function
const Player = function(name, move, marker) {

  const boardMove = () => {
    for (let place of ticTacToeBoard.gameBoard) {
      place.addEventListener('click', function(e) {
        e.target.textContent = marker
      })
    }
  }
  return {
    name,
    move,
    boardMove,
    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 that alternates players turns
  function markBoard() {
    let turn = true;
    if (turn === true) {
      return playerOne.boardMove()
      turn = false;
    } else if (turn === false) {
      return playerTwo.boardMove()
      turn = true;
    }
  }

  markBoard()


  return {
    playerOne,
    playerTwo,
    markBoard
  }

})()


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

标签： javascriptif-statementconditional-statements

解决方案

你的方法有一些问题markBoard，首先每次你调用你设置的函数turn，true这意味着玩家 2 永远不会得到轮到，所以你只需要在函数之外启动一次变量，其次你从在将变量设置为相反之前的函数。所以如果你把它改成类似这样的东西，它应该可以工作：

let turn = true;

function markBoard() {
  if (turn) {
    turn = false;
    return playerOne.boardMove()
  } else {
    turn = true;
    return playerTwo.boardMove()
  }
}

推荐阅读