Simon game is going to make me give up

I have tried javascript like a thousand times, tried all timing functions. But I don’t know why is this being so hard. I have written alot of code and erased. If you already have made simon game, please help me solving it.

What is it in particular that you’re trying to accomplish?

1 Like

The Simon game is the most difficult project in the front end section.

2 Likes

It would help if you told us what, specifically, you were having a hard time with.

The only timing function I see in your code right now is the time variable, which uses Timer as a callback, but I can’t find a corresponding Timer function. So that’s not doing anything, obviously.

I’d break your game down into smaller challeges.

  1. Can you press a button and have it light up and play a sound?
  2. Can you create an array that stores a pattern of buttons to activate, and can you get that array to play and show the player the pattern?
  3. Can you compare the button the player is clicking to the right position in your pattern array, to see if the player is pressing the correct pad?

BTW - Your css is awesome, definitely keep that!

3 Likes

Hi, I forked your project, and wrote some code in it.Maybe it can inspire you.

http://codepen.io/Hallucinogen/pen/KgGAdk/

1 Like
  1. Walk away from the computer for a solid 10 minutes.
  2. Come back and finish the mission you started. You can’t possibly give up this close to your certificate!
  3. If that doesn’t work, accept that the day is going to beat you sometimes, and that’s alright. Come back tomorrow.
4 Likes

Stay strong…>I have been working on my Simon game for OVER a year.

2 Likes

Thank you so much, I have read and understood all the code. It helped alot. Thank you so much

It inspires, I will never give up again. Thank you.

That’s really helpful. I will try. Thank you

I was able to complete first two points, but stuck in the third one. I removed and wrote again and again. And that was the point I was not able pass. Now @Omegga has written a code for me, I am going to study it. If I still get stuck, I will ask. Thank you so much for your time :slight_smile:

In a loop where it was supposed to run computer’s sequence after a short interval, all of the sequence run at once. I used setTimeOut and timeInterval functions but didn’t make it.

#3 happens alot to me!

Sometimes I really struggle all day long with a challenge or a problem in a FCC project. Then come back to it in the morning and have it solved in 30 mins. Not always, but sometimes.

Mark

2 Likes

When writing the code, I encountered the same issue.So I replaced the loop with the only solution I could come up with at the moment, which is a recursive function.

The issue is because of asynchronous code produced by setTimeout :


for (var i = 0; i < 3 ; i++) {
    console.log("play sound #" + i + " at " + new Date().toLocaleString());
    
    // when we reach the end of loop
    if(i === 2) console.log("waiting 3 seconds...");

    setTimeout(function(){
        console.log("play sound #" + i + " at " + new Date().toLocaleString());
    }, 3000);
}
// resulting in : 
// play sound #0 at 10/19/2016, 11:00:25 AM
// play sound #1 at 10/19/2016, 11:00:25 AM
// play sound #2 at 10/19/2016, 11:00:25 AM
// waiting 3 seconds...
// play sound #3 at 10/19/2016, 11:00:28 AM
// play sound #3 at 10/19/2016, 11:00:28 AM
// play sound #3 at 10/19/2016, 11:00:28 AM

setTimeout executes immediately, but the for loop does not wait 3 seconds to increment i. It continues at a blazing fast speed.So when the functions are called 3 seconds later, the for loop has already finished and the value of i is 3.The callback functions within setTimeout do not remember the previous value of i, so they print the current value of i, “3”.

I could use an immediately invoked function to play #1, #2, #3, instead of #3-#3-#3 :

for (var i = 0; i < 3 ; i++) {

    (function(copyOfI) {
        setTimeout(function(){
            console.log("play sound #" + copyOfI + " at " + new Date().toLocaleString());
        }, 3000);
    })(i);
}
// play sound #0 at 10/19/2016, 11:14:40 AM
// play sound #1 at 10/19/2016, 11:14:40 AM
// play sound #2 at 10/19/2016, 11:14:40 AM

but the issue remains, we play them almost at the time because the 3 setTimeout were also called almost at the same time.

This code might work, but I really don’t know if it’s a good practice…

for (var i = 0; i < 3 ; i++) {
    var threeSecondsFromNow = new Date().getTime() + 3000;

    while(new Date().getTime() < threeSecondsFromNow) {}

    console.log("play sound #" + i + " at " + new Date().toLocaleString());
}
// play sound #0 at 10/19/2016, 11:35:37 AM
// play sound #1 at 10/19/2016, 11:35:40 AM
// play sound #2 at 10/19/2016, 11:35:43 AM


1 Like

What I did was actually call all the setTimeouts at once, incrementing their time by multiplying i by a delay. For some reason that I don’t recall, I used a self-running anonymous function to do this, and the only comment i left was //LOL, which leads me to believe it was vitally important. Thought sharing might help. (with a bunch of extra comments added in, of course)

    //i is loop variable
    //theList is global string with current pattern (red,green,...)
    //held as single letters ('r,g,b,y...')
    for(i=0; i<theList.length; i++) {
      let char = theList.charAt(i); //current step in theList
      //LOL <--this is the only actual comment in my code lol
      (function(c,j){ //so c=char, j=i
        window.setTimeout(function() { //have to use anonymous to call arguments
          computer.press(c); //computer.press does lights/sounds
        }, delay*j); //delay is how long in ms between steps
      })(char,i+1); //this is where i set char to c and j to i
                    //note that I use i+1 so there's a delay at
                    //the start
3 Likes

I like your solution, you’re using the array index as a delay multiplier, that’s clever.The self running anonymous function helps in keeping a track of the value of char at each iteration, otherwise it would be lost.Thanks for sharing this, I learned something.

Based on your code, I came up with this :

(function playNext(sounds, i) {
    
    setTimeout(function() {
        console.log("play " + sounds[i] + " at " + new Date().toLocaleString());
    }, 1000 * (i+1) );

    if (i < sounds.length - 1) playNext(sounds, ++i);

})(["green", "red", "yellow", "blue"], 0)
// play red at 10/19/2016, 5:52:07 PM
// play yellow at 10/19/2016, 5:52:08 PM
// play blue at 10/19/2016, 5:52:09 PM
// play blue at 10/19/2016, 5:52:10 PM


Not very readable, but I’ll save it for the next time.

2 Likes

http://codepen.io/microcyberz/full/ALJyBP/ @Omegga @MARKJ78 @Tattomoosa @AdventureBear @PortableStick
I have started writing simon game from scratch, gave it a simple design and now here it is… You guys made this possible for me. Thank you for your kind support :slight_smile:
here is the certificate https://www.freecodecamp.com/microcyberz/front-end-certification

5 Likes

you’re welcome, and also congratulations for your certificate.

CONGRATULATIONS AHMAD!!! :trophy: I had similar frustrations yesterday, came back this morning, and solved my problem in about 30 minutes. Are you planning to move on to the data viz certificate, back end certificate, or start working?

I have started learning c# and unity3d for game development (one code, game runs on almost all platforms), I want to create something of my own because in my country there are less jobs. This certificate will not help here. And I will slowly work on FCC, and of course Data Viz is my next certificate.

1 Like