Simon light-up headache


Hi guys and girls

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);
  function soundPlayer(seqCode) {
  switch (seqCode) {
    case 0:
    case 1:
    case 2:
    case 3:
  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.

Any idea on how I can approach this problem?


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 ^^

Hope it helps,


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…


Ah, don’t do it! I know the feeling, but there’s the other side of te coin: when you solve it you feel great! :grin:

Anyway, dunno about the async stuff, but about scheduling in general you can have a look here (especially this section).

Hope it helps,


@Layer setTimeout 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');

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^^

Thanks! :slight_smile:


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.


Thank you so much @DanCouper ! You have practically helped me solved most of this project, thank you for putting in the effort to help me.