Introduction
Let's make a game, the Simon game.
The game goes like this, there are 4 squares.
In each round a square will blink, and you have to press the buttons in the sequence made each round.
So let's go
HTML and CSS
- The HTML and CSS is simple enough you have 4 divs, one for each square and an h1 to show the level.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="#">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>
<body>
<h1 class="title">Press A Key to Start</h1>
<div class="container">
<div class="row">
<div class="tile t-1"></div>
<div class="tile t-2"></div>
</div>
<div class="row">
<div class="tile t-3"></div>
<div class="tile t-4"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
body{
text-align: center;
background-color: #011F3F;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
}
.tile{
background-color: aqua;
height: 200px;
width:200px;
margin: 25px;
border: solid black 10px;
border-radius: 20%;
}
.title{
font-family: 'Press Start 2P', cursive;
font-size: 3rem;
margin: 5%;
color: #FEF2BF;
}
.failed{
background-color: red;
}
.t-1{
background-color: green;
}
.t-2{
background-color: red;
}
.t-3{
background-color: yellow;
}
.t-4{
background-color: blue;
}
.row{
display: flex;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
- In the CSS i have a few extra classes like .pressed and failed which we will use in our JavaScript to make our website interactive.
JavaScript
This is where it gets fun, Lets start.
Lets start with the main function.
First i need to make the game start by pressing any key, so i added an event listener to the whole document.
When this event happens and the level is 0 (game hasn't started), I need to make the variable fail=true, change the heading to level 1 and add a random number to the sequence array.
I also play the button animation of the new button in the sequence.
$(document).keydown(function(){
if (level==0){
fail=false;
$("h1").text("Level "+(++level));
newNum=sequenceGenerator();
sequence.push(newNum);
buttonAnimation(newNum,300);
}
});
Now that game has started, every click from the user now depending on the square will be added to the sequence that the user input which will later be checked with the generated sequence.
This listener only works if the game has started (level 1 or above).
when a user clicks a square the square plays the press animation and pushes the square number to the array.
tile=event.currentTarget.classList[1][2];
userSequence.push(tile);
buttonAnimation(tile,100);
checkSequence.push(sequence[ind++]);
Now if the clicked square is not in the correct order in the generated sequence, the fail variable will be set to true and all the variables will be reset.
The fail() function will be called.
if (tile!=sequence[ind-1]){
fail=true;
fail_();
level=0;
ind=0;
sequence=[];
userSequence=[];
}
- If the length of the generated sequence is the same as the user input without making any wrong clicks, level will be incremented, User sequence will be reset, new number will be generated and the corresponding tile will blink for 1 second.
if (userSequence.length==sequence.length){
if (fail!=true){
$("h1").text("Level "+(++level));
userSequence=[];
ind=0;
newNum=sequenceGenerator();
sequence.push(newNum);
setTimeout(function(){
buttonAnimation(newNum,300);
},1000);
}
}
Thats the whole main function, lets get to the other functions.
function to create a random sequence that increases the elements in the sequence every turn.
So i made an array to which i append the output of a random number generator, so i made a function to create the random number.
function sequenceGenerator(){
var num=Math.floor(Math.random()*4)+1;
return num;
}
Function to play audio depending on the button pressed.
It takes an input parameter (the tile pressed) and uses a switch case to play the right audio.
function playAudio(tile){
switch (String(tile)){
case "1":
var audio=new Audio("./sounds/green.mp3");
audio.play();
break;
case "2":
var audio=new Audio("./sounds/red.mp3");
audio.play();
break;
case "3":
var audio=new Audio("./sounds/yellow.mp3");
audio.play();
break;
case "4":
var audio=new Audio("./sounds/blue.mp3");
audio.play();
break;
default:
console.log("error "+tile);
}
}
- Function run on failure, It displays the game over text , plays the fail audio and adds the fail class to the body to make the background red for 0.5 seconds.
function fail_(){
$(".title").text("Game Over, Press Any Key to Restart");
$("body").addClass("failed");
var audio = new Audio("./sounds/wrong.mp3");
audio.play();
setTimeout( function(){
$("body").removeClass("failed")},
500
);
}
Function to play the button animation.
This adds the pressed class to the square being pressed for the time specified.
function buttonAnimation(key,time){
$(".t-"+key).addClass("pressed");
playAudio(key);
setTimeout( function(){
$(".t-"+key).removeClass("pressed")},
time
);
}
Conclusion
This was a fun project that I took on as a challenge, even though its pretty much spaghetti code.
It works and that makes me happy.
Any advice to fix it is appreciated Thank you!!
GitHub -> https://github.com/P-M-Manmohan
LinkedIn -> https://www.linkedin.com/in/manmohan-p-m-78618323a/