A

Micro Project
on
Snake Game

Submitted in partial fulfillment of the requirement for the award of

Diploma of Engineering
in
Computer Engineering
By

Akash Singh

Pratham Poojari

Vijaya Khairnar

Vedant Mer

under the guidance of

Mrs. Kirtida Naik

Department of Computer Engineering

October 2020
 CERTIFICATE

VIVA COLLEGE OF DIPLOMA ENGINEERING & TECHNOLOGY

VIRAR (W)
2020-21
This is to certify that the micro project entitled “Snake Game” has been
submitted under the guidance of Mrs. Kirtida Naik in partial fulfillment of the
requirement for the award of Diploma of Engineering in Computer Engineering
from Maharashtra State Board of Technical Education.

“Snake Game”

GROUP MEMBER
12. Akash Singh

13. Pratham Poojari

14. Vijaya Khairnar

15. Vedant Mer

Project Guide H.O.D

Mrs. Kirtida Naik Mr. Nikhil Asolkar
 INDEX

Sr. No. Name of the topic Page no.

PART –A PLAN

1 Brief Introduction 1

2 Aim of the Micro-Project 1

3 Resources Required 2

PART –B OUTCOMES

1 Brief Description 3

2 Aim of Micro-Project 4

3 Course Outcomes Integrated 4

4 Procedure Followed 5

5 Resources Used 16

6 Outputs of the Micro-Projects 17

7 Skill Developed 19
 Snake Game CSS 22519 SEM V

PART-A PLAN
1.0 Brief Introduction

Snake is the common name for a video game concept where the player maneuvers a line
which grows in length, with the line itself being a primary obstacle. The concept originated
in the 1976 arcade game Blockade, and the ease of implementing Snake has led to hundreds
of versions for many platforms. After a variant was preloaded on Nokia mobile phones in
1998, there was a resurgence of interest in the snake concept as it found a larger audience.
There are over 300 Snake-like games for iOS alone. The player controls a dot, square, or
object on a bordered plane. As it moves forward, it leaves a trail behind, resembling a
moving snake. In some games, the end of the trail is in a fixed position, so the snake
continually gets longer as it moves. In another common scheme, the snake has a specific
length, so there is a moving tail a fixed number of units away from the head. The player
loses when the snake runs into the screen border, a trail or other obstacle, or itself.

2.0 AIM of Micro-Project

The main thing behind by doing this project was playing the snakes game online .

1
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

3.0 Resources Required

Sr. No Name of Resource Specification Qty Remarks

1 Computer 500GB HDD, 1

4 Gb RAM,
AMD
processor,
Windows 7 OS
2 Web Browser Chrome 1
3 Editor Notepad 1

2
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

PART-B OUTCOME
1.0 Brief Description

The player controls a dot, square, or object on a bordered plane. As it moves forward, it leaves a trail
behind, resembling a moving snake. In some games, the end of the trail is in a fixed position, so the
snake continually gets longer as it moves. In another common scheme, the snake has a specific length,
so there is a moving tail a fixed number of units away from the head. The player loses when the snake
runs into the screen border, a trail or other obstacle, or itself The Snake design dates back to the arcade
game Blockade, developed and published by Gremlin in 1976. It was cloned as Bigfoot Bonkers the
same year. In 1977, Atari released two Blockade-inspired titles: the arcade game Dominos and Atari
VCS game Surround. Surround was one of the nine Atari VCS launch titles in the United States and
was also sold by Sears under the name Chase. That same year, a similar game was launched for
the Bally Astrocade as Checkmate. This snake game is just similar to games which are found under
mobile games section. It uses the concept of graphics to display the menu items and all objects on a
single screen.

The Snake concept comes in two major variants:

In the first, which is most often a two-player game, there are multiple snakes on the playfield. Each
player attempts to block the other so the opponent runs into an existing trail and loses. Surround for
the Atari 2600 is an example of this type. The Light Cycles segment of the Tron arcade game is a
single-player version where the other "snakes" are AI controlled.

In the second variant, a sole player attempts to eat items by running into them with the head of the
snake. Each item eaten makes the snake longer, so avoiding collision with the snake becomes
progressively more difficult. Examples: Nibbler, Snake Byte.

3
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

2.0 AIM of Micro-Project

The main thing behind by doing this project was playing the snakes game online .

3.0 Course Outcomes (CO)

• Create Intractive web pages using program flow control structure.

4
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

4.0 Actual Procedure Followed

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100%;
}

body {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}

canvas {
background: black;
font-size: 2vw;
box-shadow: 1em 1em 0.5em rgba(0, 0, 0, 0.25);
outline: 1px solid white;
outline-offset: -2px;
}

</style>
</head>
<body>

<canvas height="512" width="512" id="gameCanvas"></canvas>

<script>
var cnv = document.getElementById('gameCanvas'),
ctx = cnv.getContext('2d'),

segmentLength = 10,
startingSegments = 20,
spawn = { x: 0, y:cnv.height/2 },
snakeSpeed = 5,
maxApples = 5,
appleLife = 500,
segmentsPerApple = 3,
5
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

snakeWidth = 5,
appleWidth = 5,
cursorSize = 10,

snakeColor = [ 100, 255, 100, 1],

appleColor = [ 0, 255, 0, 1],
cursorColor = [ 255, 255, 255, 1],
cursorColorMod = [ 0,-255,-255, 0],
targetColor = [ 0, 0, 255, 1],
targetColorMod = [ 255, 0,-255, 0],
scoreColor = [ 255, 255, 255, 1],

cursorSpin = 0.075,

snake,
cursor,
target,
apples,
score,
gameState,
deathMeans;

function distance(p1,p2){
var dx = p2.x-p1.x;
var dy = p2.y-p1.y;

return Math.sqrt(dx*dx + dy*dy);

}

function lineIntersect(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) {

var s1_x = p1_x - p0_x,
s1_y = p1_y - p0_y,
s2_x = p3_x - p2_x,
s2_y = p3_y - p2_y,
s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y),
t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);

if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {

return true;
}

return false;
}

function SGM(angle, x, y) {
this.x = x || 0;
6
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

this.y = y || 0;
this.angle = angle || 0;
this.parent = null;
};

SGM.prototype.endX = function() {
return this.x + Math.cos(this.angle) * segmentLength;
};

SGM.prototype.endY = function() {
return this.y + Math.sin(this.angle) * segmentLength;
};

SGM.prototype.pointAt = function(x, y) {
var dx = x - this.x,
dy = y - this.y;

this.angle = Math.atan2(dy, dx);

};

SGM.prototype.target = function(x, y) {
this.targetX = x;
this.targetY = y;
this.arrived = false;
this.totalDist = distance({x:this.endX(), y: this.endY()}, {x: this.targetX, y: this.targetY});
this.currentDist = parseInt(this.totalDist);
};

SGM.prototype.gotoTarget = function() {
if(!this.arrived) {
if(this.targetX > this.x + segmentLength || this.targetX < this.x - segmentLength || this.targetY > this.y
+ segmentLength || this.targetY < this.y - segmentLength) {
this.pointAt(this.targetX, this.targetY);
}
else {
this.arrived = true;
}

this.currentDist = distance({x:this.endX(), y: this.endY()}, {x: this.targetX, y: this.targetY});

}

this.x += (this.endX() - this.x) / snakeSpeed;

this.y += (this.endY() - this.y) / snakeSpeed;

this.parent.drag(this.x, this.y);
};

7
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

SGM.prototype.drag = function(x, y) {
this.pointAt(x, y);

this.x = x - Math.cos(this.angle) * segmentLength;

this.y = y - Math.sin(this.angle) * segmentLength;

if(this.parent) {
this.parent.drag(this.x, this.y);
}
};

SGM.prototype.render = function(context) {
context.lineTo(this.endX(), this.endY());
};

function IKR(x, y) {
this.ix = x || 0;
this.iy = y || 0;
this.sgms = [];
this.lastArm = null;
};

IKR.prototype.addSeg = function(angle) {
var arm = new SGM(angle);

if(this.lastArm !== null) {

arm.x = this.lastArm.endX();
arm.y = this.lastArm.endY();

arm.parent = this.lastArm;
}
else {
arm.x = this.ix;
arm.y = this.iy;
}

this.sgms.push(arm);
this.lastArm = arm;
};

IKR.prototype.grow = function() {
var tail = this.sgms[0],
arm = new SGM(tail.angle);

arm.x = tail.x - Math.cos(tail.angle) * segmentLength;

arm.y = tail.y - Math.sin(tail.angle) * segmentLength;

8
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

tail.parent = arm;
this.sgms.unshift(arm);
}

IKR.prototype.drag = function(x, y) {
this.lastArm.drag(x, y);
};

function CUR(x,y) {
this.x = x;
this.y = y;
this.rotation = 0;
};

CUR.prototype.render = function(context) {
context.save();

context.translate(this.x, this.y);
context.rotate(this.rotation);

context.beginPath();

context.moveTo(0, -cursorSize);
context.lineTo(0, -cursorSize/2);
context.moveTo(0, cursorSize/2);
context.lineTo(0, cursorSize);

context.moveTo(-cursorSize, 0);
context.lineTo(-cursorSize/2, 0);
context.moveTo(cursorSize/2, 0);
context.lineTo(cursorSize, 0);

context.stroke();
context.restore();

this.rotation = (this.rotation + cursorSpin) % 360;

};

function Apple(x, y) {
this.x = x;
this.y = y;
this.life = appleLife;
this.rotation = 0;
}

Apple.prototype.update = function() {
this.life--;
9
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

};

Apple.prototype.render = function(context) {
context.beginPath();
context.arc(this.x, this.y, appleWidth, 0, Math.PI*2);
context.fill();

if(gameState !== 'dead') {

context.save();

context.fillStyle = 'white';
context.font = '8px sans-serif';
context.fillText(this.life, this.x+10, this.y+10);

context.restore();

CUR.prototype.render.call(this, context);
}
};

function init() {
snake = new IKR(spawn.x, spawn.y);
cursor = new CUR(-20, -20);
target = new CUR(spawn.x + segmentLength * (startingSegments + 5), spawn.y);
apples = [];
score = 0;

for(var i = 0; i < startingSegments; i++) {

snake.addSeg();
}

snake.lastArm.target(target.x, target.y);

gameState = 'play';
}

init();

cnv.addEventListener('mousemove', function(e) {
switch(gameState) {
case 'play':
cursor.x = e.offsetX;
cursor.y = e.offsetY;
break;
}
});

10
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

cnv.addEventListener('mousedown', function(e) {
switch(gameState) {
case 'play':
target.x = e.offsetX;
target.y = e.offsetY;
snake.lastArm.target(target.x, target.y);
break;
case 'dead':
init();
break;
}
});

function badPlacement(apple) {
for(var s = 0; s < snake.sgms.length; s++) {
var seg = snake.sgms[s];

if(Math.min(distance(apple, {x:seg.endX(), y:seg.endY()}), distance(apple, {x:seg.x,y:seg.y})) <

appleWidth*2) {
return true;
}
}
return false;
}

function addScoreSegments() {
for(var i = 0; i < segmentsPerApple; i++) {
snake.grow();
}
}

function update() {
if(gameState !== 'dead') {
snake.lastArm.gotoTarget();

if(snake.lastArm.endX() > cnv.width - 2 || snake.lastArm.endX() < 2 || snake.lastArm.endY() >

cnv.height - 2 || snake.lastArm.endY() < 2) {
gameState = 'dead';
deathMeans = 'You hit the wall...';
return;
}

for(var s = 0; s < snake.sgms.length-2; s++) {

var seg = snake.sgms[s];

if(lineIntersect(snake.lastArm.x, snake.lastArm.y, snake.lastArm.endX(), snake.lastArm.endY(),

seg.x, seg.y, seg.endX(), seg.endY())) {
11
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

gameState = 'dead';
deathMeans = 'You bit yourself!';
return;
}

for(var a in apples) {
var apple = apples[a];

if(Math.min(distance(apple, {x:seg.endX(), y:seg.endY()}), distance(apple, {x:seg.x,y:seg.y})) <

appleWidth*2) {
score += Math.round(apple.life/2); // half score if absorbed by the tail
apples.splice(a, 1);
addScoreSegments();
}
}
}

for(var a in apples) {
var apple = apples[a];

apple.update();

if(apple.life <= 0) {
apples.splice(a,1);
continue;
}

if(distance(apple,{x:snake.lastArm.endX(),y:snake.lastArm.endY()}) < appleWidth*2) {

score += apple.life;
apples.splice(a,1);

addScoreSegments();
}
}

if(apples.length < maxApples && Math.random()<.1) {

var offset = appleWidth*10,
apple = new Apple(
offset/2+Math.floor(Math.random()*(cnv.width-offset)),
offset/2+Math.floor(Math.random()*(cnv.height-offset))
);

while(badPlacement(apple)) {
apple.x = offset/2+Math.floor(Math.random()*(cnv.width-offset));
apple.y = offset/2+Math.floor(Math.random()*(cnv.height-offset));
}
12
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

apples.push(apple);
}
}
}

function drawTarget(targetModFactor) {
if(!snake.lastArm.arrived) {
ctx.strokeStyle = 'rgba('+
(targetColor[0] + targetColorMod[0]*targetModFactor).toFixed(0) + ',' +
(targetColor[1] + targetColorMod[1]*targetModFactor).toFixed(0) + ',' +
(targetColor[2] + targetColorMod[2]*targetModFactor).toFixed(0) + ',' +
(targetColor[3] + targetColorMod[3]*targetModFactor).toFixed(0)
+')';
ctx.lineWidth = 1;
target.render(ctx);
}
}

function drawSnake() {
ctx.beginPath();
ctx.strokeStyle = ctx.fillStyle = 'rgba('+ snakeColor[0] +','+ snakeColor[1] +','+ snakeColor[2] +','+
snakeColor[3]+')';
ctx.lineWidth = snakeWidth;

ctx.moveTo(snake.sgms[0].x, snake.sgms[0].y);

for(var s in snake.sgms) {
snake.sgms[s].render(ctx);
}

ctx.stroke();

ctx.beginPath();
ctx.arc(snake.lastArm.endX(), snake.lastArm.endY(), appleWidth*.75, 0, Math.PI*2);
ctx.fill();
}

function drawCursor(targetModFactor) {
ctx.strokeStyle = 'rgba('+
(cursorColor[0] + cursorColorMod[0]*targetModFactor).toFixed(0) + ',' +
(cursorColor[1] + cursorColorMod[1]*targetModFactor).toFixed(0) + ',' +
(cursorColor[2] + cursorColorMod[2]*targetModFactor).toFixed(0) + ',' +
(cursorColor[3] + cursorColorMod[3]*targetModFactor).toFixed(0)
+')';
ctx.lineWidth = 1;
cursor.render(ctx);
13
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

function drawApples() {
ctx.fillStyle = 'rgba('+
appleColor[0] +','+
appleColor[1] +','+
appleColor[2] +','+
appleColor[3]
+')';

for(var a in apples) {
var apple = apples[a],
appleTargetMod = 1 - apple.life / appleLife;
ctx.strokeStyle = 'rgba('+
(cursorColor[0] + cursorColorMod[0]*appleTargetMod).toFixed(0) + ',' +
(cursorColor[1] + cursorColorMod[1]*appleTargetMod).toFixed(0) + ',' +
(cursorColor[2] + cursorColorMod[2]*appleTargetMod).toFixed(0) + ',' +
(cursorColor[3] + cursorColorMod[3]*appleTargetMod).toFixed(0)
+')';
ctx.lineWidth = 1;
apple.render(ctx);
}
}

function render() {
var targetModFactor = 1 - snake.lastArm.currentDist / snake.lastArm.totalDist;

switch(gameState) {
case 'play':
ctx.clearRect(0, 0, cnv.width, cnv.height);

drawTarget(targetModFactor);

drawSnake();

drawApples();

drawCursor(targetModFactor);

ctx.fillStyle = 'rgba('+
scoreColor[0] +','+
scoreColor[1] +','+
scoreColor[2] +','+
scoreColor[3]
+')';
ctx.textAlign = 'left';
14
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

ctx.textBaseline = 'top';
ctx.fillText('Score: '+score, 10, 10);
break;

case 'dead':
ctx.clearRect(0, 0, cnv.width, cnv.height);

drawSnake();

drawApples();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.fillRect(100, 100, cnv.width - 200, cnv.height - 200);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = ctx.strokeStyle = 'white';
ctx.font = 'bold 30px sans-serif'
ctx.fillText('DEAD', cnv.width/2, cnv.height/2-70);

ctx.font = 'bold 25px sans-serif'

ctx.fillText(deathMeans, cnv.width/2, cnv.height/2-30);

ctx.font = '20px sans-serif';

ctx.fillText('Score:', cnv.width/2, cnv.height/2+15);
ctx.font = 'bold 60px sans-serif';
ctx.fillText(score, cnv.width/2, cnv.height/2+60);
ctx.font = 'lighter 10px sans-serif';
ctx.lineWidth = 1;
ctx.strokeRect(103, 103, cnv.width - 206, cnv.height - 206);
break;
}
}

function animate() {
update();
render();
requestAnimationFrame(animate);
}

snake.lastArm.target(target.x, target.y);
animate();
</script>

</body>
</html>

15
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

5.0 Actual Resources Used

Sr. No Name of Resource Specification Qty Remarks

1 Computer 500GB HDD, 1

4 Gb RAM,
AMD processor,
Windows 7 OS
2 Web Browser Chrome 1

3 Editor Notepad 1

16
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

6.0 Outputs of Micro-Projects

Output:-

17
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

18
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.
 Snake Game CSS 22519 SEM V

7.0 Skill Developed

Thus, We have created the online Snake Game Using Java Script.

19
VIVA COLLEGE OF DIPLOMA ENGG & TECH, COMPUTER ENGG.