KHWOPA SECONDARY SCHOOL

DEPARTMENT OF COMPUTER SCIENCE

Dekocha-06,BHAKTAPUR

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

Submitted To:
Submitted Department of Computer
by:
Science
Khwopa Secondary School
John Prajapati Dekocha-06, Bhaktapur
(413)
Nayan Thapa
UNDER THE GUIDANCE OF
(422)
…………………………….

Date of submission: 2080/ /

 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 (Nepal Education 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
 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 teacher 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.
 ABSTRACT
This is our project related with one of the famous "snake game". Now a
day, most of the people in this world loves 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.
 Table of Contents
INTRODUCTION.................................................................................................................................6
BACKGROUND.........................................................................................................................................6
OBJECTIVES..............................................................................................................................................6
APPLICATIONS.........................................................................................................................................7
SCOPE AND LIMITATIONS........................................................................................................................8
 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, strip, and function in the program.

OBJECTIVES

Too familiar with the use of HTML programming in realistic manner.

To learn how to use canvas, stript , function in the program.
To be able to design a simple application by use of HTML codes.

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.
 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.

 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.

 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.

 Initialization and Game Start:

¤ `init()` is called to set up the initial game state.
¤ `step()` is called to start the game loop.
Block Diagram
Gamers Snake Game
Event handling

Keyboard events (key down)

Change direction (dir)

Game loop

Draw function (draw field,

draw snake, draw food)

Initialization (init)

Spawn food (food)

Movement and collision

detection(step)

Game over check