Cómo conseguir que los jugadores tomen turnos en el proyecto JavaScript (tic-tac-toe)

Estoy tratando de que los dos jugadores tomen turnos en mi proyecto tic-tac-toe. En mi playerContols Función He intentado poner a cada jugador en una variable de carcasa "current PLayer" que se apagará dependiendo de si un jugador ya fue pero se queda atascado en el jugador 2 y marca cada celda con O's. No estoy completamente seguro de lo que está mal.

mi código

const playgame = (() => {
  const playerOne = {
    Name: 'playerOne',
    Marking: 'X'
  };
  const playerTwo = {
    Name: 'PlayerTwo',
    Marking: 'O'
  };

  function playerControls(e) {
    let currentPlayer;
    currentPlayer = playerOne;
    e.target.textContent = currentPlayer.Marking;
    if (currentPlayer === playerOne) {
      currentPlayer = playerTwo;
      e.target.textContent = currentPlayer.Marking;
    } else {
      currentPlayer = playerOne;
      e.target.textContent = currentPlayer.Marking;
    }
  }

  return {
    playerControls
  }
})();
const gameBoard = (() => {
  const makeBoard = (rows, cols) => {
    const theBoard = document.getElementById("GameBoard");
    theBoard.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
    theBoard.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
    for (i = 0; i < (rows * cols); i++) {
      let gameDivs = document.createElement("div");
      gameDivs.addEventListener("click", playgame.playerControls)
      theBoard.appendChild(gameDivs).classList.add("newdivgrid");
    }
  };
  makeBoard(3, 3);
})();
#GameBoard {
  width: 600px;
  height: 350px;
  border: 1px solid darkblue;
  margin-left: 27%;
  text-align: center;
  font-size: 500%;
  font-family: cursive, sans-serif;
  display: grid;
}

.newdivgrid {
  border: 1px solid black;
  grid-row-gap: 50px;
}

.newdivgrid:hover {
  background-color: aqua;
}
html



  
  
  Tic-Tac-Toe game
  


Tic-Tac-Toe Project




  
Select Players

  

    
Player 1

    

      
      
    

  

  

    
Player 2

    

      
      
    

  














  
Results


  

    
Player 1 Results

    
  

  

    
Player 2 Results

Pregunta hecha hace 3 años, 5 meses, 0 días - Por syntaxsorcerer

3 Respuestas:

  • El problema es que tu currentPlayer declaración variable e inicialización necesita vivir afuera el playerControls función o si no lo estás restableciendo playerOne cada vez.

    let currentPlayer;
currentPlayer = playerOne;
    
function playerControls(e){...}

    Aquí está la solución en acción:

    const playgame = (()=> {
        const playerOne = {
        Name: 'playerOne',
        Marking: 'X'
    };
    const playerTwo = {
        Name: 'PlayerTwo',
        Marking: 'O'
    };
    
    let currentPlayer;
    currentPlayer = playerOne;
    
    function playerControls(e){
    e.target.textContent = currentPlayer.Marking;
    if(currentPlayer === playerOne)
    {
        currentPlayer = playerTwo;
        e.target.textContent = currentPlayer.Marking;
    }else{
        currentPlayer = playerOne;
        e.target.textContent = currentPlayer.Marking;
    }
    }
    
    
    return{playerControls}
})();
const gameBoard = (() => {
const makeBoard = (rows, cols) => {
    const theBoard = document.getElementById("GameBoard");
    theBoard.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
    theBoard.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
    for (i=0; i<(rows * cols); i++){
    let gameDivs = document.createElement("div");
    gameDivs.addEventListener("click", playgame.playerControls)
    theBoard.appendChild(gameDivs).classList.add("newdivgrid");
    }
};
makeBoard(3,3);
})();
    #GameBoard{
    width: 600px;
    height: 350px;
    border: 1px solid darkblue;
    margin-left: 27%; 
    text-align: center;
    font-size: 500%;
    font-family: cursive, sans-serif;
    display: grid;
    
}


.newdivgrid{
    border: 1px solid black;
    grid-row-gap: 50px;
    
}

.newdivgrid:hover{
    background-color: aqua;
}
    html


    
    
    Tic-Tac-Toe game
    


    Tic-Tac-Toe Project
    


    

    Select Players
    

    
    
    Player 1
    

    
    
    

    

    

    
    
    Player 2
    

    
    
    

    

    
    
    

    


    
    



    


    Results
    


    
    
    Player 1 Results
    
    

    

    
    
    Player 2 Results

    Respondida el Dec 18, 2020 a las 03:31 - por codealchemy

    Votos positivos: 0 | Votos negativos: 0

  • El problema en tu código radica en cómo estás manejando la variable currentPlayer dentro de la función playerControls. En cada llamada a la función, estás reasignando currentPlayer a playerOne, por lo que nunca cambia efectivamente de un jugador a otro.

    Para solucionar esto, puedes mover la variable currentPlayer fuera de la función playerControls y utilizarla para alternar entre los jugadores. Aquí te muestro cómo podrías modificar tu código:

    javascript
const playgame = (() => {
  const playerOne = {
    Name: 'playerOne',
    Marking: 'X'
  };
  const playerTwo = {
    Name: 'PlayerTwo',
    Marking: 'O'
  };

  let currentPlayer = playerOne;

  function playerControls(e) {
    if (e.target.textContent === "") {
      e.target.textContent = currentPlayer.Marking;
      currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
    }
  }

  return {
    playerControls
  }
})();

    En este código, he movido la declaración de currentPlayer fuera de la función playerControls y he actualizado la lógica dentro de la función para alternar entre playerOne y playerTwo de forma adecuada.

    Con estos cambios, cada vez que se haga clic en una celda del tablero, la función playerControls cambiará correctamente entre los jugadores. Espero que esta solución te ayude a lograr que los jugadores tomen turnos en tu juego tic-tac-toe. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 19, 2020 a las 03:30 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema con tu código es que siempre estableces currentPlayer en playerOne al comienzo de la función playerControls. Esto hace que el jugador 1 siempre vaya primero y el jugador 2 nunca tenga la oportunidad de jugar.

    Para solucionar este problema, debes alternar entre playerOne y playerTwo cada vez que se hace clic en una celda. Puedes hacer esto usando un operador ternario:

    js
function playerControls(e) {
  let currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
  e.target.textContent = currentPlayer.Marking;
}

    Esto alternará entre playerOne y playerTwo cada vez que se haga clic en una celda.

    Aquí está el código completo con la solución:

    ```js const playgame = (() => { const playerOne = { Name: 'playerOne', Marking: 'X' }; const playerTwo = { Name: 'PlayerTwo', Marking: 'O' };

    let currentPlayer = playerOne;

    function playerControls(e) { currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne; e.target.textContent = currentPlayer.Marking; }

    return { playerControls } })(); const gameBoard = (() => { const makeBoard = (rows, cols) => { const theBoard = document.getElementById("GameBoard"); theBoard.style.gridTemplateColumns = repeat(${cols}, 1fr); theBoard.style.gridTemplateRows = repeat(${rows}, 1fr); for (i = 0; i < (rows * cols); i++) { let gameDivs = document.createElement("div"); gameDivs.addEventListener("click", playgame.playerControls) theBoard.appendChild(gameDivs).classList.add("newdivgrid"); } }; makeBoard(3, 3); })(); ```

    Espero que esto ayude. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 19, 2020 a las 03:40 - por Gemini

    Votos positivos: 0 | Votos negativos: 0