How do I show color sequentially?

1

Hi guys, I’m doing the simons game and I’m stuck and this problem where I have to show the players the current sequence that I have. I thought of using setInterval & setTimeout but it seems like they’re not gonna work out. How did you guys implement this feature so that we can show the colors sequentially one after another, leaving some timeframe behind.

This code and the whole project is here
https://buoyantair.github.io/simons-game/

You just need to open up console and type in initialPrompt(false); to start the game, just click the boxes and play on it’s quite confusing right now though

2

Could you describe how you thought your algorithm to work? :slight_smile:

3

I tried setTImeout and had a a problem with that too until it occured to me - I just need to set timeouts for each light and calculate how far into the future I need them. So, the first event is turning on the first light at a time of 0s, then another event to turn off the light at 1s, then turn on the next light at 2s, then turn off the second light at 3s, etc. I disabled the buttons while this is happening to prevent confusion.

Yeah, I find the lack of a sleep() function frustrating in JS, but you just have learn to think differently.

4

To play the sequence I made this code below:

// Always call it with ZERO parameter
// e.g. playSequence(0, audio);

function playSequence(i, audio) {
  setTimeout(function() {
    if(i > 0) {
      unpressButton(sequence[i - 1]);
      stopAudio(audio);  
    }  
    if(i < sequence.length) {
      pressButton(sequence[i]);
      audio = playAudio(sequence[i]);
    }
    i++; 
    if(i <= sequence.length) {
      playSequence(i, audio);
    } else {
      stopAudio(audio);
    }
  }, 1000);
}

The function calls itself until the sequence is finished and the counter (i) is incremented inside setTimout function.

My full code is here: http://codepen.io/raulfm/pen/qmdwpb?editors=1010

I’ve got stuck on start() function that is the engine of the game. It must add an audio, play the sequence and wait the player to try the correct sequence. But I wasn’t able to make the sleep function to wait the player sequence.

I’ve tried this:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

And I used it on my start function:

async function start() {
  var audio;
  isRunning = true;
  addSound(); // add new audio to sequence
  
  while(ON) {
    playSequence(0, audio);
    // wait 7s for user answer
    await sleep(7000); 
    
    if(isAnswerCorrect()) {    
      count++;
      addSound();
    } else {
      count = 0;
      // answer incorrect: play corresponding audio
      var audio = playAudio(5);
      setTimeout(stopAudio(audio), 1000);
    }
    aux = 0;
    $("#spaceCount").html(count);
  }
}

But it makes this error: Unexpected token function.