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