samedi 28 août 2021

Stuck On Adding Ability to Switch Player Turns in Tic-Tac-Toe Game

Trying to build the tic-tac-toe game and stuck on the part with the alternation of players. The player marks ('X' or 'O') are defined in the factory function that creates the players. I am able to get it to where the squares on the gameBoard can populate the appropriate mark, but I can't seem to figure out why it will not alternate between player 1 and player 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() {})()

Aucun commentaire:

Enregistrer un commentaire