Hey everyone. Welcome to today’s tutorial. In this tutorial, we will learn how to create a Simon Game. To build this project we need HTML, CSS and Javascript.
Â
This is an intermediate-level javascript project. If you are looking for more such projects you can check out this playlist here. This playlist consists of 100+ javascript projects. The difficulty level of this project varies from simple to a quite complex one. Hence this project is suitable for all kinds of javascript learners including javascript beginners to javascript experts.
Â
Let us take a look at how this game works. Initially, we display a start screen. The player clicks on the start button to get the game started. The game lights up colours in a particular sequence. The player has to memorize the sequence and click the colours in the exact sequence.
Â
If he is successful in doing so he moves to the next level where the count of the sequence is increased by 1. However, if the player fails to play the right sequence he loses and we display the count as a score and show the ‘Play Again’ button.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Simon Game’. Inside this folder, we have three files. These files are – index.html, style.css and script.js. The first file is the HTML document, the next one is the stylesheet and the last one is the script file.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simon Game</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<p id="result" class="hide">Demo Message</p>
<button id="start">Start Game</button>
</div>
<div class="wrapper hide">
<div class="simon">
<div class="color1 color-part"></div>
<div class="color2 color-part"></div>
<div class="color3 color-part"></div>
<div class="color4 color-part"></div>
<div id="count">00</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this game using CSS. For this copy the code below and paste it into your CSS file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #2f70ff;
}
.wrapper {
background-color: #ffffff;
height: 37.5em;
width: 37.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.5em;
}
.simon {
height: 31.25em;
width: 31.25em;
background-color: #101010;
border-radius: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.color-part {
height: 13.12em;
width: 13.12em;
position: absolute;
cursor: pointer;
}
.color1 {
background-color: #027802;
border-radius: 13em 0 0 0;
top: 1.87em;
left: 1.87em;
}
.color2 {
background-color: #950303;
border-radius: 0 13em 0 0;
top: 1.87em;
right: 1.87em;
}
.color3 {
background-color: #01018a;
bottom: 1.87em;
right: 1.87em;
border-radius: 0 0 13em 0;
}
.color4 {
background-color: #919102;
bottom: 1.87em;
left: 1.87em;
border-radius: 0 0 0 13em;
}
.simon:before {
position: absolute;
content: "";
background-color: #101010;
height: 13.75em;
width: 13.75em;
z-index: 1;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 50%;
}
#count {
background-color: #ffffff;
font-size: 2.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
height: 2em;
width: 3em;
display: grid;
place-items: center;
border-radius: 0.3em;
}
.hide {
display: none;
}
.container {
background-color: #2f70ff;
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container button {
background-color: #ffffff;
font-size: 1.2em;
border: none;
outline: none;
padding: 1em 2em;
border-radius: 0.3em;
cursor: pointer;
}
.container p {
font-size: 2em;
color: #ffffff;
margin-bottom: 1em;
}
.container span {
font-weight: 600;
}
@media screen and (max-width: 600px) {
body {
font-size: 10px;
}
.wrapper {
height: 35em;
width: 35em;
}
}
Javascript:
Finally, we implement the functionality of the game using javascript. Once again copy the code below and paste it into your script file. We implement the functionality in 9 steps:
- Create Initial References
- Create Object To Map Current Colors to New Colors.
- Function To Start Game
- Implement Function To Decide The Sequence
- A Function To Get Random Value From Object
- Function To Play The Sequence
- Implement Function To Create Delay For Blink Effect
- Add Click Event Listener To Colors Button
- Function When Player Executes Wrong Sequence
//Initial References
const countValue = document.getElementById("count");
const colorPart = document.querySelectorAll(".color-part");
const container = document.querySelector(".container");
const startButton = document.querySelector("#start");
const result = document.querySelector("#result");
const wrapper = document.querySelector(".wrapper");
//Mapping Colors By Creating Colors Object
const colors = {
color1: {
current: "#068e06",
new: "#11e711",
},
color2: {
current: "#950303",
new: "#fd2a2a",
},
color3: {
current: "#01018a",
new: "#2062fc",
},
color4: {
current: "#919102",
new: "#fafa18",
},
};
let randomColors = [];
let pathGeneratorBool = false;
let count,
clickCount = 0;
//Function to start game
startButton.addEventListener("click", () => {
count = 0;
clickCount = 0;
randomColors = [];
pathGeneratorBool = false;
wrapper.classList.remove("hide");
container.classList.add("hide");
pathGenerate();
});
//Function to decide the sequence
const pathGenerate = () => {
randomColors.push(generateRandomValue(colors));
count = randomColors.length;
pathGeneratorBool = true;
pathDecide(count);
};
//Function to get a random value from object
const generateRandomValue = (obj) => {
let arr = Object.keys(obj);
return arr[Math.floor(Math.random() * arr.length)];
};
//Function to play the sequence
const pathDecide = async (count) => {
countValue.innerText = count;
for (let i of randomColors) {
let currentColor = document.querySelector(`.${i}`);
await delay(500);
currentColor.style.backgroundColor = `${colors[i]["new"]}`;
await delay(600);
currentColor.style.backgroundColor = `${colors[i]["current"]}`;
await delay(600);
}
pathGeneratorBool = false;
};
//Delay for blink effect
async function delay(time) {
return await new Promise((resolve) => {
setTimeout(resolve, time);
});
}
//When user click on the colors
colorPart.forEach((element) => {
element.addEventListener("click", async (e) => {
//if user clicks the same color then next level
if (pathGeneratorBool) {
return false;
}
if (e.target.classList[0] == randomColors[clickCount]) {
//Color blick effect on click
e.target.style.backgroundColor = `${
colors[randomColors[clickCount]]["new"]
}`;
await delay(500);
e.target.style.backgroundColor = `${
colors[randomColors[clickCount]]["current"]
}`;
//User click
clickCount += 1;
//Next level if number of valid clicks == count
if (clickCount == count) {
clickCount = 0;
pathGenerate();
}
} else {
lose();
}
});
});
//Function when player executes wrong sequence
const lose = () => {
result.innerHTML = `<span> Your Score: </span> ${count}`;
result.classList.remove("hide");
container.classList.remove("hide");
wrapper.classList.add("hide");
startButton.innerText = "Play Again";
startButton.classList.remove("hide");
};
That’s it for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also if you have any queries, suggestions or feedback drop them in the comments below.
Happy Coding!
English to hindi typing website source code