Any tutorials on the "setInterval" part of the simon game?

Code Feedback
1

I have an overall idea on how to build the simon game… but I’m stuck in the ‘light up’ buttons one at a time.
I’m feeling completely lost :frowning:

Any tutorials for this part?

Thanks

1 Like
2

You don’t want setInterval. You want setTimeout(); SetInterval keeps repeating every certain milliseconds. SetTimeout specifies a delay in milliseconds, and then runs a function.
Example, you have a function that highlights a button:

function highlightBtn(buttonObj) {
  buttonObj.highlight(10%);
  setTimeout(function() {
    buttonObj.removeHighlight();
  }, 1000);
}

now, in your code when the button is clicked:

$(button).click(function() {
  highlightBtn(this);
});

This example the click fires the highlight button method. The highlight method highlights the button (however you plan to do this), and then after one seconds removes the highlight (however you plan to do this).

Now say you have an array of buttons:

var buttons = [green, yellow, green, red];

for (var i = 0....) {
  highlightBtn()...
}

this will not work because the loop repeats before the setTimeout or something or other.
I have this function for the array pattern:

function pressButtons() {
  var index = 0;

  function nextBtn() {
    highlight(pattern[index]);
    index++;
  }
  nextBtn();

  var presser = window.setInterval(function () {
    if (index >= pattern.length) {
      clearTimeout(presser);
      userTurn = true;
      return;
    }
    nextBtn();
  }, 750);
}

Every 750 milliseconds, the highlightBtn will be called. Feel free to modify it to work for you, my point is, you will need to use a function that calls itself not a for loop to loop through a highlighting function.

8 Likes
3

Thank you SO MUCH for taking your time to help me understand what I need to do. Can’t wait to start working on it again later tonight. Thanks!!

1 Like
4

Haha, I’ve been working on the simon says game for the last week and got bored so decided to come here for a bit, Its amazing that helping someone restores your desire to get back too! I can’t wait till I can finish my game now :grinning:

5

Isaac, i’ve read this reply half a dozen times. It’s a really well written asnwer…you are a good teacher!

My function is similar in structure to yours but yours is much more streamlined. I’m still struggling with the full implementation of Simon regarding the turn taking and what happens when the game ends.

Do you have any other answers for this project?

6

I don’t know if this is the ‘correct’ answer, but whenever I’m making a game program, I create an object literal called ‘gameState.’ In that object are properties that keep track of important variables like who’s turn it is (tic-tac-toe) or whether or not the game is over (any game.)

Then it’s pretty straightforward to end the game or not, you just make an if / else statement. For example:

if(!gameState.gameOver){
    // do stuff
 }else{
   // end game actions
 }
7

I can see how this is highlighting the buttons - shouldn’t the thing that does the clearTimeOut also return the button to it’s normal color?