Estoy haciendo un juego RPS básico para 2 jugadores, pero no puedo hacer que la idea funcione.
hay un temporizador de cuenta regresiva de 3 segundos, una vez que termina, tiene que haber un lapso de tiempo de 0.5 segundos para presionar un botón. pero no puedo averiguar o encontrar cómo hacer un intervalo de tiempo ..
mi código actual:
var p1 = document.getElementById('p1'); var p2 = document.getElementById('p2'); var timer = setInterval(timerFunc, 1000); var counter = 0; function timerFunc() { document.getElementById("timer").innerHTML=counter < 3 ? 3 - counter : ""; if (counter == 3) { document.body.onkeyup = function(e){if(e.keyCode == 49){p1.innerHTML = 'scissors'; }else if(e.keyCode == 50){p1.innerHTML = 'paper'; }else if(e.keyCode == 51){p1.innerHTML = 'rock'; }else if(e.keyCode == 56){p2.innerHTML = 'scissors'; }else if(e.keyCode == 57){p2.innerHTML = 'paper'; }else if(e.keyCode == 48){p2.innerHTML = 'rock'; } } clearInterval(timer); counter++; timer = setTimeout(timerFunc, 500); return; } else if (counter == 4) { clearTimeout(timer); } counter++; }(El código ha sido editado, y no pude descifrar addeventlisteners para las claves, así que lo hice con un if else aunque se ve muy desordenado)
el lapso de tiempo todavía no funciona correctamente
El juego, en pleno funcionamiento, con la cuenta regresiva de 3 segundos y el intervalo de tiempo de 0,5 segundos para hacer clic, podría verse así:
const PLAYERS = { player1: { name: 'Player 1', keys: ['q', 'w', 'e'], throw: ['scissors', 'rock', 'paper'], played: false }, player2: { name: 'Player 2', keys: ['r', 't', 'y'], throw: ['scissors', 'rock', 'paper'], played: false } }; const PLAYERS_VALS = Object.values(PLAYERS); let count = 3; let countdown = document.querySelector('#countdown'); countdown.innerHTML = count; let canPlay = false; const PLAY = key => { PLAYERS_VALS.forEach((player, i) => { if (player.keys.includes(key) && player.played == false) { // DO WHATEVER ONCE X PLAYER CLICKS player.played = true; // PREVENT CHANGING CHOICE let idx = player.keys.indexOf(key); document.querySelector(`#player${i + 1}`).innerHTML = `${player.name} threw <b>${player.throw[idx]}</b>`; } }); }; let cntID; const COUNTDOWN = () => { // ADD THE 3 SECONDS COUTDOWN cntID = setInterval(() => { count--; countdown.innerHTML = count; if (count === 0) { canPlay = true; // ALLOW THE CLICKS countdown.innerHTML = 'GO!'; clearInterval(cntID); // STOP COUNTDOWN ONCE IT REACHES 0 // ADD THE .5 SECONDS TIMESPAN TO CLICK setTimeout(() => { canPlay = false; // DISABLE THE CLICKS countdown.innerHTML = 'Ended.'; }, 500); } }, 1000); }; COUNTDOWN(); const RESTART = () => { count = 3; countdown.innerHTML = count; PLAYERS_VALS.forEach((player, i) => { player.played = false; document.querySelector(`#player${i + 1}`).innerHTML = `${player.name}`; }); COUNTDOWN(); }; document.body.addEventListener('keydown', e => { if (canPlay) PLAY(e.key); }); document.querySelector(`#restart`).addEventListener('click', e => { RESTART(); }); <div id="countdown"></div> <div id="player1">Player 1</div> <div id="player2">Player 2</div> <button id="restart">Restart</button>var timer = setInterval(timerFunc, 1000); var counter = 0; function timerFunc() { document.getElementById("timer").innerHTML=counter < 3 ? 3 - counter : ""; if (counter == 3) { document.body.onkeyup == function() {} // clearInterval(timer); counter++; timer = setTimeout(timerFunc, 500); return; } else if (counter == 4) { clearTimeout(timer); } counter++; }