0

He estado haciendo una mini aplicacion de piedra, papel o tijera que se divide en dos que se encuentran en dos archivos html (main.html y options.html). Las partes este proyecto son:

  • El "login", y
  • el "juego" en sí

Y yo tengo 2 archivos js los cuales son main.js y box.js conectados a dos documentos html distintos también. En el main.js tengo los objetos de jugador uno, jugador dos y computadora dependiendo de si el jugador uno quiere jugar contra otro jugador o contra la computadora.

Ahora lo que intento hacer es en una funcion llamada versusPlayer intento que el jugador 1 elija y después de que aprete alguna opcion (osea piedra papel o tijera), ponga que le toca a jugador 2 y que deje elijir al mismo tambien.

El problema es que no me esta leyendo el if statement que dice que si jugador 1 ya jugo o mejor dicho ya es turno de jugador 2. Basicamente el problema es que a la hora de probarlo y elegir piedra papel o tijera sigue estando en el turno de el jugador 1

"use strict";
//main.js
let playerOne= {
    name: "",
    turn: true,
    option: "",
    points: 0,
}

let playerTwo= {
    name:"" ,
    play: false, 
    turn: false,
    option: "",
    points: 0,
}

let computer= {
    name: "Computer",
    play: false,
    turn: false,
    option: "",
    points: 0,
}

//selecting DOM elements

//login page
const firstInput= document.getElementById("input");
const firstPlusButton= document.getElementById("plusButton");
const compButton= document.getElementById("computer");
const playerButton= document.getElementById("player");
const secondInput= document.getElementById("input-two");
const secondPlusButton= document.getElementById("plusButton-two");

function calling(){
    loginPlayerOne();
    loginPlayerTwo(); 
    loginComputer();
}

    
function loginPlayerOne(){
    firstPlusButton.addEventListener("click",()=>{
        let data= playerOne.name= firstInput.value;
        JSON.stringify(data);
        console.log(playerOne.name);
        console.log(playerOne);
        if(typeof playerOne.name==="string"){
            localStorage.setItem("playerOne",JSON.stringify(playerOne));
        };
    });


    document.addEventListener("keyup",(event)=>{
        if(event.keyCode===13){
            playerOne.name= firstInput.value;
            console.log(playerOne.name);
            if(typeof playerOne.name==="string"){
                localStorage.setItem("playerOne",JSON.stringify(playerOne));
            };
        }
    });
    
    
}

function loginPlayerTwo(){
    playerButton.addEventListener("click",()=>{ 
        secondPlusButton.addEventListener("click",()=>{
            playerTwo.name= secondInput.value;
            console.log(playerTwo.name); 
            console.log("Estas jugando contra un jugador");
            playerTwo.play=true;
            computer.play=false;
            console.log(playerTwo.play);
            console.log(computer.play);
            if(typeof playerTwo.name==="string"){
                localStorage.setItem("playerTwo",JSON.stringify(playerTwo));
            };
            versusPlayer();
        })


        document.addEventListener("keyup",(event)=>{
            if(event.keyCode===13){
                playerTwo.name= secondInput.value;
                console.log(playerTwo.name);
                console.log("Estas jugando contra un jugador");
                playerTwo.play=true;
                computer.play=false;
                console.log(playerTwo.play);
                console.log(computer.play);
                if(typeof playerTwo.name==="string"){
                    localStorage.setItem("playerTwo",JSON.stringify(playerTwo));
                }
                versusPlayer();
            }
        })

        
       
    })
}


function loginComputer(){
    compButton.addEventListener("click",()=>{
        console.log("Estas jugando contra la computadora");
        playerTwo.play= false;
        computer.play= true;
        console.log(playerTwo.play);
        console.log(computer.play);
        if(playerTwo.play===false){
        localStorage.setItem("computer",JSON.stringify(computer))   
        }
        versusComputer();
    
    })
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../style.css/style.css">
    <title>Rock Paper or Scissors</title>
</head>
<body onload="calling()">
    <div class="principalContainer" >
        <h1 class="title">Rock Paper or Scissors Game</h1>
        <div class="players">
            <div class="playerOne" id="playerOne"><p class="text-player">Put Your Name Player One</p>
                <input type="text" name="" id="input" placeholder="Put your name here"><i class="plusButton" id="plusButton"><p class="plus">+</p></i>
            </div>
            <div id="oponente" class="oponent">
                <a href="#oponente"><input type="button" id="computer" value=".VS Computer"></a><a href="#playertwo"><input type="button" id="player" value=" .VS Player"></a>
            </div>
            <div id="playertwo" class="playerTwo">
                <p class="text-player-two">Put Your Name Player Two</p>
                <input type="text" name="" id="input-two" placeholder="Put your name here"><i class="plusButton-two" id="plusButton-two"><p class="plus-two">+</p></i>
            </div>
        </div>    
        <div class="playLink">
            <a href="options.html" class="game">Let´s Play Folks!</a>
        </div>
    </div>
    <script defer src="../main.js/main.js"></script>
</body>
</html>

"use strict";

//getting objects
let playerOne= JSON.parse(localStorage.getItem("playerOne"));
let playerTwo= JSON.parse(localStorage.getItem("playerTwo"));
let computer= JSON.parse(localStorage.getItem("computer"));

//game DOM elements
const playerName= document.getElementById("playerPoints");
const points= document.getElementById("points");
const enemyName= document.getElementById("enemyPoints");
const turnText= document.getElementById("turnText");
const rock= document.getElementById("rock");
const paper= document.getElementById("paper");
const scissors= document.getElementById("scissors");
const winnerText= document.getElementById("winner");
const menu= document.getElementById("newGame");

versusPlayer();

function versusPlayer(){

    playerName.innerHTML= playerOne.name;
    enemyName.innerHTML= playerTwo.name;
    turnText.innerHTML= `Your Turn ${playerOne.name}`;    
        
    if(playerOne.turn===true){
        
        console.log("turno jugador1");

        rock.addEventListener("click",()=>{
            playerOne.option= "rock";
            playerOne.turn= false;
            playerTwo.turn=true;
            console.log(playerOne);
            console.log(playerOne.turn);
        });


        paper.addEventListener("click",()=>{
            playerOne.option= "paper";
            playerOne.turn= false;
            playerTwo.turn=true;
            console.log(playerOne);
            console.log(playerOne.turn);
        });

        scissors.addEventListener("click",()=>{
            playerOne.option= "scissors";
            playerOne.turn= false;
            playerTwo.turn=true;
            console.log(playerOne);
            console.log(playerOne.turn);
        });
    }

    if(playerTwo.turn===true || playerOne.turn===false){

        console.log("turno jugador2");

        turnText.innerHTML= `Your Turn ${playerTwo.name}`;

        rock.addEventListener("click",()=>{
            playerTwo.option= "rock";
            playerTwo.turn=false;
        });


        paper.addEventListener("click",()=>{
            playerTwo.option= "paper";
            playerTwo.turn= false;
        });

        scissors.addEventListener("click",()=>{
            playerTwo.option= "scissors";
            playerTwo.turn= false;
        });
    }

   

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../style.css/gameStyle.css">
    <title>Rock Paper or Scissors</title>
</head>
<body>
    <div class="container">
        <div class="scoreboard">
            <p class="points" id="points">0:0</p>
        </div>
        <div class="playerPoints" id="playerPoints">
            PlayerName
        </div>
        <div class="enemyPoints" id="enemyPoints">
            Computer
        </div>
        <div>
            <p class="turnText" id="turnText">
                Your turn Player 1</p>
        </div>
        
        <div class="options">
            <div class="rockContainer">
                <img src="../img/fist.png" alt="rock" class="rock" id="rock">
            </div>
            <div class="paperContainer">
                <img src="../img/hand.png" alt="paper" class="paper" id="paper">
            </div>
            <div class="scissorsContainer">
                <img src="../img/scissors.png" alt="scissors" class="scissors" id="scissors">
            </div>
        </div>
        <div class="alert">
            <p class="winner" id="winner">Paper cover Rock. You won player one!</p>
            <a href="main.html" class="newGame" id="newGame">Lets go to the menu!</a>
        </div>
        <div class="seeStats">
            <a href="#stats" class="statsButton">See Stadistics</a>
        </div>
        <div id="stats" class="modal" onload="stadistics()">
            <a href="#"><img src="../img/x-mark.png" alt="exit" class="exit"></a>
            <div class="stats">
                <img src="../img/refresh.png" alt="refresh" class="refresh" id="refresh">
                <p class="statsTitle">Stadistics</p>
                <ul class="gameList" id="gameList">
                    <!--<li>
                        <p class="player">Player1</p>
                        <p class="finalScore">0:3</p>
                        <p class="secondPlayer">Player2</p>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>
    <script  src="../main.js/box.js" ></script>
</body>
</html>

3
  • ¿Cuál es tu error en específico? Commented el 9 ene. 2020 a las 21:44
  • Si bien estoy entendiendo que el turno de jugador 2 está en default, no entiendo cuál es la consulta especifica.
    – nelruk
    Commented el 9 ene. 2020 a las 21:55
  • oh disculpen si no me explicado bien el problema es que a la hora de probarlo y elegir piedra papel o tijera sigue estando en el turno de el jugador 1
    – FERRE FACU
    Commented el 10 ene. 2020 a las 15:38

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.