-
Notifications
You must be signed in to change notification settings - Fork 0
/
functionality.js
248 lines (222 loc) · 6.46 KB
/
functionality.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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
import Food from './food.js';
import BodyPart from './bodyPart.js';
// initial variable declarations
const canvas2dObj = document.getElementById('canvas').getContext('2d');
canvas2dObj.font = '20px calibri';
const WIDTH = canvas2dObj.WIDTH;
const HEIGHT = canvas2dObj.HEIGHT;
let snakeList, direction, eaten, timer, fps, unEatenFoodList;
let points = 0;
let gameRunning = false;
//instantiating the objects
const snakeBodyPart = new BodyPart();
const food = new Food();
// Drawing functions
function drawSnake() {
canvas2dObj.save();
for (let i = 0; i < snakeList.length; i++) {
if (i === 0) { // draw the head of the snake
canvas2dObj.fillStyle = 'black';
canvas2dObj.fillRect(snakeList[i].x,
snakeList[i].y,
snakeList[i].width,
snakeList[i].height);
} else { // draw the rest of the snakes body
canvas2dObj.fillStyle = snakeList[i].color;
canvas2dObj.fillRect(snakeList[i].x,
snakeList[i].y,
snakeList[i].width,
snakeList[i].height);
}
}
canvas2dObj.restore();
};
// abstract the method
function drawFood() {
canvas2dObj.save();
canvas2dObj.fillStyle = food.color;
canvas2dObj.fillRect(unEatenFoodList[0].x, unEatenFoodList[0].y, food.width, food.height);
canvas2dObj.restore();
}
function updateSnakeList() {
for (var i = snakeList.length - 1; i >= 0; i--) {
if (direction == 0) {
if (i == 0) {
snakeList[i].x -= snakeList[i].speedX;
} else {
snakeList[i].x = snakeList[i - 1].x;
snakeList[i].y = snakeList[i - 1].y;
}
} else if (direction == 1) {
if (i == 0) {
snakeList[i].y -= snakeList[i].speedY;
} else {
snakeList[i].x = snakeList[i - 1].x;
snakeList[i].y = snakeList[i - 1].y;
}
} else if (direction == 2) {
if (i == 0) {
snakeList[i].x += snakeList[i].speedX;
} else {
snakeList[i].x = snakeList[i - 1].x;
snakeList[i].y = snakeList[i - 1].y;
}
} else if (direction == 3) {
if (i == 0) {
snakeList[i].y += snakeList[i].speedY;
} else {
snakeList[i].x = snakeList[i - 1].x;
snakeList[i].y = snakeList[i - 1].y;
}
}
}
}
// Create a function for randomized x and y food positions
// logical problem
// should uupdate the food position only when the food is
// eaten
function updateFoodPosition() {
if(eaten === true) {
let posX = Math.floor(Math.random() * 450) + 30;
let posY = Math.floor(Math.random() * 450) + 30;
unEatenFoodList.push(new Food(posX, posY));
}
eaten = false;
}
// updates the snakes speed
function updateSnakeSpeed(){
timer++;
if (timer === 1000) {
snakeBodyPart.speedX = snakeBodyPart.speedX + 4;
snakeBodyPart.speedY = snakeBodyPart.speedY + 4;
timer = 0;
}
};
// change to WIDTH VALUES
// returns boolean true if a wall was encounterd
function checkWallCollision() {
if (snakeList[0].x === 0 || snakeList[0].y === 0 ||
snakeList[0].x === 500 || snakeList[0].y === 500) {
return true;
}
}
// main body collison function tester
function BodyCollision() {
let firstPart = true;
let firstBodyPart;
for (let bodyPart in snakeList) {
if (firstPart) {
firstPart = false
firstBodyPart = bodyPart
continue;
}
return ((Math.abs(firstBodyPart.x - bodyPart.x) < 5) &&
(Math.abs(firstBodyPart.y - bodyPart.y) < 5))
}
}
// food collison tester return a boolean value of true
function testFoodCollision(snakeHead, unEatenFood) {
return ((snakeHead.x <= unEatenFood.x + food.width) &&
(unEatenFood.x <= snakeHead.x + snakeBodyPart.width) &&
(snakeHead.y <= unEatenFood.y + food.height) &&
(unEatenFood.y <= snakeHead.y + snakeBodyPart.height));
}
function updateScoreBoard(){
points += 50;
document.getElementById('scoreBoard').innerText = 'Points: ' + points;
};
function cleanGameScreen() {
canvas2dObj.clearRect(0, 0, WIDTH, HEIGHT); // wipe the canvas
};
// sets the game over screen
function setGameOver(fps) {
cleanGameScreen();
canvas2dObj.fillText('Game Over\nTry Again Y/N?', 140, 140);
clearInterval(fps);
};
function createNewSnakePart() {
let NewX;
let NewY;
if (direction === 0) {
NewX = snakeList[0].x - 10;
NewY = snakeList[0].y;
} else if (direction === 1) {
NewX = snakeList[0].x;
NewY = snakeList[0].y - 10;
} else if (direction === 2) {
NewX = snakeList[0].x + 10;
NewY = snakeList[0].y;
} else if (direction === 3) {
NewX = snakeList[0].x;
NewY = snakeList[0].y + 10;
}
snakeList.unshift(new BodyPart(NewX, NewY));
}
//updates the game object positions on the canvas
function MainGameLoop() {
cleanGameScreen();
updateFoodPosition();
drawFood();
drawSnake();
updateSnakeSpeed();
if (testFoodCollision(snakeList[0], unEatenFoodList[0])) {
unEatenFoodList = []; //empty the food list
eaten = true;
createNewSnakePart();
// upate the score board if the snake ate the food
updateScoreBoard();
}
if(BodyCollision() || checkWallCollision()) {
setGameOver(fps);
}
updateSnakeList();
}
//Player game inputs, key strokes
document.onkeydown = function(event) {
if (event.keyCode === 65 && direction != 2) {
direction = 0; // int values too ambiguous, change them to strings, ie 'left', 'right'
} else if (event.keyCode === 87 && direction != 3) {
direction = 1;
} else if (event.keyCode === 68 && direction != 0) {
direction = 2;
} else if (event.keyCode === 83 && direction != 1) {
direction = 3;
} else if (event.keyCode === 89) {
startGame();
} else if (event.keyCode === 80) {
if (gameRunning === false) {
cleanGameScreen(); // wipe the canvas
startGame();
} else if (event.keyCode === 78) {
LoadInitialGamePage();
}
}
};
function initializeScoreBoard(){
points = 0;
document.getElementById('scoreBoard').innerText = 'Points: ' + points;
}
const startGame = () => {
snakeList = [
new BodyPart(220, 200),
new BodyPart(210, 200),
new BodyPart(200, 200)
];
initializeScoreBoard()
direction = 99;
unEatenFoodList = [];
eaten = true;
gameRunning = true;
timer = 0;
fps = setInterval(MainGameLoop, 50); // 164 fps
};
// initial game page
function LoadInitialGamePage() {
canvas2dObj.save();
cleanGameScreen();
canvas2dObj.font = '40px Calibri';
canvas2dObj.fillStyle = '#00cc00';
canvas2dObj.fillText('Snake, Click P to play', 100, 170);
canvas2dObj.restore();
}
LoadInitialGamePage();