Estoy tratando de averiguar cómo puedo actualizar el valor del jugador para mi juego Rock Scissor Paper. Tengo una función que registra un clic en un botón y luego debería actualizar el valor del jugador en consecuencia (1,2 o tres, según el botón en el que se hizo clic). El problema es que, cuando llamo a la función, playerValue sigue siendo 0 y no sé qué debo cambiar para solucionarlo. playerValue en sí mismo se define al principio de mi archivo. Comienza como 0.
Aquí está mi código JavaScript (o al menos la parte relevante):
//register button click and: function player_choose_value(){ //check which button has been clicked -> rock 1, scissor 2 or paper 3 btnRock.addEventListener("click", () =>{ playerValue = 1; }); btnScissor.addEventListener("click", () =>{ playerValue = 2; }); btnPaper.addEventListener("click", () =>{ playerValue = 3; }); }Aquí es donde se debe usar el valor del jugador. El playerValue siempre es 0. Creo que se debe a que la función player_choose_value() no espera a que ocurra el evento de clic. Entonces, la función se ejecuta pero el usuario no tiene la oportunidad de hacer clic en un botón, por lo que permanece en 0:
function play_round(){ let computerValue = computer_choose_value(); player_choose_value();//is always zero console.log(playerValue); won_tie_lost(computerValue, playerValue); }Me preguntaba cómo podría agregar una funcionalidad de "esperar a que se haga clic en uno de los tres botones".
En su caso, player_choose_value no espera hasta que el jugador haya elegido un valor.
Probablemente podría hacer esto usando async await/promises:
function player_choose_value(){ return new Promise(resolve => { bntRock.onclick = () => resolve(1) btnScissor.onclick = () => resolve(2) btnPaper.onclick = () => resolve(3) }) } async function play_round(){ let computerValue = computer_choose_value(); const playerValue = await player_choose_value(); console.log(playerValue); won_tie_lost(computerValue, playerValue); } ;(async function main() { while (true) { // Keep repeating the game await play_round() } })()Usa la promesa.
function player_choose_value() { return new Promise((resolve, reject) => { //check which button has been clicked -> rock 1, scissor 2 or paper 3 document.querySelector('#btn1').addEventListener("click", () => { resolve(1); }); document.querySelector('#btn2').addEventListener("click", () => { resolve(2); }); document.querySelector('#btn3').addEventListener("click", () => { resolve(3); }); }); } player_choose_value().then( play_value => { alert(play_value); // won_tie_lost... // other code 2... } ); // other code 1... <button id='btn1'>btn1</button> <button id='btn2'>btn2</button> <button id='btn3'>btn3</button> player_choose_value será llamado primero. Devuelve una promesa que está pending .
El motor continuará ejecutando other code 1 y el código en then(play_value => { block no se ejecutará hasta que se llame a uno de los resolve s (se cumple la promesa).
Aquí hay otro patrón. Creo que se adapta mejor a tus necesidades.
document.querySelectorAll('button').forEach((button, index) => { button.addEventListener('click', () => { let playerValue = index; let computerValue = computer_choose_value(); play_round(playerValue, computerValue); }) }); function play_round(playerValue, computerValue) { // Disable the buttons if needed alert(`${playerValue} ${computerValue}`); // won_tie_lost(computerValue, playerValue); } function computer_choose_value() { return ~~(Math.random() * 3); } // start a round by enable the buttons <button id='btn1'>btn1</button> <button id='btn2'>btn2</button> <button id='btn3'>btn3</button>Lo estás haciendo de una manera totalmente equivocada.
Debe llamar a play_round con los clics del botón; de lo contrario, agregará detectores de eventos en el botón en cada ronda .
btnRock.addEventListener("click", play_round); btnScissor.addEventListener("click", play_round); btnPaper.addEventListener("click", play_round); function play_round(event){ let playerValue = event.target.dataset.value; let computerValue = computer_choose_value(); won_tie_lost(computerValue, playerValue); } function computer_choose_value() { return Math.floor(Math.random() * 3) + 1; } function won_tie_lost(playerValue, computerValue) { console.log(`player: ${playerValue}, computer: ${computerValue}`); } <button id="btnRock" data-value="1">Rock</button> <button id="btnScissor" data-value="2">Scissor</button> <button id="btnPaper" data-value="3">Paper</button>