Department of Computer Application

Mini-Project Reported On
“SNAKE GAME”
Project carried out
By
Pragyesh Kumar Seth 2158071
Anand Raj Bind 2158017
Hritik Sonkar 2158052
Alok Kumar Maurya 2158011

Under the Supervision of

Dr. Mithilesh Kumar Pandey
Assistant Professor
Department of Computer Application
Submitted to
Prof. Noopur Goel
Professor & Head
Department of Computer Application
 CERTIFICATE
V.B.S. PURVANCHAL UNIVERSITY
(Session 2021-24)

This is to certify that project entitled "SNAKE GAME" submitted

by "PRAGYESH KUMAR SETH" student of BCA 3rd Year examination
of VEER BAHADUR SINGH PURVANCHAL UNIVERSITY during the
academic year 2023-24. It is original work carried out under the
supervision and guidance by DR. MITHILESH KUMAR PANDEY under
goes for the project.

Date: / /2024

Head of Department
(Prof. Noopur Goel)
Internal Examiner External Examiner

i
 ACKNOWLEDGEMENT

I would like to express my profound gratitude to Prof.

NOOPUR GOEL, HEAD OF DEPARTMENT of COMPUTER
APPLICATION of V.B.S. PURAVNCHAL UNIVERSITY for their
contributions to the completion of my project titled “SNAKE
GAME”.

I would like to express my special thanks to our mentor

Dr. MITHILESH KUMAR PANDEY for his time and efforts he
provided throughout the semester. Your useful advice and
suggestions were really helpful to me during the project’s
completion. In this aspect, I am eternally grateful to you. I am
also thankful to my colleagues for continuously inspiring us
to complete this project.

Last but not least I express my deep sense of gratitude

to my parents who have given me a plenteous of moral
support and without whose invigoration and understanding it
would not have been virtually possible for me to achieve this
success.

I would like to acknowledge that this project was

completed entirely by me and my team and not by someone
else.

Pragyesh Kumar Seth

BCA Vth semester
2158071
ii
 DECLARATION

I hereby declare that we have successfully designed and implemented

the project on "SNAKE GAME".
This project is under V.B.S.P.U, Jaunpur and in the guidance of PROF.
NOOPUR GOEL is partial fulfillment of the requirement for the award of the
degree of Bachelor of Computer Applications and submitted to the institution
is an authentic record of my own work carried out during the period 05
October 2023 to 04 January 2024. I also cited the reference about the text(s)
figures(s)/tables(s) from where they have been taken.
The matter presented in this project report has not been submitted
elsewhere for the award of any other degree or diploma from any institutions.

Date: ..../..../2024 Signature of the candidate

This is to certify that the above statement by the candidate is correct to
the best of my knowledge.

Date: ..../..../2024 Signature of the Research supervisor

The Viva-voce examination of PRAGYESH KUMAR SETH (BCA) student has been
held on.............................

Signature of External Examiner Signature of Head of the Department

iii
 PROJECT REPORT
ON
SNAKE GAME

TABLE OF CONTENTS

S. No. Title Page No.

01 Certificate i
02 Acknowledgement ii
03 Declaration iii
04 Abstract 1
05 Introduction 2-4
06 Literature Survey 5
07 System Design 6
08 System and Hardware requirements 7-8
09 Functional Requirements 9
10 Non-Functional Requirements 10-11
11 Working Algorithm 12
12 Sample Output 13
13 Conclusion 14
14 Future Scope 15
15 References 16
16 Source Code 17-28
17 Output 29
 ABSTRACT

Snake game is a simple console application without

graphics. In this project, you can play the popular “Snake
Game” just like you played it elsewhere. You have to use the
up, down, right or left arrows to move the snake. Foods are
provided at the several co-ordinates of the screen for the
snake to eat. Every time the snake eats the food, its length
will by increased by one element along with the score. I have
used HTML, CSS AND JavaScript as programming languages
for writing the code for this project and VS Code for writing
the programs. Operating system used is Windows 11.

1
 INTRODUCTION

Playing games is fun and exciting it gives us relief from

stress and unwind from our stressful works. Many of us
spend our vacant time or others that use most of their time
in playing and exploring new games. Today, with the rapid
development of technology we have, games that are rising up
together with it. Nowadays with the technology we have
many games that are developing for computer most
specifically for windows. With the high technology equipped
with these computers, computer games become robust and
attract many people to buy or have this gadget for them to
experience what’s inside it which makes it a trend for the
new generation of gadget. Snake game is a computer action
game; whose goal is to control a snake to move and collect
food in a map. It has been around since the earliest days of
home computing and has re-emerged in recent years on
mobile phones. It isn’t the world’s greatest game, but it does
give you an idea of what you can achieve with a simple HTML,
CSS & JavaScript program, and perhaps the basis by which to
extend the principles and create more interesting games on
your own. To move the snake, use ‘up arrow’ for up, ‘down
arrow’ for down, left arrow for left and ‘right arrow’ for right.
Press any key to continue the game. The aim of the game is to
collect the dots (food) and avoid the obstacles (crosses
borders). As you collect the food, the snake gets longer and
the score also increases as snake eats food. There is no

2
concept of lives. Once you hit an obstacle, that’s it, game
over.

3
4
 LITERATURE SURVEY

The history of
the Snake game goes back to the 1970's, the concept
originated in the 1976 arcade game Blockade, and its
simplicity has led to many implementations. However, it was
the1980'swhen the game took on the look that we will be
using. It was sold under numerous names and many
platforms but probably gained widespread recognition when
it was shipped as standard on Nokia mobile phones in the
late 1990's. The first published Nokia, for monochrome
phones. It was programmed in1997 by Taneli Armanto of
Nokia and introduced on the Nokia 6110.The game involves
controlling a single block or snakehead by turning only left or
right by ninety degrees until you manage to eat an block.
When you get the block, the Snake grows an extra block or
body segment. If, or rather when, he snake bumps into the
edge of the screen or accidentally eats himself the game is
over. The more blocks the snake eats the higher the score.

5
 SYSTEM DESIGN

To create a Snake game that allows users to control the

movement of a snake on a screen, to get points for eating food and
avoiding running into the walls or the growing tail of the snake itself.
In this problem, we want to write a game where a graphical
representation of a snake moves across the screen. When it
encounters a piece of food, the snake grows longer and we gain a
point. If it hits the wall we die. To write this program we are going to
need:

● A way of representing the snake.

● A way of representing the food.
● A way to display the score.
● a way for our instructions to reach the snake.
● and a way to know when we’ve run into something and died.

Our system is going to involve working with both hardware and

software, and so we will need to understand what we have available
in hardware that can assist us. If we build our software so that the
snake is controlled by directional arrows on the keyboard. Now that
understand how our hardware will work in the design of our system,
let’s move on to starting the design of our software system.

6
 SYSTEM
AND
HARDWARE REQUIREMENTS

SYSTEM REQUIREMENTS

Software requirement Specification:

A set of programs associated with the
operation of a computer is called software.
Software is the part of the computer system,
which enables the user to interact with several
physical hardware devices. The minimum
software requirement specifications for
developing this project are as follows:

OPERATING SYSTEM : WINDOWS XP or Higher

IDE : VS CODE
FRONT END : WINDOWS
LANGUAGES : HTML, CSS & JavaScript

7
 HARDWARE REQUIREMENTS

• Intel P4 1.5GHz or above

• 512MB RAM
• 80GB HDD Minimum

8
 FUNCTIONAL REQUIREMENTS

Here are the requirements (functional requirements)

for how the snake moves.
1. The snake must appear to move around the screen.
2. The snake must turn in response to user input.
3. The snake will increase in length if it eats food.
4. The snake will die if it runs into the walls.
5. The snake never stops moving.

9
 NON-FUNCTIONAL REQUIREMENTS

The primary features of IT projects involve

implementing like an application, a piece of
infrastructure, a patch. In this specific context
functional requirements tells us about what project
does when interacted, whereas non-functional
requirements describe about the bounds of
performance should be.

I. Robustness:
Robustness is nothing but its ability that it can
tolerate the affects of system functional body. And it
can also be defined as its systems ability that it can
withstand to change without transforming its initial
stable configuration.

II. Reliability:
The system is trustworthy and it is consistently
good in performance. It can also be stated as the
system performs the function without any failure under
certain conditions and specified period of time.

10
III. Availability:
The system is available 24*7. Availability and
Reliability are directly proportional as reliability
increase availability also increases. The user can have
access to the system all the time.

IV. Reusability:
The system can be used any number of times by
the specific user. And the reusability is consistent,
adaptable and stable.

V. Effectiveness:
The algorithm is capable of producing desired
result or it has the ability to provide better results.

11
 WORKING ALGORITHM

Let's look at how a program to run the whole game

might look:
1. Draw the playing area with bounding rectangle, set
the counter to zero and display it.
2. Draw the snake in a starting position.
3. Draw the food in a starting location.
4. On user input, change snake direction.
5. Move the snake one move
6. If the snake is over food, eat it, increase the score,
grow, move the food,
7. Else if the snake is over in a wall, die.
8. Go back to 4.
9. Until the snake die

12
SAMPLE OUTPUT

13
 CONCLUSION

The project in HTML, CSS & JavaScript of Snake Game is

a simple console application with very simple graphics.
In this project, you can play the popular “Snake Game”
just like you played it elsewhere. You have to use the
up, down, right, or left arrows to move the snake.
Foods are provided at the several co-ordinates of the
screen for the snake to eat. Every time the snake eats
the food, its length will increased by one element along
with the score. It isn’t the world’s greatest game, but it
does give you an idea of what you can achieve with a
relatively simple HTML, CSS & JavaScript, and perhaps
the basis by which to extend the principles and create
more interesting games on your own.

14
 FUTURE SCOPE

In this project, I have used simple application, this

project will be able to implement in future after making
some changes and modifications as I made this project
at low level. The modifications that can be done in this
project are:
1. It can be made with good graphics.
2. We can add more options like Top scores and Player
Profile.
3. We can add multiplayer option.

15
 REFERENCES

• Class Lectures
• Project Supervisor
• https://youtu.be/2ZDnw6ifdSI?si=lsxmseaj8YT6UV
af
• https://www.scribd.com/document/631803562/sn
ake-game-project-report

16
 SOURCE CODE

index.html:

<!-- FILEPATH: /D:/Snake-game-project-miniproject/index.html -->

<!--
This is the main HTML file for the Snake Game project.
It contains the structure and layout of the game interface.
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bhaag Snake Bhaag</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="body">
<div id="scoreBox">Score: 0</div>
<div id="hiscoreBox">Hi score: 0</div>
<div id="board"></div>
</div>

17
</body>
<script src="./js/script.js"></script>
</html>

18
style.css:

/**
* FILEPATH: /D:/Snake-game-project-miniproject/css/style.css
*
* This CSS file contains the styling for a snake game project.
* It imports a Google Fonts stylesheet and sets some global styles.
* The body element is styled to have a background image and be centered on
the page.
* The scoreBox and hiscoreBox elements are positioned and styled for
displaying scores.
* The board element represents the game board and is styled with a gradient
background and grid layout.
* The head, snake, and food elements are styled for the game components.
*/
@import
url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
*{
padding: 0;
margin: 0;
}

.body {
background: url("../img/bg.jpg");
min-height: 100vh;
background-size: 100vw 100vh;
background-repeat: no-repeat;

19
 display: flex;
justify-content: center;
align-items: center;
}

#scoreBox {
position: absolute;
top: 9px;
right: 200px;
font-size: 39px;
font-weight: bold;
font-family: 'New Tegomin', serif;
}

#hiscoreBox{
position: absolute;
top: 59px;
right: 140px;
font-size: 39px;
font-weight: bold;
font-family: 'New Tegomin', serif;
}

#board {
background: linear-gradient(#2a9c2a, #d8d840);
width: 90vmin;

20
 height: 92vmin;
border: 2px solid #ff0000;
display: grid;
grid-template-rows: repeat(18, 1fr);
grid-template-columns: repeat(18, 1fr);
}

.head {
background: linear-gradient(#c43b3b, #c7c748);
border: 2px solid purple;
transform: scale(1.02);
border-radius: 19px;
}

.snake {
background-color: #800080;
border: .25vmin solid white;
border-radius: 120px;
}

.food {
background: linear-gradient(#ff0000, #800080);
border: .25vmin solid black;
border-radius: 8px;

21
script.js:

/**
* FILEPATH: /D:/Snake-game-project-miniproject/js/script.js
*
* This JavaScript contains all the logic for snake game project.
* It also contains the music that is used in game.
*/

// Game Constants & Variables

let inputDir = { x: 0, y: 0 };
const foodSound = new Audio('music/food.mp3');
const gameOverSound = new Audio('music/gameover.mp3');
const moveSound = new Audio('music/move.mp3');
const musicSound = new Audio('music/music.mp3');
let speed = 5;
let lastPaintTime = 0;
let score = 0;
let snakeArr = [
{ x: 13, y: 15 }
];
food = { x: 6, y: 7 };

// Game Functions

22
function main(ctime) {
window.requestAnimationFrame(main);
if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
return;
}
lastPaintTime = ctime;
gameEngine();
}
function isCollide(snake) {
// If you bump into yourself
for (let i = 1; i < snakeArr.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
return true;
}
}
// If you bump into the wall
if (snake[0].x >= 19 || snake[0].x <= 0 || snake[0].y >= 19 || snake[0].y <= 0) {
return true;
}
}
/**
* Executes the game engine logic.
*/
function gameEngine() {
// Part 1: Updating the snake array
if (isCollide(snakeArr)) {

23
 gameOverSound.play();
musicSound.pause();
inputDir = { x: 0, y: 0 }
alert("Game Over. Press any key to play again!");
snakeArr = [{ x: 13, y: 15 }];
musicSound.play();
score = 0;
}

// If you have eaten the food, increment the score and regenerate the food
if (snakeArr[0].y === food.y && snakeArr[0].x === food.x) {
foodSound.play();
score += 1;
if (score > hiscoreval) {
hiscoreval = score;
localStorage.setItem("hiscore", JSON.stringify(hiscoreval));
hiscoreBox.innerHTML = "HiScore: " + hiscoreval;
}
scoreBox.innerHTML = "Score: " + score;
snakeArr.unshift({ x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y
});
let a = 2;
let b = 16;
food = { x: 2 + Math.round(a + (b - a) * Math.random()), y: 2 +
Math.round(a + (b - a) * Math.random()) }
}

24
// Moving the snake
for (let i = snakeArr.length - 2; i >= 0; i--) {

snakeArr[i + 1] = { ...snakeArr[i] };
}
snakeArr[0].x += inputDir.x;
snakeArr[0].y += inputDir.y;

// Part 2: Display the snake and food

// Displaying the snake
board.innerHTML = "";
snakeArr.forEach((e, index) => {
snakeElement = document.createElement('div');
snakeElement.style.gridRowStart = e.y;
snakeElement.style.gridColumnStart = e.x;
snakeElement.classList.add('snake');
if (index === 0) {
snakeElement.classList.add('head');
} else {
snakeElement.classList.add('snake');
}

board.appendChild(snakeElement);
})
// Displaying the food

25
 foodElement = document.createElement('div');
foodElement.style.gridRowStart = food.y;
foodElement.style.gridColumnStart = food.x;
foodElement.classList.add('food');
board.appendChild(foodElement);

// Main logic starts here

let hiscore = localStorage.getItem("hiscore");

if (hiscore === null) {
hiscoreval = 0;
localStorage.setItem("hiscore", JSON.stringify(hiscoreval))
}
else {
hiscoreval = JSON.parse(hiscore);
hiscoreBox.innerHTML = "HiScore: " + hiscore;
}
window.requestAnimationFrame(main);
window.addEventListener('keydown', e => {
inputDir = { x: 0, y: 1 } // Start the game
musicSound.play();
moveSound.play();
switch (e.key) {

26
case "ArrowUp":
console.log("ArrowUp");
inputDir.x = 0;
inputDir.y = -1;
break;

case "ArrowDown":
console.log("ArrowDown");
inputDir.x = 0;
inputDir.y = 1;
break;

case "ArrowLeft":
console.log("ArrowLeft");
inputDir.x = -1;
inputDir.y = 0;
break;

case "ArrowRight":
console.log("ArrowRight");
inputDir.x = 1;
inputDir.y = 0;
break;

default:
break;

27
 }
});

28
OUTPUT

29