Simon Game how to proceed?

Question

So I am trying to build a Simon Game. First of all I created a random array with 20 values that varies between 1 and 4 (That would identify each color of the game). So 1 would be red, 2 would be blue, 3 would be green and 4 would be yellow. So I got the array which is something like this:

var arrayRandomColors = [1, 3, 1, 2, 4, 3, 2, 1, 3, 2, 1, 2, 4, 1, 2, 3, 4, 1, 3, 2]

Now this is de order of sounds and colors of my Simon Game. However, I now need to go over there array like this:

Level 1 - [1] -> Level 2 - [1, 3] -> Level 3 - [1, 3, 1] ->  Level 4 - [1, 3, 1, 2]... etc. And then each time it loops over these arrays it plays a sequence o sounds that corresponds to the current level.

So that's what I did:

var j=2;
    var arrayPlay = [];
    for (var j=2; j<22; j++){
        for(var i=1; i<j; i++){
            arrayPlay.push(arrayRandomColors[i-1]);
        }
        console.log(arrayPlay); //[1] -> [1,3] -> [1,3,1]...etc
        arrayPlay = [];
    }

So far, I managed to get all the arrays I want. However, I got stuck about how to proceed, because I need to go over this numbers slowly, showing the colors being selected and playing a sound while it loops, and the for loop is just too fast. I thought about doing something like this:

for (var j=2; j<22; j++){
        for(var i=1; i<j; i++){
            arrayPlay.push(arrayRandomColors[i-1]);
        }
        //console.log(arrayPlay);
        for (var k=0; k<arrayPlay.length; k++){
            var id = setInterval(function(){
                console.log("entrou");
            if (arrayPlay[k] == 1){
                $red.css("background-color", "#ffc1c1");
                $red.delay(500);
                $red.css("background-color", "red");
            }
            else if (arrayPlay[k] == 2){
                $blue.css("background-color", "#a5b0f7");
                $blue.delay(500);
                $blue.css("background-color", "blue");
            }
            else if (arrayPlay[k] == 3){
                $green.css("background-color", "#aff7a5");
                $green.delay(500)
                $green.css("background-color", "green");
            }
            else if (arrayPlay[k] == 4){
                $yellow.css("background-color", "#fffb91");
                $yellow.delay(500);
                $yellow.css("background-color", "yellow");
            }

            }, 500);
        }
        arrayPlay = [];
        console.log("\n");
    }

But it doesn't work. Can anyone help me out?

Answer 1

The loop like you said runs too fast. Your idea to use interval is a good step, but there is a gotcha. You used a fixed interval of 500. Now try to imagine it, the loop runs fast and creates a bunch of intervals all 500, so they all will run almost at the same time after 500. We didn't solve the issue, we just delayed the execution by 500.

The solution is to use an incrementing interval. Multiply it by the index (remember to add one because it is zero based). Something like:

setInterval(..., 500 * (k+1));

You probably need to use the index j or a combination of k and j . I will leave that to you to explore, but this answer will get you started.

Answer 2

You could use setTimeout() , as described here . That says:

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. setTimeout(function(){ alert("Hello"); }, 3000);

.(w3Schools references are not the best ones and not good seen here, but it is not a more elaborate thing, so this link should help.)

Answer 3

I myself am trying to build the Simon game(I am just starting in front end development). Here are some of the pointers that I made before starting out.

I need to start with one coloring tile to bleep once and followed by two coloring tiles to bleep once each and so on for number of levels you decide. So, my approach is to have 4 colored tiles already defined say 1 for red,2 for yellow,3 for blue,4 for green tiles. Now for each level I can generate random numbers(1 through 4) via a function. So, if I am using a loop that runs equal to number of times what level the game is on, I'll have one random number generated for level 1, 2 random numbers generated for level 2 and so on.

For each random number, you could bleep the respective colored tile.

Now for the time gap between the bleeps of colored tiles, you could make use of setInterval function to run after certain amount of milliseconds, which is only cleared only when required number of tiles have bleeped. Eg On level 4, the setInterval should run for 4 times with a time gap of 1000 ms.

Now, as advancing through levels you could decrease the time gap to make the game faster and more challenging.

Also, note down how you're going to let user know, that it's their turn to play now and also, once user is done with their level, how do you tell the application it should not wait for more user input and analyse the result of this level and proceed or not for the next level.

I know, this is all words, but believe me, if you have all this planned, your effort will be less and more fruitful.