-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
127 lines (99 loc) · 2.88 KB
/
script.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
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
let counter = document.getElementById('counter');
var grid = 16;
var count = 0;
var snake = {
x: 160,
y: 160,
dx: 0,
dy: grid,
cells: [],
maxCells: 2
};
var food = { // food for snake
x: 320,
y: 320
};
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min)) + min;
}
function loop(){
requestAnimationFrame(loop);
if(++count < 4){
return;
}
count = 0;
// Clear screen
context.clearRect(0, 0, canvas.width, canvas.height);
// Add velocity to snake coords
snake.x += snake.dx;
snake.y += snake.dy;
if(snake.x < 0){
// If snake is out of left border
snake.x = canvas.width - grid;
}
else if(snake.x >= canvas.width){
// If snake is out of right border
snake.x = 0;
}
if(snake.y < 0){
// If snake is out of top border
snake.y = canvas.height - grid;
}
else if(snake.y >= canvas.height){
// If snake is out of bottom border
snake.y = 0
}
snake.cells.unshift({x: snake.x, y: snake.y});
if(snake.cells.length > snake.maxCells){
snake.cells.pop();
}
// Create food on the field
context.fillStyle = 'black';
context.fillRect(food.x, food.y, grid - 1, grid - 1);
snake.cells.forEach((cell, index) => {
context.fillRect(cell.x, cell.y, grid - 1, grid - 1);
if(cell.x === food.x && cell.y === food.y){
// when snake eats the food
snake.maxCells++;
counter.textContent = snake.maxCells - 2;
// Create new food at random place
food.x = getRandomInt(0, 25) * grid;
food.y = getRandomInt(0, 25) * grid;
}
for (var i = index + 1; i < snake.cells.length; i++){
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
// If snake bump into itself create new one at random place
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 2;
snake.dx = 0;
snake.dy = grid;
counter.textContent = 0;
food.x = getRandomInt(0,25)*grid;
food.y = getRandomInt(0,25)*grid;
}
}
});
}
requestAnimationFrame(loop);
document.addEventListener('keydown', (e) => {
if(e.key === 'ArrowLeft' && snake.dx === 0){
snake.dx = -grid;
snake.dy = 0;
}
else if (e.key === 'ArrowUp' && snake.dy === 0){
snake.dy = -grid;
snake.dx = 0;
}
else if(e.key === 'ArrowRight' && snake.dx === 0){
snake.dx = grid;
snake.dy = 0;
}
else if(e.key === 'ArrowDown' && snake.dy === 0){
snake.dy = grid;
snake.dx = 0;
}
});