-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
111 lines (87 loc) · 2.6 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
const canvas = document.getElementById("snake");
const context = canvas.getContext("2d");
const box = 32;
const snake = [];
let count = 0;
let direction;
const btnInitial = document.getElementById('btnInitial');
const DIO = document.getElementById('dio');
btnInitial.onclick = () => {
DIO.style.width = '100px';
DIO.style.height = '100px';
canvas.style.display = 'initial';
btnInitial.style.height = '32px';
btnInitial.textContent = 'Reiniciar jogo';
btnInitial.onclick = () => {
window.location.reload(true);
}
}
const image = new Image(box, box);
function drawImageActualSize() {
context.drawImage(this, food.x, food.y, this.width, this.height);
}
snake[0] = {
x: 8 * box,
y: 8 * box,
};
const position = () => {
return {
x: Math.floor(Math.random() * 15 + 1) * box,
y: Math.floor(Math.random() * 15 + 1) * box,
};
}
let food = position();
const createBG = () => {
context.fillStyle = "#ffc107";
context.fillRect(0, 0, 16 * box, 16 * box);
};
const createLittleSnake = () => {
for (let i = 0; i < snake.length; i++) {
context.fillStyle = '#fd7e14';
context.fillRect(snake[i].x, snake[i].y, box, box);
}
};
const update = (event) => {
if (event.keyCode === 37 && direction !== 'right') direction = 'left';
if (event.keyCode === 38 && direction !== 'down') direction = 'up';
if (event.keyCode === 39 && direction !== 'left') direction = 'right';
if (event.keyCode === 40 && direction !== 'up') direction = 'down';
};
const drawFood = () => {
image.src = './dio.png';
image.onload = drawImageActualSize;
};
document.addEventListener('keydown', update);
const startGame = () => {
if (snake[0].x > 15 * box && direction !== 'left') snake[0].x = 0;
if (snake[0].x < 0 && direction !== 'right') snake[0].x = 15 * box;
if (snake[0].y > 15 * box && direction !== 'up') snake[0].y = 0;
if (snake[0].y < 0 && direction != 'down') snake[0].y = 15 * box;
for (let i = 1; i < snake.length; i++) {
if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
clearInterval(game);
alert(`😲 Game over 😭\n\nYou eat ${count} 🥓`);
}
}
createBG();
createLittleSnake();
drawFood();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'right') snakeX += box;
if (direction === 'left') snakeX -= box;
if (direction === 'up') snakeY -= box;
if (direction === 'down') snakeY += box;
if (snakeX !== food.x || snakeY !== food.y) {
snake.pop();
} else {
count++;
food = position()
}
const newHead = {
x: snakeX,
y: snakeY,
};
snake.unshift(newHead);
};
const game = setInterval(startGame, 100);