var buttonColor = ["red", "blue", "green", "yellow"];
var userClickedPattern = [];
var gamePattern = [];
var totalKey = [];
var level = 0;
$("*").on("keydown", function(m) {
var key = m.key;
totalKey.push(key);
var keyLength = totalKey.length;
if (keyLength == 1) {
nextSequence();
}
});
function nextSequence() {
userClickedPattern = [];
$("#level-title").html("Level " + level );
var num1 = Math.floor(Math.random() * 4);
var randomChosenColor = buttonColor[num1];
gamePattern.push(randomChosenColor);
flashandsound(randomChosenColor);
level++
}
function flashandsound(n) {
$("#" + n ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
var audio = new Audio("sounds/" + n + ".mp3");
audio.play();
}
$("div").on ("click", function() {
const userChosenColour = $(this).attr("id");
//to animate the userChosenColour
$("#" + userChosenColour).addClass("pressed");
setTimeout(function () {
$("#" + userChosenColour).removeClass("pressed");
}, 500);
userClickedPattern.push(userChosenColour);
flashandsound(userChosenColour);
checkAnser(userClickedPattern.length -3);
})
function checkAnser(currentLevel){
if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
if ((userClickedPattern.length-2) === gamePattern.length) {
setTimeout(function () {
nextSequence();
}, 1000);
}
} else {
$("#level-title").html('Game over, Press any key to start again');
var audio = new Audio("sounds/wrong.mp3");
audio.play();
$("body").addClass("game-over");
setTimeout(function () {
$("body").removeClass("game-over");
}, 1000);
restart();
}
}
function restart() {
totalKey = [];
level = 0;
gamePattern = [];
userClickedPattern = [];
}body {
text-align: center;
background-color: #011F3F;
}
#level-title {
font-family: 'Press Start 2P', cursive;
font-size: 3rem;
margin: 5%;
color: #FEF2BF;
}
.container {
display: block;
width: 50%;
margin: auto;
}
.btn {
margin: 25px;
display: inline-block;
height: 200px;
width: 200px;
border: 10px solid black;
border-radius: 20%;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simon</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>
<body>
<!-- begin snippet: js hide: false console: true babel: false --><h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div lass="row">
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="game.js" charset="utf-8"></script>
</body>
</html>
(I noticed that the userClickedPattern is returning three times the clicked value instead of one. Additionally, I'm struggling with framing a proper if statement to make the game run smoothly. Any guidance on what could be going wrong would be greatly appreciated. Thank you)