0
229
VistasPiedra, papel, tijera: ¿vaciar las variables playerOne y playerTwo después de las llamadas a funciones usando un EventListener (clic)?
Meta
Mi objetivo es completar un juego de piedra, papel o tijera. Necesito comparar la entrada de dos jugadores que están detrás de la misma computadora, un juego simple. Los dos jugadores dan su entrada a través de los botones en una página HTML (piedra, papel o tijera) que tienen un EventListener gracias a un archivo JavaScript que hice.
Problema
Actualización: después de los comentarios de otros, declaré dejar variables fuera de la función. Esto me da un nuevo problema: termino con dos variables vacías. ¿Alguien sabe cómo soluciono este problema?
const options = document.querySelectorAll(".options"); var timesClicked = 0; console.log(options); let playerOneInput = ""; let playerTwoInput = ""; options.forEach((option) => { option.addEventListener("click", function () { timesClicked++; console.log(timesClicked); if (timesClicked == 1) { let playerOneInput = this.textContent; document.getElementById("player").innerHTML = "Player 2, choose your option!" } else { let playerTwoInput = this.textContent; }; console.log(playerOneInput); console.log(playerTwoInput); if (timesClicked == 2) { compareInputs(playerOneInput, playerTwoInput); } }); }); <h1 id='player'>Player 1, choose your option!</h1> <button class="options">Rock</button> <button class="options">Paper</button> <button class="options">Scissors</button> <h1> <div id='result'><div> </h1>Excluí el resto de mi código JS, que es la función compareInputs y la impresión de resultados. Por favor, hágamelo saber si le gustaría verlo. ¡Gracias por adelantado!
2 Respuestas
Responde la pregunta0
Como se explica aquí , es mejor que vayas con un juego de índices.
- Usa una variable para contar el número de vueltas
let turns - Usa
turns % 2para detectar qué jugador jugó - Use botones con
value="N"dondeNtambién son índices 0, 1, 2 - La lógica ganadora :
result = PL1 === PL2 ? 2 : (PL2 + 1) % 3 === PL1 ? 0 : 1; - ¡Muestre el nuevo título solo una vez que incremente los
turns += 1y esa parte de la lógica debería ir en último lugar!
const ELS_options = document.querySelectorAll(".options"); const EL_title = document.querySelector("#title"); const EL_result = document.querySelector("#result"); let turns = 0; // 0 to N const cards = ["Rock", "Paper", "Scissors"]; // Values: 0,1,2 const names = ["One", "Two"]; const resultTexts = [ `Player ${names[0]} won!`, `Player ${names[1]} won!`, `It's a draw!` ]; const moves = [[], []]; // 0 is for PL1, 1 is for PL2 const showResult = () => { const player = turns % 2; // 0,1,0,1,... if (player === 0) return EL_result.textContent = ""; // Else.... const round = Math.floor(turns / 2); // Collect both player moves const PL1 = moves[0][round]; const PL2 = moves[1][round]; // Get the result: //stackoverflow.com/a/53983473/383904 const result = PL1 === PL2 ? 2 : (PL2 + 1) % 3 === PL1 ? 0 : 1; EL_result.innerHTML = ` <div>Player ${names[0]} played: ${cards[PL1]}</div> <div>Player ${names[1]} played: ${cards[PL2]}</div> <h1>${resultTexts[result]}</h1> `; }; const showTitle = () => { const player = turns % 2; // 0,1,0,1,... EL_title.textContent = `Player ${names[player]}, choose your move!`; }; const onSelect = (evt) => { const player = turns % 2; // 0,1,0,1,... const move = parseInt(evt.currentTarget.value, 10); // 0,1,2 moves[player].push(move); // Store the move showResult(); turns += 1; // Advance turn showTitle(); }; // INIT APP: ELS_options.forEach(EL => EL.addEventListener("click", onSelect)); showTitle(); <h2 id='title'></h2> <button value="0" class="options" type="button">Rock</button> <button value="1" class="options" type="button">Paper</button> <button value="2" class="options" type="button">Scissors</button> <div id='result'></div>0
La variable no está definida porque la creas dentro de una función. Intenta declarar la variable fuera de la función y cambiar esta variable global dentro de la función
let inputPlayer1 = ""; function onInput() { inputPlayer1 = "rock"; // the selected type }