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 ();
}
}
})
I try to loop function (that randomly change images with dice) and also last dice number go to number then to score.
In result i receive NaN value instead of number.
How to fix the problem?
First, a couple tools...
A function that returns a promise which resolves after ms...
async function after(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
A function that returns a randomly shuffled array of [1..6], due to 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;
}
The OP's aim: present a random sequence of die images and return (a promise that resolves to) the last number in the random sequence...
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
}
Use these to clean up the eventListener significantly...
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 ();
}
}
})