A

MICRO PROJECT REPORT

ON

“Snake Game”
Program & Program code : CO-5I
Course : Client Side Scripting(CSS)
Course code 22519

Submitted by,

Name of student Enrollment No Program

1. NILESH MADHUKAR LAWAWNDE 2214640089 CO-5I

2. AYAN MUSHIR SHAIK 2214640075 CO-5I
3. PRATIK POPAT SHINDE 2214640037 CO-5I

Under the Guidance of

PROF. PADIR J.D

In partial fulfillment of requirement for the

award ofDiploma In Computer Engineering

MSBTE, Mumbai.
Academic Year: 2024-25

S.S.M. ADSUL POLYTECHNIC COLLEGE, CHAS,

AHMEDNAGAR-414 005(M.S)
 S.S.M. ADSUL POLYTECHNIC COLLEGE,
CHAS, AHMEDNAGAR-414 005(M.S)

CERTIFICATE
This is to certify that the micro project report entitled

“Snake Game”
Submitted by,

Name of student Enrollment No Program

1. NILESH MADHUKAR LAWAWNDE 2214640089 CO-5I
2. AYAN MUSHIR SHAIK 2214640075 CO-5I
3. PRATIK POPAT SHINDE 2214640037 CO-5I

Of semester V institute, Sau. Sundarabai Manik Adsul Polytechnic, Chas, Ahmednagar (code:
1464) has completed the micro project satisfactorily in course CSS(22519) for the Academic year
2023-24 as prescribed in the MSBTE curriculum.

Place: Ahmednagar Date: ………………………….

.

Prof. Padir J.D . Hole P.P Prof.Gadakh.R.S.

(Micro Project guide) (Head of Dept.) (Principal)
 ACKNOWLEDGEMENT

I take this opportunity to acknowledgement the constant encouragement and continuous help give
to me by my guide Prof. PADIR J.D I convey my sincere thanks to his valuable timely
I would also like to thanks Principal Prof. Gadakh.R.S. And Head of department Prof: Hole P.P. I
would also like to thank teaching staff of department for achieving this goal.
I also thankful to those think which are directly or indirectly help me for completion this micro
project finally. I thank my parents without whose supports; the completion of the project would not have
been possible.

1. NILESH MADHUKAR LAWAWNDE

2. AYAN MUSHIR SHAIK
3. PRATIK POPAT SHINDE
 INDEX

Sr.no Name of topic

1. Introduction

2. Aim of the project

3. Action plan

4. Resources required

5. Actual procedure followed

6. Actual resources used

7. Source code

8. Output

9 Conclusion
1. Introduction

JavaScript is a dynamic and versatile programming language that has become an integral part
of the modern web. It is the cornerstone of interactive web development, allowing developers
to bring websites to life with rich, engaging user experiences. In this introduction, we'll explore
the fundamentals and significance of JavaScript, a language that has reshaped the way we
interact with the digital world.
Welcome to the captivating world of our Microproject, an exciting adventure into the realm of
classic gaming. In this project, we present to you the timeless and enthralling Snake Game.
Whether you're a seasoned gamer looking for a nostalgic trip down memory lane or a budding
programmer eager to explore the fundamentals of game development, you're in for a treat.

2. Aim of the project

The main aim of the Snake Game is to control a snake on the game board and guide it to
consume food items while avoiding collisions with the walls of the game area and, most
importantly, with its own tail. The objectives of the game can be summarized as follows :

1.Eating Food: The primary goal is to guide the snake to eat the food items (often
represented as dots or other symbols) that appear on the game board. Each time the snake
consumes a piece of food, it grows longer.

2.Growing the Snake: As the snake eats food, it increases in length. The player's aim is to
make the snake as long as possible without causing it to collide with the game board's
boundaries or itself.
3. Action Plan

Sr.no Detail of Planned Planned Name of

activity start date Finish responsibleTeam
date member
1. Finalization Of Topic 15/9/23 17/9/23 Omkar Gaikwad
2. Project Definition And 17/9/23 25/9/23 Deepak Nagre
Planning
3. Requirement Gathering 25/9/23 5/10/23 Abhishek Girwale
4. Design Modeling 5/10/23 10/10/23 Omkar Gaikwad
5. Implementation Of Code 10/10/23 15/10/23 Abhishek Girwale
6. Coding 15/10/23 20/10/23 Omkar Gaikwad
7. Launch Application 20/10/23 17/10/23 Deepak Nagre
8. Documentation 17/10/23 25/10/23 Omkar Gaikwad

4. Resources required

Sr.No Name Of Resource Specification Quentity Remark

1. Computer System i-5 ,Ram:- 2 gb and Above 1 -
2. Operating System Unix/Linux/Any Other Open 1 -
Source Operating System

5. ACTUAL PROCEDURE FOLLOWED

1 Discussion about given topic

2.Selection of Google and distributions on responsibilities

3 Collection of information using different resources

4.Analysis of information performance given

5 Representation information in a required format

6. Preparation of project report

7.Computation and sihmission of assign task

6. Actual Resource Used

Sr.No Name Of Resource Specification Quentity Remark

1. Computer System i-5 ,Ram:- 2 gb and Above 1 -
2. Operating System Unix/Linux/Any Other Open 1 -
Source Operating System

7. Source code
<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style> canvas {
border: 1px solid #000;
display: block;
margin: 0 auto;
 }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<p>Score: <span id="score">0</span></p>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const gridSize = 10; let

snake = [{ x: 10, y: 10 }]; let
food = { x: 5, y: 5 }; let dx =
0; let dy = gridSize; let
score = 0;

function drawSnake()
{ snake.forEach((segment) =>
{ ctx.fillStyle = "#000";
ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
});
}

function drawFood()
{ ctx.fillStyle = "#f00";
ctx.fillRect(food.x, food.y, gridSize, gridSize);
}

function update() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };

if (head.x === food.x && head.y === food.y) {

score += 10;
document.getElementById("score").innerText = score;
snake.unshift(head);
generateFood();
} else
{ snake.pop();
snake.unshift(head);
} if ( head.x <
0 || head.x >=
canvas.width || head.y < 0
|| head.y >= canvas.height
|| checkCollision()
){
gameOver();
return;
}
 drawGame();
}

function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
}

function checkCollision() { for

(let i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
return true;
}
}
return false;
}

function generateFood() { const x = Math.floor(Math.random() *

(canvas.width / gridSize)) * gridSize; const y = Math.floor(Math.random() *
(canvas.height / gridSize)) * gridSize;

food = { x, y };
}

function gameOver() {
alert("Game Over! Your Score: " + score);
snake = [{ x: 10, y: 10 }];
score = 0;
document.getElementById("score").innerText = score;
dx = 0;
dy = gridSize;
}

function changeDirection(event) {
const keyPressed = event.key;
switch (keyPressed) { case
"ArrowUp": if (dy === 0) {
dx = 0; dy = -gridSize;
} break;
case "ArrowDown":
if (dy === 0)
{ dx = 0;
dy = gridSize;
} break;
case "ArrowLeft":
if (dx === 0)
{ dx = -gridSize;
dy = 0; }
break; case
"ArrowRight": if
(dx === 0) { dx
= gridSize; dy =
0; } break;
}
}

document.addEventListener("keydown", changeDirection);
setInterval(update, 100);

generateFood(); // Initial food

</script>
</body>
</html>

8.output
9.conclusion

the classic snake game is not only a nostalgic and enjoyable pastime but also a great example of
how game development can be both entertaining and instructive.
Building a snake game in JavaScript provides hands-on experience in coding logic, user
interaction, and basic game mechanics, making it an ideal starting point for those looking to
delve into game development or programming in general.
It teaches fundamental programming concepts such as handling user input, managing game
state, and rendering graphics.
Through this simple game, you can gain valuable experience and build a foundation for more
complex game development in the future.
 ANNEXURE II
Evolution Sheet for the Micro
Project

Academic Year: 2024- 25 Name of Faculty: Prof. Padir

J.D Course: CSS Course Code: 22519
Semesters: 5th

Title of the Project: Snake Game

COs addressed by the Micro Project:
A: Use computer system and its peripherals.
B: Prepare business document using word processing tool.
Major learning outcomes achieved by students by doing the
Project: (a)Practical outcomes:

1. Computer system and Peripherals.

2. Create, edit and save document.
3. Document Page Layout.
(b) Unit outcomes in Cognitive domain:
2a.Word processing, Previewing, saving, closing
a document.
2b. Editing document, Formatting paragraphs,
spacing & align.
2c. Inserting elements to word documents, Changing layout of a document.
(c) Outcomes in Affective Domain---------------------------------------------------------------------------
--
------------------------------------------------------------------------------------------------------------------
----
 Comments/Suggestion about team work /leadership/interpersonal communication (if any)
--------------------------------------------------------------------------------------------------------------
---------
--------------------------------------------------------------------------------------------------------------
---------

Marks out of 6 for Marks out of 4 for

performance in Total
Roll Student Name performance in
group activity (D5 out
No. oral/ presentation
Col. 8) of 10
(D5 Col.9)
1 NILESH LAWANDE
2 AYAN SHAIK
3 PRATIK SHINDE

(Name & Signature of Faculty)