GURU JAMBHESHWAR UNIVERSITY OF
SCIENCE AND TECHNOLOGY , HISAR
Name : Nidhi
Roll No. : 210010130084
Class : B.Tech CSE B-2 (6th Semester)
Submitted to : CSE Department
Tabels of contents
Sr. No. Title Page No.
1 Certificate 4
2 Acknowledgement 5
3 Introduction 6
4 Technology used 7-10
5 Development Tools 11-12
6 Source Code 13-17
7 Output 18
8 Resources 19
Declaration
I, Nidhi Yadav , Student of B. Tech. CSE declares that the
project titled “Simon Game” is original and is developed by me
and is submitted to the Department of Computer Science and
Engineering, Guru Jambheshwar University of Science and
Technology, Hisar.
Date : 11th Jan 2024
NIDHI YADAV
210010130084
WEB DEVELOPMENT COURSE CERTIFICATE
Acknowledgement
"You were born to win, but to be a winner, you must plan to win,
prepare to win, and expect to win." - a quote by Jim Rohn.
What it really means is - to do your best in order to achieve
anything in life, to win in life. This type of thinking really helps to
improve yourself and to learn with this attitude makes things
more easier than they really are. By completing this project , I
gained confidence in this field and am willing to work on
upcoming opportunities, getting excited to do some full time
projects in this field. Learning never leaves you, instead it helps
you to grow as a better person/ individual and with learning,
you always look forward in life for more opportunity. At the
same time, completing these projects successfully, i gained a
lot confidence to work as professional and working on this web
development project and during the development of this web
page application , free sources available on google helped me
alot in this project, thanks to those services, feeling like to do
something big in this field as i am looking forward to work as a
freelancer in this field.
Nidhi Yadav
210010130084
Project Simon Game :
Introduction
Project Simon Game is a web development-based project which uses
HTML, CSS, Javascript for its implementation. It is a game. It aims to
entertain the user and help them to kill time. It consists of four buttons of
different colors and with different levels. The user have to click the
specific button blinked on the screen for different levels. The buttons are
uniquely designed with black outline of definite thickness. The first text
on the screen would appear to press A key to start and then it allows the
user to click on the button blinked by the game. It is conditional that if
you have completed the task then you will go to next level, if not then
restart the game from zero by pressing any key. This game is based on
the real-life simon game which has the same principle.
This game uses colored buttons, lights, and sounds as directional
prompts, the Simon game engages cognitive function that function that
works on sequestial processing, short-term memory, attention and visual
processing.
The device has four colored buttons, each producing a particular tone
when it is pressed or activated by the device. A round in the game
consists of the device lighting up one or more buttons in a random order,
after which the player must reproduce that order by pressing the buttons.
As the
game progresses, the number of buttons to be pressed increases. (This
is only one of the games on the device; there are actually other games
on the original.)
These all functionalities make our project user friendly and admin
friendly. We worked as a team in this project and are still working on it to
improve its interface.
Technology Used
HTML or HyperText Markup Language is the standard markup language
for documents designed to be displayed in a web browser. It can be
assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML
describes the structure of a web page semantically and originally
included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be
embedded into the rendered page. HTML provides a means to create
structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes, and other items. HTML
elements are delineated by tags, written using angle brackets. Tags
such as <img/> and <imput/> and directly introduce content into the
page. Other tags such as surround and provide information about
document text and may include other tags as sub-elements. Browsers
do not display the HTML tags but use them to interpret the content of the
page. HTML is a markup language that defines the structure of your
content.
A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering
an URL. A Web page can be of the static or dynamic type. With the help
of HTML only, we can create static web pages.
HTML can embed programs written in a scripting language such as
JavaScript, which affects the behaviour and content of web pages. The
inclusion of CSS defines the look and layout of content. The World Wide
Web Consortium (W3C), former maintainer of the HTML and current
maintainer of the CSS standards, has encouraged the use of CSS over
explicit presentational HTML since 1997.
CSS (Cascading Style Sheets) is a style sheet language used for
describing the presentation of a document written in a markup language
such as HTML or XML (including XML dialects such as SVG, MathML or
XHTML). CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript. CSS is designed to enable the
separation of content and presentation, including layout, colours, and
fonts. This separation can improve content accessibility; provide more
flexibility and control in the 7 specification of presentation characteristics;
enable multiple web pages to share formatting by specifying the relevant
CSS in a separate .css file, which reduces complexity and repetition in
the structural content; and enable the .css file to be cached to improve
the page load speed between the pages that share the file and its
formatting.
The name cascading comes from the specified priority scheme to
determine which style rule applies if more than one rule matches a
particular element. This cascading priority scheme is predictable.
Before CSS, nearly all presentational attributes of HTML documents
were contained within the HTML markup. All font colors, background
styles, element alignments, borders, and sizes had to be explicitly
described, often repeatedly, within the HTML. CSS lets authors move
much of that information to another file, the style sheet, resulting in
considerably simpler HTML. And additionally, as more and more devices
are able to access responsive web pages, different screen sizes and
layouts begin to appear. Customizing a website for each device size is
costly and increasingly difficult. The modular nature of CSS means that
styles can be reused in different parts of a site or even across sites,
promoting consistency and efficiency.
JAVASCRIPT is a programming language that adds interactivity to your
website. This happens in games, in the behaviour of responses when
buttons are pressed or with data entry on forms; with dynamic styling;
with animation, etc. This article helps you get started with JavaScript and
furthers your understanding of what is possible.
JavaScript's dynamic capabilities include runtime object construction,
variable parameter lists, function variables, dynamic script creation.
JavaScript has many more features we could discuss, but I
hope this article has given you a clear starting point to go
further. Now you should know what the language is and how
you can use it on the web.
In this article, we've looked at how to add JavaScript code to
our HTML files, the different types of data that JavaScript
supports, variables that serve as containers for values, how
to write comments in JavaScript, and a little bit about how to
declare and use functions.
When you’re working with HTML, styles, and scripts and
you’re working on a big project, we are recommended
separate files in different folders. Have all of your CSS files
in one folder and all your JavaScript files in another folder. Do
the same for your HTML files.
Web development refers to the creating, building, and
maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and database
management. It is the creation of an application that works
over the internet i.e. websites.
Frontend Development
The part of a website where the user interacts directly is
termed as front end. It is also referred to as the ‘client side’ of
the application.
A Front-End Developer is someone who creates websites and
web applications.
The difference between Front-End and Back-End is that Front-
End refers to how a web page looks, while back-end refers to
how it works. You can think of Front-End as client-side and
Back-End as server-side.The basic languages for Front-End
Development are HTML, CSS, and JavaScript.
The main responsibility of the Front-End Developer is
the User interface.
Backend Development
Backend is the server side of a website. It is part of the
website that users cannot see and interact with. It is the
portion of software that does not come in direct contact with
the users. It is used to store and arrange data.
Most common example of Backend programming is when you are
reading an article on the blog. The fonts, colors, designs, etc. constitute
the frontend of this page. While the content of the article is rendered
from a server and fetched from a database. This is the backend part of
the application.
The back-end team may need to create an application around the front-
end and support it. Moreover, they need to make sure that the website
opens up and functioning properly.
Back-end Development refers to the server-side development. It
focuses on databases, scripting, website architecture. It contains
behind-the-scene activities that occur when performing any action on a
website. It can be an account login or making a purchase from an online
store. Code written by back-end developers helps browsers to
communicate with database information.
Development Tools
Atom was a free and open source text and source code
editor for macOS, Linux and Windows with support for plug-ins written
in JavaScript, and embedded Git Control. Developed by Github, Atom
was released on June 25, 2015.
Most of the extending packages have free software licenses and are
community-built and maintained.
On June 8, 2022, GitHub announced that Atom's end-of-life would occur
on December 15 of that year, "in order to prioritize technologies that
enable the future of software development", specifically its GitHub
Codespaces and Microsoft's VS Code.
GITHUB is a Git repository hosting service that provides a web-based
graphical interface. It is the world’s largest coding community. Putting a
code or a project into GitHub brings it increased, widespread exposure.
Programmers can find source codes in many different languages and
use the command-line interface, Git, to make and keep track of any
changes. GitHub helps every team member work together on a project
from any location while facilitating collaboration. You can also review
previous versions created at an earlier point in time. So now we know
what Git and GitHub are. Time to gain a better understanding of the
importance and relevance of GitHub by exploring its features.
VISUAL STUDIO CODE (famously known as VS Code) is a free open
source text editor by Microsoft. VS Code is available for Windows, Linux,
and macOS. Although the editor is relatively lightweight, it includes some
powerful features that have made VS Code one of the most popular
development environment tools in recent times. VS Code supports a
wide array of programming languages from Java, C++, and Python to
CSS, Go, and Dockerfile. Moreover, VS Code allows you to add on and
even create new extensions including code linters, debuggers, and cloud
and web development support. The VS Code user interface allows for a
lot of interaction compared to other text editors. To simplify user
experience, VS Code is divided into five main regions:
● The activity bar
● The sidebar
● Editor groups
● The panel
● The status bar
Source Code
The first step is to create a new folder with name Simon Game.
Open this folder in the VS Code and then create three new file with
following names :
game.js
index.html
style.css
This order is used to write the specific code accordingly :
index.html
<html lang="en" dir="ltr"><head>
<meta charset="utf-8">
<title>Simon Game</title>
<link rel="stylesheet" href="styles.css">
<link href="style.css" 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>
styles.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;
}
game.js
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;
}
Output
Output when answer flow is wrong, we have to restart by
pressing on any key.
Resources
https://www.udemy.com/
https://www.youtube.com/
https://code.visualstudio.com/
https://github.com/
