Simon Game problem - Not using setInterval properly, maybe?

Hello everyone, this is the first time I am opening a subject on FCC forum, and I hope it wasn’t a bad decision.
I am working on my final project in front end course - Simon Game. And I am having some unexpected problems in the beginning of the project. Here is the codepen link for my project: https://codepen.io/VukMNE/full/zEbmWm/

What I want to achieve at this moment is that the computer shows the sequnce of button presses that user needs to repeat in order to win a game. I have 4 divs (4 buttons used in the Simon game), and I planned to show what button needs to be pressed with animations from animate.css

So far, I have made a function that generates array of numbers that has the length that I specify, and is made by randomly choosing numbers between 1 and 4, and that would be the representation of button presses that the computer made for user to guess. Here is the function:

function createSolution(rounds){
				for(var i = rightSolution.length; i < rounds; i++){
					rightSolution.push(parseInt(Math.random()*4));
					roundNumber++;
				}
			}

rightSolution is the array that contains the sequnce of what button presses * 1 means that the first button needs to be pressed and so on…) represent the right solution or choice.

Next thing is to make animations, so that the visitor of the page can se what sequence he or she needs to repeat. And that is where my problem starts… Here is the code:

function blinkTheSpot(arr){
					console.log("Runda: " + currentRound);
					console.log($('#' + parseInt(arr[currentRound]+1)));
					$('#' + parseInt(arr[currentRound]+1)).removeClass('animated flash');
					$('#' + parseInt(arr[currentRound]+1)).addClass('animated flash');				
					currentRound++;
					if(currentRound>roundNumber){
						clearInterval(doIt);
					}
					else{
						blinkTheSpot(rightSolution)
					}
			};

function blinkTheSpot is given the argument arr which is actually the before-mentioned array rightSolution, var currentRound tells what index or which element from the sequence should be blinked.

Here is the function that starts the animation of the computer made sequence:

function showSolution(){
				doIt = setInterval(blinkTheSpot(rightSolution),1050);
}

My problem is that the animation happens all at once, with no breaks between the elements of the rightSolution array, and because of that user can-t see what sequence he or she needs to repeat.
Thank you for your help anyway :slight_smile:

Hey,

setInterval takes two arguments - a function and an interval time. In your showSolution function, you are calling setInterval, but the first argument is actually not a function because you are calling the function right there so what you are passing into setInterval is the return value of blinkTheSpot(rightSolution) - which is undefined.

blinkTheSpot still runs (since you are calling it).

blinkTheSpot then recursively calls itself in the else block until it has run through all the numbers - but your are not setting an interval there, so these recursive calls happen immediately.

You should be able to rewrite blinkTheSpot so it doesn’t keep calling itself. Then just pass in the function without calling it and you should be making progress.

1 Like

Thank you, I rewrited my code, and now it works :slight_smile: