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>