-
Notifications
You must be signed in to change notification settings - Fork 0
/
snake.js
200 lines (178 loc) · 4.62 KB
/
snake.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
//drawing the canvas on the screen
const canvas=document.getElementById('game');
const ctx=canvas.getContext('2d');
//track the length of the snake
class SnakePart {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
//Speed with which the snake moves
let speed=5;
//defining the variables we need for printing our snake on the screen.
let tileCount=20; //Assuming total tiles on our canvas as 30
let tileSize=canvas.width/tileCount -2;//we dont want snake to go to absolute end
let xhead=6; // Initial position of snake is at centre ,so head is 15.
let yhead=6; // Initial position of snake is at centre , so tail is 15.
const snakeParts=[];
let tailLength=0;//length of the tail of snake
let xapple=5; // x-co-ordinate of apple
let yapple=5;// y-co-ordinate of apple
let score=0;//score
//To move the snake
let xVelocity=0;
let yVelocity=0;
//The main function of game
function drawGame()
{
changeSnakePosition();
let result=isGameOver();
if (result)
{
return ;
}
clearScreen();
checkAppleCollision();
drawApple();
drawSnake();
drawScore();
if(score>2)
{
speed+=0.05;//increasing the speed as score
}
setTimeout(drawGame,2500/speed);
}
//Game over
function isGameOver()
{
let gameOver=false;
//walls
if(xhead<0)
{
gameOver=true;
}
else if (xhead === tileCount)
{
gameOver = true;
}
else if (yhead < 0)
{
gameOver = true;
}
else if (yhead === tileCount)
{
gameOver = true;
}
for (let i = 0; i < snakeParts.length; i++)
{
let part = snakeParts[i];
if (part.x === xhead && part.y === yhead)
{
gameOver = true;
break;
}
}
if (gameOver) {
ctx.fillStyle = "white";
ctx.font = "50px Verdana";
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0", " magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2);
}
ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2);
return gameOver;
}
//draw the score
function drawScore()
{
ctx.fillStyle='white';
ctx.font="10px Verdana";
ctx.fillText("Score "+score,canvas.width-50,10);
}
//clear the screen after every game over
function clearScreen()
{
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
//Drawing snake on the canvas/board
function drawSnake() {
ctx.fillStyle = "green";
for (let i = 0; i < snakeParts.length; i++) {
let part = snakeParts[i];
ctx.fillRect(part.x * tileCount, part.y * tileCount, tileSize, tileSize);
}
// increment the snake when it eats apples.
snakeParts.push(new SnakePart(xhead, yhead)); //put an item at the end of the list next to the head
while (snakeParts.length > tailLength) {
snakeParts.shift(); // remove the furthet item from the snake parts if have more than our tail size.
}
ctx.fillStyle = "orange";
ctx.fillRect(xhead * tileCount, yhead * tileCount, tileSize, tileSize);
}
// to draw the apple on the screen
function drawApple()
{
ctx.fillStyle='red';
ctx.fillRect(xapple*tileCount,yapple*tileCount,tileSize,tileSize);
}
// change snake position as it moves
function changeSnakePosition()
{
xhead=xhead+xVelocity;
yhead=yhead+yVelocity;
}
//if snake eats apple , change the position of apple
function checkAppleCollision()
{
if(xapple===xhead && yapple===yhead)
{
xapple=Math.floor(Math.random()*tileCount);
yapple=Math.floor(Math.random()*tileCount);
tailLength++;
score++;
}
}
//movement of the snake
document.body.addEventListener('keydown',keyDown);
function keyDown(event)
{
//up
if(event.keyCode==38)
{
if(yVelocity==1)
return;
yVelocity=-1;
xVelocity=0;
}
//down
if(event.keyCode==40)
{
if(yVelocity==-1)
return;
yVelocity=1;
xVelocity=0;
}
//left
if(event.keyCode==37)
{
if(xVelocity==1)
return;
yVelocity=0;
xVelocity=-1;
}
//right
if(event.keyCode==39)
{
if(xVelocity==-1)
return;
yVelocity=0;
xVelocity=1;
}
}
drawGame();