Simon game problem after count 1

1

Hi , I have a problem in my simon game. First count is okay it changes width for a half second i think and then play sound and if you click it you go to count 2 , then the problem appears. One of the button’s width doesn’t change back to normal and the 2 sounds trigger at the same time even when there is SetTimeout here is my codepen.
problem is in go function I think.

2

It’s odd to me that you cached the element inside of doSetTimeout but then used jQuery to access it again later. I made these changes:

function doSettimeout(y) {
      var $el = $('#' + combo[y]);
      var origbackground = $el.css('width');
      $el.css('width', '100px');
      setTimeout(function() {
        $el.css('width', origbackground);
        $el.trigger('onclick');
      }, 500);

    }

What I think is happening in your code is that you’re going through an array of moves expecting the next one to occur after the previous one is finished. There’s nothing in your logic that dictates this, though, so the browser fires off each event at computer speeds, and they each finish within milliseconds of each other half a second later. Remember that setTimeout and setInterval are non-blocking, so other code will run while the computer is waiting for them to finish. You need to figure out a way to tell the computer, “Complete each of these moves, but only move onto the next one as the previous one finishes”.

3

I tried something with promises ? Is it the right way? I just played with it on repl.it but even my test (only console.logs ) doesn’t work properly

4

I wouldn’t use promises for this. They’re great for AJAX calls because you don’t know when you’ll get a response from the server. When I did this project, I used a recursive function to play through all of the computer’s moves. Here’s some pseudo code:

function playThroughMove(counter) {
  if(counter >= winningCondition) {
    return youWin();
  }

  var currentMove = arrayOfMoves[counter];
  playMove(currentMove);
  var timer = setTimeout(function() {
   playThroughMove(counter + 1);
  }, 500);
}

This glosses over a lot of details, but think about how it works and you’ll be able to figure the rest out. Notice that setTimeout() is getting assigned to a variable. The function returns an identifier that you can later use to cancel the count down.

clearInterval(timer);

Another option is to use a for loop to work through an array instead of a recursive function call.

5

I thought I have it after I tested something but well apparently not :smiley:
function play(counter){ if (counter === combo.length-1){ return true; } var current = combo[counter]; $('#'+current).trigger('onclick'); var oriwidth = $('#'+current).css('width'); $('#'+current).css('width','100px'); var time = setTimeout(function(){ play(current+1); $('#'+current).css('width',oriwidth); },3000) } play(0);
this is my code but it still plays at the same time.
Btw thank you for helping you always answer my questions you are da real MVP :smiley:

6

Well, it looks like you’re on the right track. I’m not sure what the problem is just from looking at your code, but I would guess that the issue lies with the logic used to play sounds. I suggest you open up your CodePen in debug mode (click on ‘Change View’ in the upper right and select ‘Debug View’), and then open up your browser’s dev console. Here, you can use the debug tool to watch your code happen. If you need a primer on how to do this, check out this video, or if you have more time, go through this entire course (free) on the Chrome Dev tools at codeschool.com. You’ll want to place break points on your play() function, as well as whichever function makes sounds play. Press the ‘skip over’ button (shortcut is usually F7, I think) when you get to a jQuery function so you don’t have to go through everything it does.

1 Like
7

I finally found a mistake i had play(current+1) instead of play(counter+1) thank you ^-^

1 Like