Good luck with. I'm trying to write a simple game. The general logic of the game is as follows: I have 8 gifts (in the form of buttons) and I have 25 seconds. During this 25-second period, the player will press any button and choose the gift. After 25 seconds, I want to play an animation between gifts for 5 seconds (like finding the lucky gift).I want to generate random numbers from 1 to 8 after these 5 seconds are complete. If the incoming number is equal to the id value of the button, I want to play animation for 5 seconds only on that button.So my game takes a total of 35 seconds. The code I've added below does this. It counts down 25 seconds and waits for 5 seconds when the time becomes 00, while the animation between the buttons plays alternately.Then, when I say generate random numbers between 1 and 8, it generates more than 1 number due to the setTimeout function and the game is broken.How can I get it the way I want?
var interval = 25000;
function reset() {
const
delay = ms => new Promise(r => setTimeout(r, ms)),
btn_A = document.getElementById('1'),
btn_B = document.getElementById('2'),
btn_C = document.getElementById('3'),
btn_D = document.getElementById('4'),
btn_E = document.getElementById('5'),
btn_F = document.getElementById('6'),
btn_G = document.getElementById('7'),
btn_H = document.getElementById('8'),
animLoopgenerator = function* () {
const animLoop = [{
stop: null,
start: btn_A,
time_ms: 600
}, {
stop: btn_A,
start: btn_B,
time_ms: 600
}, {
stop: btn_B,
start: btn_C,
time_ms: 600
}, {
stop: btn_C,
start: btn_D,
time_ms: 600
}, {
stop: btn_D,
start: btn_E,
time_ms: 600
}, {
stop: btn_E,
start: btn_F,
time_ms: 600
}, {
stop: btn_F,
start: btn_G,
time_ms: 600
}, {
stop: btn_G,
start: btn_H,
time_ms: 600
}, {
stop: btn_H,
start: null,
time_ms: null
},
];
for (elm of animLoop) yield elm
};
async function animLoop() {
for await ({
stop,
start,
time_ms
} of animLoopgenerator()) {
if (stop) stop.classList.remove('glowing500');
if (start) start.classList.add('glowing500');
if (time_ms) await delay(time_ms);
}
}
animLoop();
var random = Math.floor(Math.random() * 8) + 1;
if (random == 1) {
const
delay = ms => new Promise(r => setTimeout(r, ms)),
btn_A = document.getElementById('1'),
animLoopgenerator = function* () {
const animLoop = [{
stop: null,
start: btn_A,
time_ms: 3000
}, {
stop: btn_A,
start: null,
time_ms: null
},
];
for (elm of animLoop) yield elm
};
async function animLoop() {
for await ({
stop,
start,
time_ms
} of animLoopgenerator()) {
if (stop) stop.classList.remove('glowing500');
if (start) start.classList.add('glowing500');
if (time_ms) await delay(time_ms);
}
}
animLoop();
} else if (random == 2) {
const
delay = ms => new Promise(r => setTimeout(r, ms)),
btn_B = document.getElementById('12'),
animLoopgenerator = function* () {
const animLoop = [{
stop: null,
start: btn_B,
time_ms: 3000
}, {
stop: btn_B,
start: null,
time_ms: null
},
];
for (elm of animLoop) yield elm
};
async function animLoop() {
for await ({
stop,
start,
time_ms
} of animLoopgenerator()) {
if (stop) stop.classList.remove('glowing500');
if (start) start.classList.add('glowing500');
if (time_ms) await delay(time_ms);
}
}
animLoop();
}
setTimeout(function () {
localStorage.endTime = +new Date() + interval;
},5000);
}
if (!localStorage.endTime) {
reset();
}
function millisToMinutesAndSeconds(millis) {
var seconds = ((millis % 60000) / 1000).toFixed(0);
return (seconds < 10 ? "0" : "") + seconds;
}
setInterval(function () {
var remaining = localStorage.endTime - new Date();
if (remaining >= 0) {
document.getElementById("timer").innerText =
millisToMinutesAndSeconds(remaining);
} else {
reset();
}
}, 100);