Unable to get back button color in Simon Project

Unable to get back button color in Simon Project
0.0 0

#1

i have started working on simon project and the first major problem that i am facing is getting back the color of the button after it has been randomly selected by the computer…
I guess the problem is with setTimeout() but i have placed it in a function that is outside the for loop…still i havent progressed…

Here is my pen: https://codepen.io/mayurnagdev123/pen/gvpgRW
Any help would be greatly appreciated


#2

I had a quick look and there are a lot of problems with the JavaScript. If I’m not mistaken, the relevant functions seem to be:

    for (var j = 0; j < arr.length; j++) {
      performEffect(arr[j]);
    }

    function performEffect(def) {
      col = $("#" + def).css("background-color");
      $("#" + def).css("background-color", "white");
      original(j + 1);
    }

    function original(m) {
      setTimeout(function() {
        console.log(arr[j]) // returns undefined because this function does not have access to j
        $("#" + arr[j]).css("background-color", col);
      }, 1000 * m);
    }

The reason that the colour isn’t changing back is because the function, original(m), does not have access to j in the for loop, therefore arr[j] in that function will always be undefined.

In fact, if you move the setTimeout method to inside the performEffect(def) function, you will see the colour change back to what you intend it to be; alternatively, you can pass def into original() and you will also see the colour change.

If I’m not mistaken there are other variable scoping issues (and potentially also async issues) that you will run into even if you will have fixed this. A few things that you may find useful moving forward:

You should tidy up your JavaScript a little by using the “Tidy JS” option in CodePen (in the dropdown menu to the top-right corner of the JavaScript area)—that will make things a lot easier for someone reviewing your code and also faster for yourself to maintain. You should also consider giving variables meaningful names (such as buttonColour instead of col). If you have time, you may want to read through a JavaScript style guide, too.

The Simon Game is reasonably difficult and the problems you have encountered themselves aren’t trivial, but it will be super rewarding if you spend the effort to figure it out. Good luck! :slight_smile:


#3

thank you so much for the help…I have now figured the problem out & the game works quite well …
However …I did have a look at the ‘promise’ constructor…I was unable to make a head or tail of it.
(although i did understand the let and const keywords…)

it would be great if you could tell me how i can use promise() in this game


#4

There are various ways you make the Simon game and you don’t necessarily have to use Promise objects (recursion, for example). Promise was just a suggestion because the gameplay of the Simon Game is linear and using Promise objects could make some parts easier. I can’t tell you exactly how to implement it in your game, my advice is don’t distract yourself with learning Promise now if you are not running into async issues.