In my Simon game I have a playSeq function that iterates through the computer array and plays the corresponding sound, like this:
async function playSeq(seq) {
for (const value of seq) {
await sleep(1500);
soundPlayer(value);
}
};
function soundPlayer(seqCode) {
switch (seqCode) {
case 0:
soundRed.load();
soundRed.play();
break;
case 1:
soundBlue.load();
soundBlue.play();
break;
case 2:
soundGreen.load();
soundGreen.play();
break;
case 3:
soundYellow.load();
soundYellow.play();
break;
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
This works fine to play the sounds of the computer sequence, but now I have no idea how to make the different color pads light up, I have tried putting a setInterval function within each case for the switch statement that adds a class for a second, but it is not working.
Mhā¦point is the sound interrupt itself, highlight would need to be turned on and off. So you probably need to add a CSS class to highlight the pad and a setTimeout function to remove it for each case ^^
By the way, are you sure of the async choice? I mean, you want the sequence to be played āin sequenceā, as well as you donāt want your app to do something else meanwhile ^^
Thank you for your reply. I couldnāt figure out any other way to iterate through the computer array and have it play the corresponding sound every 1.5 seconds. After countless hours I tried the FCC forum and somebody recommended the async function. At that point Iāve never even heard of async functions and promises, but I struggled with it a bit and figured my solution outā¦
but now I feel so stuck and Iām starting to doubt Iāll ever get the hang of javascript and Iām seriously thinking of just giving upā¦
@LayersetTimeout is asynchronous: using async to create a sleep function is fitting here - it lets you schedule asynchrounous things like timeouts but write code that look synchronous - it makes it easer to read because you can write things one after the other, rather than in callbacks.
@Wynand assuming you select all your pads - like const $allPads = document.querySelectorAll('.pad'). And you select each individual pad as well - eg $redPad = document.querySelector('.pad-red'). Whatever your classes/ids are anyway, thatās just an example:
case 0:
$allPads.forEach($pad => $pad.classList.remove('active');
$redPad.classList.add('active');
soundRed.load();
soundRed.play();
break;
So for each case, remove the .active class from all your pads, then add it to the current pad. Use CSS to colour it. Use animations/transitions in CSS if you want it to fade in/out or whatever.
Ah yes yes, i meant that the code shoudnāt progress until the ādelayedā instruction were executed^^
Thanks for clarify: i remember when i was working at that challenge i did something like the last code you wrote using setInterval, and the problem was that when the same pad was selected twice i coudnāt put a pause between them ( thatās why i went for two function calling each other with a setTimeout each ) but now i see i could have used promises to write it in a cleaner way^^
Iāve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The āpreformatted textā tool in the editor (</>) will also add backticks around text.
