A

Micro Project On
“Snake Game”

Submitted by
60. Sujal Subhash Patade

Under Guidance of
Mrs. J. C. Joshi

Diploma Course in Information Technology (As

per directives of I Scheme, MSBTE)

Sinhgad Institutes
Sinhgad Technical Education Society’s
SOU. VENUTAI CHAVAN POLYTECHNIC, PUNE - 411041
ACADEMIC YEAR 2024 – 2025
 Maharashtra State Board of technical
Education Certificate
This is to certify that, Mast. Sujal Subhash Patade with Roll
No. 60 of Fifth Semester of Diploma in Information
Technology of Institute Sou. Venutai Chavan Polytechnic
(Code:0040) has successfully completed the Micro-Project in
Client-Side Scripting Language (22519) for the academic year
2024-2025.

Place: SVCP, Pune Enrollment No: 2200400406

Date: Exam Seat No: 169425

Mrs. J. C. Joshi Mr. U. S. Shirshetti Dr. M. S. Jadhav

Course Teacher Head of Department Principal
 Annexure – I
Part A-Micro project proposal

BRIEF INTRODUCTION:

The Snake game is a classic arcade game where players control a growing snake that
moves around the screen, consuming food while avoiding collisions with itself and the
boundaries. Using JavaScript, this implementation captures real-time user input for direction
control, manages the snake's body and food positions with arrays, and utilizes functions to
handle game mechanics. Event listeners facilitate interaction, while a continuous game loop
updates the state and rendering of the game, creating an engaging and interactive experience.
This project serves as a fun introduction to key programming concepts and enhances
JavaScript skills in a practical way.

AIM OF THE PROJECT:

An aim of Snake Game is the ultimate goal or purpose of an action, providing

direction and focus to achieve a desired outcome.

INTENTED COURSE OUTCOME:

a) Create interactive web pages using program flow control structure.

b) Implements array and function in JavaScript.
c) Create event-based web form using JavaScript.
d) Use JavaScript for handling cookies.
e) Create interactive web page using regular expressions for validation.
f) Create Menus and navigation in web page.

RESOURCES REQUIRED:

Sr. No. Name of Resource Specification

Required
1. Laptop HP - i7 ,16 GB RAM
2. Operating system Windows 11
3. Software Notepad, Chrome Browser.
ACTION PLAN:

Sr. No. DETAIL OF ACTIVITY WEEK

1 Discussion and finalization of topic 07/08/2024

Preparation
2 and submission of 21/08/2024
Abstract
3 Literature Review 04/09/2024
4 Collection of Data 18/09/2024
5 Discussion and outline of Content 16/10/2024
6 Editing and proof Reading of Content 23/10/2024
Compilation
7 of Report and 30/10/2024
Presentation
8 Final submission of Micro Project 08/11/2024

GROUP MEMBERS:

Roll. No. Name of group members

60 Sujal Subhash Patade
 Annexure II
Part B- Micro-Project
1. Rationale
JavaScript is limited featured client-side programming language. JavaScript runs at
the client end through the user's browser without sending messages back and forth to the
server. It is widely used by the web developers to do things such as build dynamic web
pages, respond to events, create interactive forms, validate data that the visitor enters into
a form, control the browser etc. This course helps student to create highly interactive web
pages using these features.

2. Course Outcome Addressed

a) Create interactive web pages using program flow control structure.

b) Implements array and function in JavaScript.
c) Create event-based web form using JavaScript.
d) Create interactive web page using regular expressions for validation.

3. Actual Method Followed

The process for this micro project is to make a “Snake Game”

We collect information and organize by following points:
1. Collect the information on Notepad.
2. Show the information to faculty.
3. Learn about Forms in JavaScript.
4. First make a raw report and then correct it.
5. After all the corrections make a proposal.
6. Prepare a project on “Snake Game”
7. Make pdf of report and print it.
 ANNEXURE III
Evaluation Sheet for the Micro Project

Academic Year: 2024-2025 Name of the Faculty: Mrs. J. C. Joshi

Course: Client-Side Scripting Language (22519) Semester: Fifth
Title of the project: Snake Game
COs addressed by Micro Project:

S. No Course Outcomes
a) Create interactive web pages using program flow control structure.
b) Implements array and function in JavaScript.
c) Create event-based web form using JavaScript.
Create interactive web page using regular expressions for validation.
d)

Major learning outcomes achieved by students by doing the project

(A) Practical outcomes (PrO’s):
1. Develop JavaScript to use decision making and looping statements.[2]
2. Develop JavaScript to Implement Array Functionalities [3]
3. Develop JavaScript to Implement Functions [4]
4. Develop a webpage using Intrinsic Functions [9]
(B) Unit outcomes in Cognitive domain:
1. Develop the JavaScript to implements loop to solving the given iterative problem. [1c]
2. Create array to Sove the given problem. [2a]
3. Develop the JavaScript to implements given function. [2c]
4. Use the given Intrinsic function with specified parameter[3d]
5. Write JavaScript to manipulate the specified attributes of window object in the given
manner[4c]
Comments/suggestions about team work /leadership/inter-personal communication (if
any)
…………………………………………………………………………………………

60 Sujal Subhash Patade

(Name & Signature)
 CODE: -

 index.HTML

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div class="gameBoard">
<div class="head">
<span class="eye">a</span>
<span class="eye">a</span>
</div>
</div>
<div class="score-show">
<h1>Score : <span id="score">0</span></h1>
</div>
<script src="script.js"></script>
</body>

</html>
 style.css

body{
display:flex;
height:100vh;
justify-content: space-evenly;
background-color: white;
}

.gameBoard{
display:grid;
margin-top:40px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(7, 1fr);
height: 80vh;
width: 60vw;
background-color:green;
border:2px solid black;

}
.eye{
height: 20px;
width: 20px;
background-color: black;
border-radius: 50%;
}
.snake{
background-color:red;
border: 2px solid black;
border-radius: 12px;
}
.food{
background-color:yellow;
border-radius:50%;
}
.head{
background-color:blue;
border-radius: 12px;

}
 script.js

//variable declaration
let gameBoard = document.querySelector(".gameBoard");
let lastPaintTime = 0;
let speed = 5;
let snakeArr = [
{ x: 5, y: 2 }
]
let snakeDir = { x: 0, y: 0 }
let food = { x: 2, y: 2 }
let score = 0;

//Requird Function
function main(ctime) {
window.requestAnimationFrame(main);

if ((ctime - lastPaintTime) / 1000 < 1 / speed) {

return;
}
lastPaintTime = ctime;

gameEngine();
}
function isCollied(head, snakeArr) {
for (let i = 1; i < snakeArr.length; i++) {
if ((head.x === snakeArr[i].x && head.y === snakeArr[i].y)
|| (head.x > 12 || head.x < 1 || head.y > 7 || head.y < 1)) {
console.log("Game Over");
return true;

}
}

return false;
}
function gameEngine() {

// If Snake has eaten food the increment the snakeArr

if (food.x === snakeArr[0].x && food.y === snakeArr[0].y) {
snakeArr.unshift({ x: snakeArr[0].x + snakeDir.x, y:
snakeArr[0].y + snakeDir.y });
let xRand = Math.floor(Math.random() * 11) + 1;
let yRand = Math.floor(Math.random() * 6) + 1;
food = { x: xRand, y: yRand }
score++;
document.getElementById("score").innerHTML = score;
 }
// moving the snake
for (let i = snakeArr.length - 2; i >= 0; i--) {
snakeArr[i + 1] = { ...snakeArr[i] };
}
snakeArr[0].x += snakeDir.x;
snakeArr[0].y += snakeDir.y;
//if head of the snake is touched to the body
if (isCollied(snakeArr[0], snakeArr)) {
snakeDir = { x: 0, y: 0 };
alert("Game Over");
score = 0;
document.getElementById("score").innerHTML = score;
snakeArr = [
{ x: 5, y: 2 }
]
}

// displaying the snake

gameBoard.innerHTML = "";
snakeArr.forEach((e, index) => {
let snakeBody = document.createElement('div');
snakeBody.style.gridRowStart = e.y;
snakeBody.style.gridColumnStart = e.x;
if (index === 0) {
snakeBody.classList.add("head");

} else {
snakeBody.classList.add("snake");
}

gameBoard.appendChild(snakeBody);

})
//displaying the food
let snakeFood = document.createElement('div');
snakeFood.classList.add("food");
snakeFood.style.gridRowStart = food.y;
snakeFood.style.gridColumnStart = food.x;
gameBoard.appendChild(snakeFood);

}
window.requestAnimationFrame(main);
window.addEventListener('keydown', e => {
snakeDir = { x: 0, y: 0 }
switch (e.key) {
 case "ArrowUp":
snakeDir.x = 0;
snakeDir.y = -1;
break;
case "ArrowDown":
snakeDir.x = 0;
snakeDir.y = 1;
break;
case "ArrowLeft":
snakeDir.x = -1;
snakeDir.y = 0;
break;
case "ArrowRight":
snakeDir.x = 1;
snakeDir.y = 0;
break;
case "w":
snakeDir.x = 0;
snakeDir.y = -1;
break;
case "s":
snakeDir.x = 0;
snakeDir.y = 1;
break;
case "a":
snakeDir.x = -1;
snakeDir.y = 0;
break;
case "d":
snakeDir.x = 1;
snakeDir.y = 0;
break;
}
})
OUTPUT
Reference
https://www.geeksforgeeks.org/
https://www.freecodecamp.org/
https://www.thatsoftwaredude.com/content/6193/coding-the-snake-game-in-
javascript
Conclusion

Creating a Snake game using HTML, CSS, and JavaScript is a great way to apply
key programming concepts like arrays, functions, events, and loops. Arrays manage
the snake's body and game grid, while functions encapsulate game logic for
movement and collision detection. Event handling allows for player interaction, and
loops enable real-time updates, creating a dynamic gaming experience. This project
not only reinforces your coding skills but also introduces you to fundamental game
development principles, laying the groundwork for more advanced projects in the
future.