KHWOPA SECONDARY SCHOOL

DEPARTMENT OF COMPUTER SCIENCE

Dekocha-06, BHAKTAPUR

A FINAL REPORT
FINAL REPORT
ON
"SNAKE GAME USING HTML"
A Report Submitted for the partial fulfilment of requirement for the degree of NEB
in computer science

Submitted by: Submitted To:

John Prajapati (413)
Department of Computer Science
Khwopa Secondary School
Nayan Thapa (422) Dekocha-06, Bhaktapur
Rojan Koju (436)
Samir Dulal (444)

UNDER THE GUIDANCE OF

…………………………….

Date of submission: 2080/ /

1|Page
 DEPARTMENT OF COMPUTER SCIENCE
KHWOPA SECONDARY SCHOOL
DEKOCHA-06, BHAKTAPUR

CERITFICATE
This is to certify that the project entitled “Programming with
HTML” submitted by Mr. Samir Dulal, Mr. Rojan Koju, Mr.
Nayan Thapa & Mr. John Prajapati in a partial fulfillment of the
requirements for the internal marks of Computer science in NEB
(National Examination Board) Class 11 (XI), is a bonafide work
to the best of my/our knowledge and may be placed before the
examination board for their consideration.
Panel of Examiners:
Name Signature Date
External Examiner

……………………

Project Supervisors

2|Page
 ACKNOWLEDGEMENT
We are thankful to all those who have helped us directly or
indirectly with this project. Foremost, we would like to thank
the Department of Computer Science of Khwopa Secondary
School for the giving an opportunity to carry out project entitled
"PC based Snake Game".
We would like to thank our computer teachers Er. Pujan
Changubhari for their guidance while developing project and
also for organizing the project schedules. Also we would like to
acknowledge their effort that encouraged us to take this
challenging project. We would also like to thanks our brother
Amit Achara to helping for developing the project. We would
also like to offer our gratitude towards some of our friends who
helped throughout our project development phase by providing
several references regarding different links for code and making
project report.

3|Page
 ABSTRACT
This is our project related with one of the famous "snake game".
Nowadays most of the people in this world love to play video
games. To provide a video game for them we create our new
HTML project “Snake Game”. In this game you will enjoy. You
will get task eat apple there from you can enjoy. If you touch the
border of given certain area and the body of the snake by its
head you will be out from this game you have to click start play
game again. The main objective of this project is to provide the
enjoyment in which we can get by playing video game.

Content

4|Page
 s
INTRODUCTION..................................................................................6

BACKGROUND............................................................................................................................ 6
OBJECTIVES................................................................................................................................ 6
APPLICATIONS............................................................................................................................ 7
SCOPE AND LIMITATIONS........................................................................................................... 7

METHODOLOGY.................................................................................8

CODE FOR THE GAME.................................................................................................................8

HTML Structure:......................................................................................................................8
JavaScript:.............................................................................................................................. 9
BLOCK DIAGRAM...................................................................................................................... 12
TOOLS AND PLATFORM............................................................................................................ 13

DISCUSSION & CONCLUSION.............................................................14

DISCUSSION..............................................................................................................................14
CONCLUSION............................................................................................................................14

APPENDIX.........................................................................................15

APPENDIX -2............................................................................................................................. 16
APPENDIX- 3............................................................................................................................. 17
APPENDIX -4............................................................................................................................. 19

REFERENCE.......................................................................................21

5|Page
 INTRODUCTION
BACKGROUND
Technology is rapidly increasing in today’s world. Internet is one of the
rapidly increasing technologies. The use and user are increasing day by
day. Nowadays, people are using internet for communication,
collaboration, and many others things that done online. With the
development of internet, computer programming is also developed
rapidly in the modern era. Computer Programming is the fundamental
skills for so many different applications, not just software development
or cutting-edge research into artificial intelligence. Through the help of
computer programming we can do research and development,
government operations, web development and designs, marketing and
business operations, data science and artificial intelligence, cyber
security etc.

In the world of programming, we have visualized a small project based

on HTML programming code and we have designed a simple PC based
snake game. Getting the theoretical knowledge from the classroom, we
designed a simple demonstration of the use of canvas, script, and
function in the program.

OBJECTIVES
To familiar with the use of HTML programming in realistic manner
To learn how to use canvas, script, function in the program
To be able to design a simple application by use of HTML codes

6|Page
APPLICATIONS
To show how the code really works
To provide general knowledge about HTML programming
To demonstrate that how coding is important in modern era

SCOPE AND LIMITATIONS

The first and foremost things are our country is lacking on the
development of internet and skilled programmers. So the scope of our
project is to make everyone an eligible programmer and able to design
software, applications in our own country.
The limitations are people don’t have computers in their home to
practice programming and familiarized with it.

7|Page
 METHODOLOGY

CODE FOR THE GAME

We have used the following codes to create our website.
HTML Structure:

 `<!DOCTYPE html>`: Declares the document type and

version of HTML being used.
 `<html lang="en">`: Specifies the document's language.
 `<head>`: Contains metadata, including the character set
and the title of the page.
 `<center>`: Deprecated HTML tag used to center content.
It's generally recommended to use CSS for centering.
 `<body bgcolor="black">`: Sets the background color of
the body to black.
 `<canvas id="game_field" width="600px" height="600px"
style="border: 10px solid brown">`: Creates an HTML5
canvas element with an ID of "game_field," width and
height of 600 pixels each, and a brown border.

8|Page
JavaScript:
- Immediately Invoked Function Expression (IIFE): Wraps the entire
JavaScript code within a function that is immediately invoked. This is a
common pattern to avoid polluting the global namespace.
 Constants and Variables:
¤ `CELLS_COUNT`: Defines the number of cells in
each row/column of the game grid.
¤ `CELL_SIZE`: Calculates the size of each cell based
on the canvas width and the number of cells.
¤ `snake`: An array to store the positions of the snake's
segments.
¤ `food`: An object representing the position of the food
on the canvas.
¤ `dir`: Keeps track of the current direction the snake is
moving.
¤ `score`: Tracks the player's score.
¤ `speedCoeff`: A coefficient affecting the speed of the
snake.

 Colors:
¤ `FIELD_COLOR`, `FOOD_COLOR`,
`GRID_COLOR`, `SNAKE_COLOR`: Constants
representing colors used in the game.

9|Page
 Event Listener:
¤ Listens for key down events to change the direction of
the snake based on arrow key presses.

 Drawing Functions:
¤ `draw_field()`: Draws the game field, including the
background and grid.
¤ `draw_food()`: Draws the food on the canvas.
¤ `draw_snake()`: Draws the snake on the canvas.

 Initialization and Game Logic:

¤ `init()`: Initializes the game state, setting up the snake,
direction, score, and spawning the initial food.
¤ `isContact(fieldObj)`: Checks if a given position (food
or snake) is in contact with the snake.
¤ `isValid(pos)`: Checks if a given position is within the
boundaries of the canvas.
¤ `spawn_food()`: Randomly places food on the canvas,
ensuring it does not overlap with the snake and is a
valid position.
¤ `step()`: Handles the main game logic, including snake
movement, collision detection, scoring, and updating
the canvas. The function is recursively called with a
timeout to create the game loop.

10 | P a g e
 Initialization and Game Start:
¤ `init()` is called to set up the initial game state.
¤ `step()` is called to start the game loop

11 | P a g e
BLOCK DIAGRAM
Main screen Game will automatically start when you
g open program

You have to control snake and have to eat

apple for scoring

You have to use direction keys for controlling

snake

If you press down If you press up arrow If you press left arrow If you press right
arrow the snake will the snake will goes the snake will goes arrow the snake will
goes downward upward toward left goes toward right

During controlling the snake you only have to touch

apple by the front block (mouth)of the snake

If you touch the wall of the laying area or in the body

of the snake you will lose the game

If you lose the game you will see there a box having
your total score of this game and an option "ok" if
you click on ok the game will restart

12 | P a g e
TOOLS AND PLATFORM

The tools we used to create our project is notepad which is a

sophisticated text editor for code, markup and prose. It is mostly used by
beginner. You'll love the slick user interface, extraordinary features and
amazing performance. We use Hypertext Markup Language HTML for
coding.
The platform we used to view the final report of webpage is Browser
like:- (Chrome, Internet explorer, Opera mini, etc..).

13 | P a g e
 DISCUSSION & CONCLUSION
DISCUSSION
By doing the project of html we are able to create simple game and
design it. In this project we able to provide the information related on
how we can use canvas and how we can specify JavaScript in HTML .

CONCLUSION
In conclusion, the basic snake game project in HTML provides a simple
yet functional platform for users to entertainment. The game which
designed is PC based so, it can't be lay on mobile phone or in tablet. But
it is must interesting game.

14 | P a g e
 APPENDIX
 This is the main screen that appears at the first after compiling and
running the program.

Figure 0-1

15 | P a g e
APPENDIX -2
 This is the next screen when we lose the game or we are out from
game.

Figure 0-2

16 | P a g e
APPENDIX- 3

 This is the program code to develop the snake game.

 Script tag is used to specify JavaScript in HTML.

Figure 0-3

Figure 0-4

17 | P a g e
Figure 0-5

Figure 0-6

18 | P a g e
APPENDIX -4

 This program is done in notepad which is the easy to operate.

Figure 0-7

Figure 0-8

19 | P a g e
 Figure 9

REFERENCE

1) Buddha publication computer book class 11.

2) https://www.codingnepalweb.com

3) https://chat.openai.com

20 | P a g e
21 | P a g e