A

Micro

projectOn

“A Snake Game using JavaScript”

Submitted By
Samruddhi Zurange (46)
Aditya Bhambare(01)
Kartik Kothule(23)

Guided By Mrs. S.S.Kadam

Diploma Course in Computer Technology

(As per directives of IScheme, M SBTE)

SinhgadInstitutes

Sinhgad Technical Education

Society’s

SOU.VENUTAI CHAVAN

POLYTECHNIC

PUNE-411041 ACADEMIC

YEAR2022-2023
 Maharashtra State
Board of Technical
Education
Certificate
This is to certify that Mis. Pragati Salunke with Roll No. 27 of Semester V
ofDiplomainComputerTechnologyofInstituteSou.VenutaiChavanPolytechnic
(Code: 0040) has successfully completed the Micro-Project inClient Side
Scripting (22519) for the academic year 2021-2022 as prescribed
inthecurriculum.

Program Code:

CMCourseCode:CM/

5/I

Place:Pune EnrolmentNo: 1900400191

Date: ExamSeat No:

SubjectTeacher HeadofDepartment
 INDEX

SRNO CONTENTS PAGENO

1 Aim of the Micro-Project 1

2 Rationale 3

3 Course Outcomes Achieved 3

4 Literature Review 3

5 Actual Methodology Followed 4

6 Actual Resources Used 4

7 Source code 4

8 Output 8

9 Skills Developed 9

10 Applications of Micro-Project 10

11 Conclusion 10
 CSS- 22519 BodyMassIndex(BMI)

Annexure –
I

Micro-Project Proposal

1.0 Aim of the Micro-Project:

“Developing a Snake Game using Javascript”

2.0 Intended Course Outcomes:

b) “ Implement functions in Javascript ”

3.0 Proposed Methodology:

I. Created a webpage for Snake Game.
II. Study the source code
III. Collect information on how to manage webpage.
IV. Run/Debug the program.
V. Prepare the final report

4.0 Action Plan:

Name of
Sr. Planned Planned
Details of Activity responsible
No. Fin ish
St art T eam
Date
members
Date
Identify the requirements of the
1 17/09/2021 24/10/2021 Pragati salunke
project.

2 Design the structure of the project. 29/09/2021 12/10/2021 Pragati Salunke

Collect information regarding Java

3 15/10/2021 28/10/2021 Pragati Salunke
code.

DepartmentofComputer Technology Academic Year2021-22 1

CSS- 22519 BodyMassIndex(BMI)
4 Run the program. 02/12/2021 16/12/2021 Pragati Salunke

DepartmentofComputer Technology Academic Year2021-22 2

CSS- 22519 BodyMassIndex(BMI)
5 Check each information correctly. 17/12/2021 30/12/2021 Pragati salunke

DepartmentofComputer Technology Academic Year2021-22 3

CSS- 22519 BodyMassIndex(BMI)

6 Prepare the final report. 30/12/2021 31/12/2021 Pragati Salunke

5.0 Resources Required:

S.No. Resources Specifications

required
1 Computer system Inteli3 CPU,RAM 16 GB

2 Operating System Windows10,64BitOperatingSystem

3 Software’s Microsoftword , Visual Studio Code

6.0 Team members:

S.No. Roll. number Name of Student

1 01 Avanti
2 27 Pragatisalunke
3 28 SandhyaraniGaikwad

DepartmentofComputer Technology Academic Year2021-22 4

CSS- 22519 BodyMassIndex(BMI)

Annexure II

Micro-Project Report

1.0 Rationale:
JavaScript is a text-based programming language used both on the client-side and server- side
that allows you to make web pages interactive. Where as HTML and CSS are languages that
give structure and style to web pages, JavaScript gives web pages interactive elements that
engage a user. JavaScript allows you to create highly responsive interfaces that improve the
user experience and provide dynamic functionality, without having to wait for the server to
react and show another page.

2.0 Aim of the Micro-Project:

“Developing a Snake Game using Javascript ”

3.0 Course Outcomes Achieved:

b)“Implement Arrays and functions in Javascript ”

4.0 Literature Review:

JavaScript is a scripting or programming language that allows you to implement complex

features on web pages every time a web page does more than just sit there and display static
information for you to look at displaying timely content updates, interactive maps,
animated2D/3Dgraphics, scrolling video jukeboxes, etc.

You can bet that JavaScript is probably involved. It is the third layer of the layer cake of
standard web technologies, two of which (HTML and CSS) we have covered in much more
detail in other parts of the Learning Area. Snake Game is a simple project in HTML5, CSS,
and JavaScript. This is an amazing game made for the user conveniently.

DepartmentofComputer Technology Academic Year2021-22 5

CSS- 22519 BodyMassIndex(BMI)

DepartmentofComputer Technology Academic Year2021-22 6

CSS- 22519 BodyMassIndex(BMI)

5.0 Actual Methodology Followed:

This Micro-project aims to develop a webpage for calculating loan.
I. Created a web page for Snake Game.
II. Study the source code
III. Collect information on how to manage webpage.
IV. Run/Debug the program.
V. Prepare the final report.

6.0 Actual Resources Used:

S.No. Resources Specifications

required
1 Computer system Inteli3 CPU,RAM 16 GB

2 Operating System Windows10,64BitOperatingSystem

3 Software’s Microsoft Word, Visual Studio
code

7.0 Source Code:

 food.js
 import{onSnake,expandSnake}from'./snake.js'
 import{randomGridPosition}from'./grid.js'


letfood=getRandomFoodPosition()

constEXPANSION_RATE=2


export function update()
 {if(onSnake(food)) { expandSnake(EXPANSION_RATE)foo
 d=getRandomFoodPosition()
 }
 }

 exportfunctiondraw(gameBoard)
 { constfoodElement=document.createElement('div')foo
 dElement.style.gridRowStart =
 food.yfoodElement.style.gridColumnStart =
 food.xfoodElement.classList.add('food')gameBoard.
 appendChild(foodElement)
 }


DepartmentofComputer Technology Academic Year2021-22 7

CSS- 22519 BodyMassIndex(BMI)


 functiongetRandomFoodPosition(){
game.js
 letnewFoodPosition
 import{updateasupdateSnake,drawasdrawSnake,SNAKE_SPEED,
while(newFoodPosition==null||onSnake(newFoodPosition)){
 getSnakeHead,snakeIntersection}from'./snake.js'
newFoodPosition=randomGridPosition()
 import{updateasupdateFood,drawasdrawFood}from'./food.js'import{out sideGrid}from'./gr
 }
 returnnewFoodPosition
 }
 letlastRenderTime=0
 letgameOver =false
 constgameBoard=document.getElementById('game-board')

 functionmain(currentTime){
 if(gameOver){ if(confirm('Youlost.Pressoktorestart.')){window.
 location ='/'
 }
 return
 }



 window.requestAnimationFrame(main)
 constsecondsSinceLastRender=(currentTime- lastRenderTime)/1000if(secondsSinceLastRe
 lastRenderTime=currentTimeup date()
 draw()





 }

 window.requestAnimationFrame(main)

 function update()
 {updateSnake()upd ateFood()checkDea th()
 }

functiondraw(){

DepartmentofComputer Technology Academic Year2021-22 8

CSS- 22519 BodyMassIndex(BMI)

 gameBoard.innerHTML=''
 drawSnake(gameBoard) drawFood(gameBoard)


}


 functioncheckDeath(){
 gameOver=outsideGrid(getSnakeHead())||snakeIntersection()
}

 grid.js

constGRID_SIZE=21
 Index.html
export function randomGridPosition()
{return{
x: Math.floor(Math.random() * GRID_SIZE)
<!DOCTYPEhtml>
+ 1,y:Math.floor(Math.random()*
<htmllang="en">
GRID_SIZE)+1
<head>
}
} <metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
export function outsideGrid(position)
<title>Snake</title>
{return(
<style
position.x < 1 || position.x > GRID_SIZE
>b
||position.y<1|| position.y> GRID_SIZE
) ody{
height:
100vh;width:
100vw;displa
y: flex;

DepartmentofComputer Technology Academic Year2021-22 9

CSS- 22519 BodyMassIndex(BMI)

margin: 0;
 background-color:black;
input.js
}
 letinputDirection= {x:0,y:0}
 letlastInputDirection={x:0,y:0}
#game-board{

background-

window.addEventListener('keydown',e=>{
color:

switch (e.key)
#CCC;width:

{case'ArrowUp':
 100vmin; height:
if (lastInputDirection.y !== 0) breakinputDirection={x: 0,y:-1}break
 case'ArrowDown':
100vmin;display:
 if grid;
(lastInputDirection.y !== 0) breakinputDirection={x:0,y: 1} break
 case'ArrowLeft':
grid-template-rows:
 if (lastInputDirection.x
repeat(21, 1fr);grid- !== 0) breakinputDirection={x:-1,y: 0}
 template-

columns:repeat(21,1fr);

 }

.snake{
background-color: hsl(200,
100%, 50%);border:
.25vminsolidblack;
}

.food{
background-color: hsl(50,
100%, 50%);border:
.25vminsolidblack;
}
</style>

DepartmentofComputer Technology Academic Year2021-22 10

CSS- 22519 BodyMassIndex(BMI)

 break
 case'ArrowRight':
 if (lastInputDirection.x !== 0)
 breakinputDirection={x:1,y: 0} break


 }
 })

 exportfunctiongetInputDirection(){
 lastInputDirection=inputDirectionre turninputDirection
 }

 snake.js

import{getInputDirection}from"./input.js"

exportconstSNAKE_SPEED=5
const snakeBody = [{ x: 11, y: 11
}]letnewSegments=0

export function update()

{addSegments()

constinputDirection=getInputDirection()
for (let i = snakeBody.length - 2; i >= 0; i--)
{snakeBody[i+1] ={...snakeBody[i]}
}

snakeBody[0].x +=
inputDirection.xsnakeBody[0].y+=
in putDirection.y
}

exportfunctiondraw(gameBoard){sna
keBody.forEach(segment=>{
const snakeElement =
document.createElement('div')snakeElement.style.gr
idRowStart =
segment.ysnakeElement.style.gridColumnStart =
segment.xsnakeElement.classList.add('snake')gameBo
ard.appendChild(snakeElement)
})
}

export function expandSnake(amount)

DepartmentofComputer Technology Academic Year2021-22 11

CSS- 22519 BodyMassIndex(BMI)

export function onSnake(position, { ignoreHead = false } = {})

{returnsnakeBody.some((segment,index)=>{
if (ignoreHead && index === 0) return
falsereturnequalPositions(segment,position)
})
}

export function getSnakeHead()

{returnsnakeBody[0]
}

exportfunctionsnakeIntersection(){ returnonSnake(snakeBody[0],
{ignoreHead:true})
}

functionequalPositions(pos1,pos2){
returnpos1.x===pos2.x&&pos1.y===pos2.y
}

functionaddSegments(){
for(leti=0;i<newSegments;i++){
snakeBody.push({...snakeBody[snakeBody.length-1]})
}

newSegments =0
}

DepartmentofComputer Technology Academic Year2021-22 12

CSS- 22519 BodyMassIndex(BMI)

8.0 Output:

DepartmentofComputer Technology Academic Year2021-22 13

CSS- 22519 BodyMassIndex(BMI)

DepartmentofComputer Technology Academic Year2021-22 14

CSS- 22519 BodyMassIndex(BMI)

9.0 Skills Developed:

During the course of this micro-project , we learned how to design a webpage using
Client Side Scripting.
a) Created a web page(html & Javascript).
b) Usage of different functions while creating a web page.

10.0 Applications of this Micro-project:

This micro-project finds its application in:
a) Studied Arrays and Functions in CSS.
b) For learning their use in different programs.

11.0 Area of future Improvement:

In the future, we can improve quality of it.

12.0 Conclusion:
We learned about developing a web page using CSS(JavaScript).

DepartmentofComputer Technology Academic Year2021-22 15