I’m trying to create a Simon Game and when the user click the button I want it to be animated.
I used addClass and setTimeOut with removeClass, the animation happens but I need to click the same button two times.
var buttonColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];
var userClickedPattern = [];
function playSound(name) {
var audio = new Audio("./sounds/" + name + ".mp3");
audio.play();
}
function nextSequence() {
var randomNumber = Math.floor(Math.random() * 4);
var randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);
$("#" + randomChosenColour).fadeOut(100).fadeIn(100);
playSound(randomChosenColour);
}
function animatePress(currentColour) {
$("." + currentColour).on("click", function () {
$("." + currentColour).addClass("pressed");
setTimeout(function () {
$("." + currentColour).removeClass("pressed");
}, 100);
})
}
$(".btn").on("click", function () {
var userChosenColour = this.id;
userClickedPattern.push(userChosenColour);
playSound(userChosenColour);
animatePress(userChosenColour);
})