Babu Banarasi Das Institute of Technology, Ghaziabad

Department of Computer Science and Technology

A Mini Project Report

On
“SIMON GAME”

Submitted in the partial fulfillment of the requirements for the award of the Degree of

BACHELOROFTECHNOLOGY

IN

COMPUTER SCIENCE AND ENGINEERING

Submitted by

Aditya 2100350100001

Under the supervision of Ms.

Anvisha Sharma
 DECLARATION
I certify that,
1. The work contained in this report is original and has been done by me under the
guidance of my supervisor.

2. I have followed the guidelines provided by the institute in preparing the project report.

3. I have followed the Clean Code Principle, ensuring that the codebase of our project is
well-organized, readable, and maintainable. Using meaningful variable names, clear and
concise functions, proper indentation, and consistent formatting throughout the code.

4. During the development process of my project, I took inspiration from several resources
from the internet. YouTube and Stackoverflow helped me when I faced authentication
errors, and creating backend routes.

Signature: __________________

ADITYA

Date: __________________
 CERTIFICATE

This is to certify that the Project Report entitled, “Simon Game” for short, submitted by Mr.
Aditya under the coordination of Ms. Anvisha Sharma.

The project was carried out during the 5th SEMESTER (2023-24) at Babu Banarasi Das Institute
of Technology, Duhai, Ghaziabad affiliated with Dr. APJ Abdul Kalam Technical University,
Lucknow.
The work done is the result of the efforts of the project’s participants and has not been
submitted elsewhere for award of any other degree.

Ms. Anvisha Sharma

Project Coordinator

Department of Computer Science and Engineering

Babu Banarasi Das Institute of Technology

Duhai, Ghaziabad
 ACKNOWLEDGEMENTS

I would like to express our sincere gratitude to all those who provided their invaluable guidance
to the successful completion of the Simon Game project.

First and foremost, we extend our heartfelt thanks to Ms. Anvisha Sharma for her invaluable
guidance, support, and mentorship throughout the development process. Her expertise has
been instrumental in shaping the project as the backbone of this project.

Special thanks go to our respected teachers and classmates for their constructive feedback, and
suggestions during various stages of the project. Their collaboration and teamwork have greatly
enriched the project's outcomes.

Finally, we acknowledge the great content available on YouTube whose resources, or support
have contributed to the successful completion of the Simon Game. The creators making such
informative educational content on digital platforms are very appreciable and we should
support them for their hard work.

Signature: _____________________

Name: _____________________

Roll No: _____________________

Date: ______________________
 ABSTRACT

In today’s world, the game are very complex and required a lot
of investment of time and resource to master and have
fun.That’s why I made Simon game a fun simple creative game
of endless possibilities that everyone can play. The entire front
end of this project is made by Html,Css and javascript.The back
end of this project is handled entirely using Netlify. When you
enter the site for the first time you just have to press any key
then tile randomly blink with its specific sound then user have to
click on the same tile in order to move to next level which is also
present at top of the site. In order to move to next level we have
to click on the tile in the same order as they were shown from
start.

Example:-

let us give each style their separate name like Red, blue,
Green and Yellow

Level 1- Red tile blink and user click on the red tile

Great!! We proceed to next level

Level 2- Blue tile blink and user has to first click on all previous
tile in the same Order From the start as in the case he she first
click on red tile and then blue tile

Great!! Seems easy right but as we move on next level again and
again memorization of the tile in a specific manner seems tough

So this is the basic general idea about the game

Simon Game Project Introduction:

Welcome to our Simon Game project! This project is a tribute

to the classic electronic game of memory skill, Simon, which
was invented by Ralph H. Baer and Howard J. Morrison in the
late 1970s. The game was a pop culture symbol of the 1970s
and 1980s, captivating players with its engaging gameplay
and colorful interface.

In our rendition of this iconic game, we aim to recreate the

captivating experience of the original Simon game. The objective
of the game is simple yet challenging: players must repeat an
increasingly complex sequence of lights and sounds for as long
as possible. Each successful repetition results in the sequence
becoming longer, testing the player's memory skills to the limit.

This project is not only a nostalgic nod to a beloved game but

also an exploration of programming concepts such as random
sequence generation, user input handling, and simple animation.
We have used modern web technologies like JavaScript and HTML
to bring this game to life.

We hope you enjoy playing this game as much as we enjoyed

building it. So, get ready to test your memory skills and have
some fun!
Software Requirements:

HTML5: The latest version of HTML. It’s used to structure

the content on the web page.

CSS3: The latest version of CSS. It’s used to style the

HTML elements on the page. You’ll need to know how to
apply styles to HTML elements and how to use selectors,
classes, and ids.

JavaScript (ES6 or later): The programming language

used to make the web page interactive. You’ll need to
know how to manipulate the DOM, handle events, and
implement the game logic.

Web Browser: A modern web browser that supports

HTML5, CSS3, and JavaScript (like Google Chrome,
Mozilla Firefox, or Safari).

Text Editor: Any text editor suitable for coding like Visual
Studio Code, Sublime Text, or Atom.
GitHub: A GitHub account for version control and to host
the project using GitHub Pages.
Code:-

HTML:-

First page:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simon Game</title>
<link rel="icon" href="C:\Users\Vijaya Kumari\Downloads\simon_game_logo.jpeg"
type="image/x-icon">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
font-size: 3em;
}
a {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #ff0000;
 color: white;
text-decoration: none;
border-radius: 5px;
animation: bump 0.5s infinite;
}
@keyframes bump {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
body{
background-color:white;
}
html,body{
background-color: bisque;
}
</style>
</head>
<body>
<div>
<h1><u>Welcome to Simon Game!</u></h1>
<a href="32simongame.html">Start Game</a>
</div>
</body>
</html>

HTML:-

Second page:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simon game</title>
<link rel="icon" href="simon_game_logo.jpeg">
 <link rel="stylesheet" href="32simongame.css">
</head>
<body>
<h1>Simon game</h1>
<h2>Press any key to start the game</h2>
<div class="prbox">
<div class="contain1">
<div class="box red" id="red"></div>
<div class="box orange" id="orange"></div>
</div>
<div class="contain2">
<div class="box green" id="green"></div>
<div class="box purple" id="purple"></div>
</div>
</div>
<p id="prevScore"></p>

<script src="32simongame.js"></script>
</body>
</html>

CSS:-

For styling:-
h1,h2{
text-align: center;
color: rgb(246, 236, 100);
text-shadow: 2px 2px 4px rgba(249, 248, 248, 0.905);
}
html,body{
background-color: rgba(0, 0, 0, 0.945);
}
.prbox{

display: flex;
justify-content:center;
}
.box{
height: 100px;
width: 100px;
border:5px solid rgb(254, 250, 250);
border-radius: 10%;
margin: 10px;
transition: all 0.3s ease;
}
.red{
background-color: rgb(204, 94, 113);
box-shadow: 0 0 10px white;
}
.orange{
background-color: orange;
box-shadow: 0 0 10px white;
}
.green{
background-color: rgb(67, 172, 83);
box-shadow: 0 0 10px white;
}
.purple{
background-color: rgba(143, 93, 139, 0.928);
box-shadow: 0 0 10px white;

.flash{
background-color:white;
}
.userFlash{
background-color: rgb(0, 107, 139);

.box:active {
box-shadow: 0px 0px 10px 3px rgb(241, 238, 238);
}
/* html,body{
background-color: black;
} */
body {
height: 100vh; /* Viewport height */
}

Javascript:-

For backend:-

let gameseq = [];

let userseq = [];

let btns = ["red", "orange", "green", "purple"];

let started = false;

let level = 0;
let highestScore = 0;
// let prevHighestScore = 0;

let h2 = document.querySelector("h2");

document.addEventListener("keypress", function() {
if (!started) {
started = true;
levelUp();
}
});

function gameFlash(btn) {
btn.classList.add("flash");
sounds[btn.id].play();
 setTimeout(function() {
btn.classList.remove("flash");
sounds[btn.id].play();
}, 500);
}

function userFlash(btn) {
btn.classList.add("userFlash");
sounds[btn.id].play()
setTimeout(function() {
btn.classList.remove("userFlash");
}, 100);
}

async function levelUp() {

userseq = [];
level++;
h2.innerText = `Level ${level}`;

let randIdx = Math.floor(Math.random() * 4);

let randColor = btns[randIdx];
gameseq.push(randColor);
console.log(gameseq);

for (let i = 0; i < gameseq.length; i++) {

let color = gameseq[i];
let btn = document.querySelector(`.${color}`);
await new Promise(resolve => {
setTimeout(() => {
gameFlash(btn);
sounds[color].play();
resolve();
}, 350 * i);
});
}
}

let allBtns = document.querySelectorAll(".box");

for (let btn of allBtns) {
btn.addEventListener("click", btnPress);
}
function btnPress() {
let btn = this;
userFlash(btn);

let userColor = btn.getAttribute("id");

userseq.push(userColor);

checkAns(userseq.length - 1);
}

function checkAns(idx) {
if (userseq[idx] === gameseq[idx]) {
if (userseq.length === gameseq.length) {
setTimeout(levelUp, 1000);
if (level > highestScore) {
highestScore = level;
}
}
} else {
h2.innerHTML = `Game Over! Your score was <b>${level}</b>. Press any key
to start.`;
document.body.style.backgroundColor = "red";
document.addEventListener("keypress", resetTo);
}
}

function resetTo() {
started = false;
gameseq = [];
userseq = [];
level = 0;
document.body.style.backgroundColor = "black";
document.removeEventListener("keypress", resetTo);
console.log("The highest score is: " + highestScore);
}

let sounds = {
red: new Audio('simon_sound.mp3'),
orange: new Audio('simon_sound.mp3'),
green: new Audio('simon_sound.mp3'),
purple: new Audio('simon_sound.mp3')
};
Conclusion:-

Simon game is a simple, interactive, creative, imaginative and easy to

learn that also attract a very broad age group. In this we develop the
classic Simon game with javascript the object of the game is to repeat a
series of random tile click created by the game after each round the
sequence become progressively longer and more complex which make
it harder to remember.

Future scope:

Although this is a prototype the game and its idea are almost complete
and our product is ready to capture the industry market right out of the
box few other implementation which would not be implemented due
to technical limitation can we added in the future it is also worth
commercial purpose and is only developed for fun and education
purpose.

Game Page:- 12.0.0.1.5500/1simon_start_pg.html

Source of reference:-
Youtube = https://youtu.be/EWJ5uYwQJGU?si=a07oBmvgWYagpwef
Wikipedia = https://www.bing.com/ck/a?!&&p=1c752b0c08341a49JmltdHM9MTcw

Thank you……….