1

Делаю змейку, но при столкновении с препятствием у меня в коде осуществляется только выход из функции, которую повторно вызывает 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>

1 ответ 1

2

Объявляем поле gameover:

function Snake() {
      this.gameover = false;

и когда нужно устанавливаем его в true:

this.gameover = true;
alert('Game over');

в setInterval проверяем поле:

var run = setInterval(() => {
      if (snake.gameover) {
        return;
      }

Пример:

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.gameover = false;
  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]) {
        this.gameover = true;
        alert('Game over');
        return
      }

    }

    //Проверка на столкновение со стеной 
    if (arrSnake[arrSnake.length - 1][0] + 20 > canvas.width) {
      this.gameover = true;
      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]) {
        this.gameover = true;
        alert('Game over');
        return
      }

    }

    //Проверка на столкновение со стеной 
    if (arrSnake[arrSnake.length - 1][1] + 20 > canvas.height) {
      this.gameover = true;
      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]) {
        this.gameover = true;
        alert('Game over');
        return
      }

    }

    //Проверка на столкновение со стеной 
    if (arrSnake[arrSnake.length - 1][1] - 20 < 0) {
      this.gameover = true;
      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]) {
        this.gameover = true;
        alert('Game over');
        return
      }

    }

    //Проверка на столкновение со стеной 
    if (arrSnake[arrSnake.length - 1][0] - 20 < 0) {
      this.gameover = true;
      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 (snake.gameover) {
    return;
  }
  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>

Здесь я просто вышел из функции. Если хотите вовсе остановить таймер, то можете использовать clearInterval. Посмотрите примеры здесь: Stop setInterval. Лучше обработку логического конца игры оставить в Snake, а clearInterval вызывать снаружи.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.