btnRoll.addEventListener ('click', function() { if (isPlaying) { diceElement.classList.remove ('hidden'); function changeDiceImage () { // Display number on the dice const diceNumber = Math.trunc (Math.random () * 6) + 1; diceElement.src = `dice${diceNumber}.png`; i++; let timer = setTimeout (changeDiceImage, 200); if (i === 5) { clearTimeout (timer); number = diceNumber; } timer; } let i = 0; let number = 0; changeDiceImage (); if (number !== 1) { currentScore += number; document.getElementById (`current--${activePlayer}`).textContent = currentScore; } else { switchActivePlayer (); } } }) Intento hacer una función de bucle (que cambia aleatoriamente las imágenes con los dados) y también el último número de dados va al number y luego a la score . Como resultado, recibo el valor de NaN en lugar del número. ¿Como solucionar el problema?
Primero, un par de herramientas...
Una función que devuelve una promesa que se resuelve después de ms...
async function after(ms) { return new Promise(resolve => setTimeout(resolve, ms)) } Una función que devuelve una matriz mezclada aleatoriamente de [1..6] , gracias a Mike Bostock ...
function shuffleDie() { let array = [1,2,3,4,5,6] let m = 6, t, i; while (m) { i = Math.floor(Math.random() * m--); t = array[m]; array[m] = array[i]; array[i] = t; } return array; }El objetivo del OP: presentar una secuencia aleatoria de imágenes de dados y devolver (una promesa que se resuelve en) el último número en la secuencia aleatoria...
async function changeDiceImage(diceElement) { const numbers = shuffleDie(); for (let number of numbers) { diceElement.src = `dice${number}.png`; await after(ms); } return numbers[5]; // resolve to the last number }Úselos para limpiar el eventListener significativamente...
btnRoll.addEventListener ('click', async () => { if (isPlaying) { diceElement.classList.remove ('hidden'); let number = await changeDiceImage(diceElement); if (number !== 1) { currentScore += number; document.getElementById (`current--${activePlayer}`).textContent = currentScore; } else { switchActivePlayer (); } } })