Делаю змейку, но при столкновении с препятствием у меня в коде осуществляется только выход из функции, которую повторно вызывает setInterval. Как закончить setInterval? Либо же как вообще рационально можно закончить игру.
Cам код:
var canvas = document.querySelector('canvas');
var fig = canvas.getContext('2d');
fig.fillStyle = 'red';
var arrSnake = [
[0, 20],
[20, 20],
[40, 20],
[60, 20],
[80, 20],
[100, 20]
],
heightSnake = 18,
lengthSnake = 18,
code,
count = 0,
previousCode = null,
direction;
//Создаём змейку
for (let value of arrSnake) {
fig.fillRect(value[0], value[1], lengthSnake, heightSnake);
}
//Генерируем рандомные координаты яблока
const randX = () => {
let foodX = Math.floor(Math.random() * (canvas.width));
if (foodX % 20 == 0) return foodX;
return randX();
}
const randY = () => {
let foodY = Math.floor(Math.random() * (canvas.height));
if (foodY % 20 == 0) return foodY;
return randY();
}
function Snake() {
this.right = () => {
//Проверка столкновений при движении вправо
for (let i = 0; i < arrSnake.length - 1; i++) {
if (arrSnake[arrSnake.length - 1][0] + 20 == arrSnake[i][0] &&
arrSnake[arrSnake.length - 1][1] == arrSnake[i][1]) {
alert('Game over');
return
}
}
//Проверка на столкновение со стеной
if (arrSnake[arrSnake.length - 1][0] + 20 > canvas.width) {
alert('Game over');
return
}
var arr = []
arr.push(arrSnake[arrSnake.length - 1][0]);
arr.push(arrSnake[arrSnake.length - 1][1]);
arr[0] += 20;
arrSnake.push(arr);
fig.fillRect(arrSnake[arrSnake.length - 1][0], arrSnake[arrSnake.length - 1][1], lengthSnake, heightSnake); //Рисуем голову
fig.clearRect(arrSnake[0][0], arrSnake[0][1], lengthSnake, heightSnake); //Удаляем хвост
arrSnake.shift();
};
this.down = () => {
//Проверка столкновений при движении вниз
for (let i = 0; i < arrSnake.length - 1; i++) {
if (arrSnake[arrSnake.length - 1][1] + 20 == arrSnake[i][1] &&
arrSnake[arrSnake.length - 1][0] == arrSnake[i][0]) {
alert('Game over');
return
}
}
//Проверка на столкновение со стеной
if (arrSnake[arrSnake.length - 1][1] + 20 > canvas.height) {
alert('Game over');
return
}
var arr = [];
arr.push(arrSnake[arrSnake.length - 1][0]);
arr.push(arrSnake[arrSnake.length - 1][1]);
arr[1] += 20;
arrSnake.push(arr);
fig.fillRect(arrSnake[arrSnake.length - 1][0], arrSnake[arrSnake.length - 1][1], lengthSnake, heightSnake);
fig.clearRect(arrSnake[0][0], arrSnake[0][1], lengthSnake, heightSnake);
arrSnake.shift();
};
this.up = () => {
//Проверка столкновений при движении вверх
for (let i = 0; i < arrSnake.length - 1; i++) {
if (arrSnake[arrSnake.length - 1][1] - 20 == arrSnake[i][1] &&
arrSnake[arrSnake.length - 1][0] == arrSnake[i][0]) {
alert('Game over');
return
}
}
//Проверка на столкновение со стеной
if (arrSnake[arrSnake.length - 1][1] - 20 < 0) {
alert('Game over');
return;
}
var arr = [];
arr.push(arrSnake[arrSnake.length - 1][0]);
arr.push(arrSnake[arrSnake.length - 1][1]);
arr[1] -= 20;
arrSnake.push(arr);
fig.fillRect(arrSnake[arrSnake.length - 1][0], arrSnake[arrSnake.length - 1][1], lengthSnake, heightSnake);
fig.clearRect(arrSnake[0][0], arrSnake[0][1], lengthSnake, heightSnake);
arrSnake.shift();
};
this.left = () => {
//Проверка столкновений при движении влево
for (let i = 0; i < arrSnake.length - 1; i++) {
if (arrSnake[arrSnake.length - 1][0] - 20 == arrSnake[i][0] &&
arrSnake[arrSnake.length - 1][1] == arrSnake[i][1]) {
alert('Game over');
return
}
}
//Проверка на столкновение со стеной
if (arrSnake[arrSnake.length - 1][0] - 20 < 0) {
alert('Game over');
return
}
var arr = [];
arr.push(arrSnake[arrSnake.length - 1][0]);
arr.push(arrSnake[arrSnake.length - 1][1]);
arr[0] -= 20;
arrSnake.push(arr);
fig.fillRect(arrSnake[arrSnake.length - 1][0], arrSnake[arrSnake.length - 1][1], lengthSnake, heightSnake);
fig.clearRect(arrSnake[0][0], arrSnake[0][1], lengthSnake, heightSnake);
arrSnake.shift();
}
this.food = () => {
var apple = new Image();
apple.src = "apple.jpg"
apple.onload = () => {
fig.drawImage(apple, foodX, foodY, 18, 18)
}
}
document.body.addEventListener('keydown', () => {
code = event.keyCode;
//Если змейка движется вправо, но пользователь нажимает левую кнопку - продолжает двигаться вправо. И т.д.
if ((previousCode == 37 && code == 39) ||
(previousCode == 39 && code == 37) ||
(previousCode == 38 && code == 40) ||
(previousCode == 40 && code == 38)) {
code = previousCode;
}
if (!count) {
this.food();
count = 1
}
});
}
var foodX = randX(),
foodY = randY();
var snake = new Snake();
var run = setInterval(() => {
if (code == 39) {
previousCode = code;
snake.right();
} else if (code == 40) {
previousCode = code;
snake.down();
} else if (code == 38) {
previousCode = code;
snake.up();
} else if (code == 37) {
previousCode = code;
snake.left();
};
//Проверяем съела ли змейка яблоко
if (arrSnake[arrSnake.length - 1][0] >= foodX &&
arrSnake[arrSnake.length - 1][0] <= foodX + 18 &&
arrSnake[arrSnake.length - 1][1] >= foodY &&
arrSnake[arrSnake.length - 1][1] <= foodY + 18) {
//Добавляем змейке хвост
var snakeGrow = [];
snakeGrow.push(arrSnake[0][0]);
snakeGrow.push(arrSnake[0][1]);
snakeGrow[0] -= 20;
arrSnake.unshift(snakeGrow);
//добавляем новое яблоко
foodX = randX();
foodY = randY();
snake.food();
};
}, 500);
canvas {
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas width='398px' height='398px' id='canvas'></canvas>
</body>
</html>