INTEGRATED PROJECT REPORT

On

SIMON-GAME

Submitted in partial fulfillment of the requirement for the

Course Integrated Project (CS 203) of

COMPUTER SCIENCE AND ENGINEERING

B.E. Batch-2019

in

JUNE-2022

Submitted By
Under the Guidance of
Aaryan
Roll. No. :- 1910990484
Shreyansh Chandel
Mr. Chaitanya Singla Roll. No. :- 1910991051
Professor

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

 CHITKARA UNIVERSITY
PUNJAB

1| P a g e

CERTIFICATE

This is to be certified that the project entitled “Simon Game” has been submitted for the
Bachelor of Computer Science Engineering at Chitkara University, Punjab during the academic
semester January 2022- May-2022 is a bonafide piece of project work carried out by “Aaryan,
Shreyansh Chandel” towards the partial fulfillment for the award of the course Integrated
Project (CS 203) under the guidance of “Mr. Chaitanya Singla” and supervision.

Sign. of Project Guide :

Mr. Chaitanya Singla
(Assistant Professor BE CSE)

CANDIDATE’S DECLARATION
We, Aaryan(1910990484), Shreyansh Chandel(1910991051) B.E.-2019 of the Chitkara
University, Punjab hereby declare that the Integrated Project Report entitled “Simon Game” is
an original work and data provided in the study is authentic to the best of our knowledge. This
report has not been submitted to any other Institute for the award of any other course.

Sign. of Student 1 Sign. of Student 2

Aaryan Shreyansh Chandel
1910990484 1910991051

Place: CHITKARA UNIVERSITY

Date: 27-06-2022

ACKNOWLEDGEMENT

It is our pleasure to be indebted to various people, who directly or indirectly contributed in the
development of this work and who influenced my thinking, behavior and acts during the course
of study.

We express our sincere gratitude to all for providing me an opportunity to undergo Integrated
Project as the part of the curriculum.

We are thankful to “Mr. Chaitanya Singla ” for his support, cooperation, and motivation
provided to us during the training for constant inspiration, presence and blessings.

We also extend our sincere appreciation to Mr. Chaitanya Singla who provided his valuable
suggestions and precious time in accomplishing our Integrated project report.
Lastly, We would like to thank the almighty and our parents for their moral support and friends
with whom we shared our day-to day experience and received lots of suggestions that improve
our quality of work.

Name of Student 1 Name of Student 2

Aaryan Shreyansh Chandel
1910990484 1910991051

ABSTRACT

In today’s world, the games are very complex and require a lot of
investment of time and resources to master
and have fun. That’s why we have made Simon Game, a fun,
simple, creative game of endless possibilities that
everyone can play.
The entire frontend of this project is made by HTML,CSS and
JAVASCRIPT.
The backend 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 the tile randomaly blink along 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 the 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 show from the start.
Example:-
let us give each tile their seperate names like Red, Blue, Green
and Yellow
Level 1 - Red tile blinks and user click on red tile
Great!! WE proceed to next level
Level 2 - Blue tile blinks and then user has to first clicks on all
previous tile in the same order from the start as in this case
he/she first click on red tile and then blue tile
Great!! seems easy right but as we move on to next level again
and again the memorization of the tile in a spefic manner seems
tough.
So this is the basic general Idea about the game.

Introduction
1. Statement of the Problem :- To make a singleplayer game named
Simon game. Our
game is based on 4 simple concepts :-
 Simplicity - there are no list of rules to read before playing.
 Creativity - playing it makes you creative.
 Party Game - it helps to increase interaction and provide
entertainment and
recreation.
 Memorization - makes your Memorization strong
2. Background :- This project is created with the intent of playful use
only. The
prerequisites for this program is computers/laptops/smartphones.
3. Purpose of Project :- Entertainment, having fun with our friends.
We all know
there are very few games which everyone loves to play and we assure
you that
this is one of them. The major Motivation was to learn how real-time
games
works and create a challenging project to learn as much as we can.
Making this
project came up with a lot of challenges and problems which gave us a
glimpse
of what software development is.

Software and Hardware Requirement Specification:

1. HTML5 - HTML, in full hypertext markup language, a formatting system for

displaying material retrieved over the Internet. Each retrieval unit is known as a Web

page (from World Wide Web), and such pages frequently contain hypertext links that

allow related pages to be retrieved.

2. CSS3 - Cascading Style Sheets (CSS) is a stylesheet language used to describe the

presentation of a document written in HTML or XML (including XML dialects such as

SVG, MathML or XHTML). CSS describes how elements should be rendered on

screen, on paper, in speech, or on other media.

3. JavaScript - JavaScript (often shortened to JS) is a lightweight, interpreted, object-

oriented language with first-class functions, and is best known as the scripting language

for Web pages, but it's used in many non-browser environments as well.

4. GitHub - GitHub is a distributed version-control platform where users can collaborate on or

adopt open source code projects, fork code, share ideas and more.

5. Netlify - Netlify builds, deploys, and hosts your frontend. Learn how to get started, find
examples, and access documentation for the modern web platform.

Program’s Structure Analyzing and GUI Constructing (Project

Snapshots) :
Starting:-
Levels:-

Game Over:-
Code:

1. HTML:
<!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>
<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>

2. CSS:
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;
}
3. JavaScript:

var buttonColours = ["red", "blue", "green", "yellow"];

var gamePattern = [];

var userClickedPattern = [];

var started = false;

var level = 0;

$(document).keypress(function() {
if (!started) {
$("#level-title").text("Level " + level);
nextSequence();
started = true;
}
});

$(".btn").click(function() {

var userChosenColour = $(this).attr("id");

userClickedPattern.push(userChosenColour);

playSound(userChosenColour);
animatePress(userChosenColour);

checkAnswer(userClickedPattern.length-1);
});

function checkAnswer(currentLevel) {

if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {

if (userClickedPattern.length === gamePattern.length){
setTimeout(function () {
nextSequence();
}, 1000);
}
} else {
playSound("wrong");
$("body").addClass("game-over");
$("#level-title").text("Game Over, Press Any Key to Restart");

setTimeout(function () {
$("body").removeClass("game-over");
}, 200);
 startOver();
}
}

function nextSequence() {
userClickedPattern = [];
level++;
$("#level-title").text("Level " + level);
var randomNumber = Math.floor(Math.random() * 4);
var randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);

$("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
playSound(randomChosenColour);
}

function animatePress(currentColor) {
$("#" + currentColor).addClass("pressed");
setTimeout(function () {
$("#" + currentColor).removeClass("pressed");
}, 100);
}

function playSound(name) {
var audio = new Audio("sounds/" + name + ".mp3");
audio.play();
}

function startOver() {
level = 0;
gamePattern = [];
started = false;
}

Conclusion:
Simon Game is a simple, interactive, creative, imaginative and easy to learn game that
also attracts 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 clicks created by the
game. After each round, the sequence becomes progressively
longer and more complex which makes 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 implementations which could not be
implemented due to
technical limitations can be added in the future.
It is also worth mentioning that dedicated servers can be used to increase the
performance, server overload
and bandwidth. Another benefit will involve handling huge number of users without
much of an overhead.
This game is out of scope for commercial purposes and is only developed for fun &
educational purposes.