Me gustaría recibir ayuda con la siguiente cuestión, me pidieron que adaptara un juego de piedra papel o tijeras para dos jugadores y la verdad no sé por dónde empezar, dejare el html, css y el javascript del proyecto por si a alguien le gustaría adaptarlo o explicarme que debo hacer para adaptarlo para los dos jugadores. si alguien puede hacerlo se lo agradecería muchísimo, el juego funciona bien jugando contra la maquina pero debido a mis pocos conocimientos en el área no he podido adaptarlo para que jueguen dos personas. Creo que eso sería todo estaré pendiente por si necesitan que les proporcione algo más, gracias por tomarse el tiempo para leer esta publicación que tengan un feliz resto de día, tardes o noches.
const ROCK = "rock";
const PAPER = "paper";
const SCISSORS = "scissors";
const TIE = 0;
const WIN = 1;
const LOST = 2;
let isPlaying = false;
const rockBtn = document.getElementById("rock");
const paperBtn = document.getElementById("paper");
const scissorsBtn = document.getElementById("scissors");
const resultText = document.getElementById("start-text");
const userImg = document.getElementById("user-img");
const machineImg = document.getElementById("machine-img");
rockBtn.addEventListener("click", () => {
play(ROCK);
});
paperBtn.addEventListener("click", () => {
play(PAPER);
});
scissorsBtn.addEventListener("click", () => {
play(SCISSORS);
});
function play(userOption) {
if(isPlaying) return;
isPlaying = true;
userImg.src = "img/" + userOption + ".svg";
resultText.innerHTML = "Escogiendo!";
const interval = setInterval(function(){
const machineOption = calcMachineOption();
machineImg.src = "img/" + machineOption + ".svg";
}, 200);
setTimeout(function () {
clearInterval(interval);
const machineOption = calcMachineOption();
const result = calcResult(userOption, machineOption);
machineImg.src = "img/" + machineOption + ".svg";
switch (result) {
case TIE:
resultText.innerHTML = "Has Empatado!";
break;
case WIN:
resultText.innerHTML = "Ganaste!";
break;
case LOST:
resultText.innerHTML = "Perdiste!";
break;
}
isPlaying = false;
}, 2000);
}
function calcMachineOption() {
const number = Math.floor(Math.random() * 3);
switch (number) {
case 0:
return ROCK;
case 1:
return PAPER;
case 2:
return SCISSORS;
}
}
function calcResult(userOption, machineOption) {
if (userOption === machineOption) {
return TIE;
} else if (userOption === ROCK) {
if (machineOption === PAPER) return LOST;
if (machineOption === SCISSORS) return WIN;
} else if (userOption === PAPER) {
if (machineOption === SCISSORS) return LOST;
if (machineOption === ROCK) return WIN;
} else if (userOption === SCISSORS) {
if (machineOption === ROCK) return LOST;
if (machineOption === PAPER) return WIN;
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
footer{
text-align: center;
padding: 10px;
}
footer a{
color: black;
text-decoration: none;
}
button{
background-color: #ffe97d;
border: 4px solid black;
margin: 5px;
}
.container{
max-width: 420px;
height: 100vh;
max-height: 745px;
margin: 0 auto;
background-color: #ffb74d;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 5px solid black;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
h1{
font-size: 35px;
text-align: center;
padding: 20px;
}
#result{
text-align: center;
}
#result img{
width: 40%;
}
#start-text{
font-size: 36px;
padding: 20px;
}
#group-btn{
display: flex;
width: 100%;
}
#group-btn > button > img{
width: 100%;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Piedra, Papel O Tijeras | Blader</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="container">
<h1>Piedra, Papel O Tijeras</h1>
<div id="result">
<img id="machine-img" src="img/rock.svg">
<div id="start-text">
Escoje una opcion
</div>
<img id="user-img" src="img/rock.svg">
</div>
<div id="group-btn">
<button id="rock" type="button">
<img src="img/rock.svg"/>
</button>
<button id="paper" type="button">
<img src="img/paper.svg"/>
</button>
<button id="scissors" type="button">
<img src="img/scissors.svg"/>
</button>
</div>
<footer>Creado por <a target="_blank" href="http://www.kikopalomares.com/">Cristian Extiven "Blader"</a></footer>
</div>
<script src="app.js"></script>
</body>
</html>