Currently, I am facing a challenge while working on a Simon Says game. My struggle lies in the part where I need to illuminate the buttons that the user has to click. I am using a "for" loop to iterate through each element in the array where I have stored the sequence. The aim is to traverse through the array for each round and illuminate the button accordingly. However, I am encountering an issue where the "for" loop is simultaneously changing the background of every div that has passed in the array, despite using a setTimeout function to pause at each button.
If you'd like to take a look at the codepen I am working on, here is the link:
https://codepen.io/argestis/pen/gLraBq?editors=0011
function litSequence() {
for (var i = 0; i < game.count.length; i++) {
if (game.count[i] === 1) {
game.blue.css("background-color", "cyan");
setTimeout(function() {
game.blue.css("background-color", "blue");
}, 1500);
} else if (game.count[i] === 2) {
game.red.css("background-color", "pink");
setTimeout(function() {
game.red.css("background-color", "red");
}, 1500);
} else if (game.count[i] === 3) {
game.green.css("background-color", " #4dff4d");
setTimeout(function() {
game.green.css("background-color", "green");
}, 1500);
} else if (game.count[i] === 4) {
game.yellow.css("background-color", "orange");
setTimeout(function() {
game.yellow.css("background-color", "yellow");
}, 1500);
}
}
};