Как сделать змейку на JS c canvas

как сделать змейку на javascript
Метки: / /

В этой статье вы прочитаете как сделать змейку на JavaScript, максимально просто и понятно, с использование canvas, но если вы не умеете работать с ним, то прочитайте две статьи.

  1. Canvas HTML. Основы создания фигур на javascript;
  2. Canvas анимация на JavaScript, простыми словами и без воды;

Также в конце статье вы сможете скачать файлы, этой игры, и по экспериментировать, что то добавить или убрать.

HTML:

Сначала нужно сделать HTML документ, в котором будет содержатся элемент canvas, котоый нужен нам для отображения игры.

Я не буду особо объяснять что, к чему тут, так как, всё должно быть понятно, единственное, мы в head, добавили стиль, для обводки canvas элемента, чтобы было можно отличить игровое поле, также подключаем скрипт JS.

JS код игры змейка:

Теперь перейдём к самому главному, это ко коду игры змейка на javascript, тот вариант, который я покажу не будет самым лучшем и проработанным, но это только потому, что эта стать больше для новичков.

Основы:

Для начало нужно объявить несколько переменных и массивов, для работы игры.

Если вы уже изучали canvas, то первые две строчки для вас должны быть понятны, потом идёт объявление переменной в которой будет хранится количество съеденных яблок.

Дальше идёт переменная blockSize которая хранить в себе размер одной ячейки, потом переменная хранящая направление змейки.

Последнее, это два массива, в positionApple, хранится позиция яблока, индекс ноль это позиция по X, индекс один позиция по Y, также там с помощью функции positionAppleRandom(), назначается рандомное значение, но об ней ниже, также массив snakeBody, хранит позиции блоков змейки.

Функция positionAppleRandom:

Как говорилось выше, это функция просто даёт случайное значение для позиции яблока, вот его код.

Тут тоже всё просто, Math.random(), даёт случайное число, потом его умножаем на 50, тем самым, число будет равно от нуля до пятидесяти, потом просто округляет его с помощью Math.round и возвращает.

Направление змейки:

Для этого будем использовать событие, смотря какая стрелка нажата на клавиатуру, так и будем менять переменную direction.

Как видите всё просто, тут даже объяснять не чего не надо, единственное, в качестве второго условия, используется проверка на то, что идёт не противоположное направление, чтобы змейка не пошла в обратную сторону.

Основной код игры:

Под основным кодом, имеется ввиду, где будет происходить вся логика, в нашем случае это в интервале.

Тут всё должно быть просто, просто делаем интервал с помощью функции setInterval(), теперь посмотрим что внутри интервала.

В начале мы всё стираем с игрового поля, потом идёт код для движения нашей змейки, суть его в том, что он в начало массива будет добавлять новую позицию зависимо от направления или переменной direction, это происходит благодаря функции snakeBody.unshift(), ну и потом удаляет последний элемент массива, благодаря snakeBody.pop().

Таким образом у нас движется змейка.

Первая часть этого кода, мы через цикл рисуем каждый блок змейки, ну и потом яблоко рисуем.

Тут мы проверяем, если позиция первого элемента массива цела змейки, равен позиции яблока, то по сути просто меняется позиция яблока, ну и увеличивается переменная счётчика на один.

Игра завершается, когда змейка вышла за приделы поля, тогда интервал выключается и выводит на экран счёт.

Вывод:

В этой статье вы прочитали как сделать змейку на чистом javascript, надеюсь вам статья понравилась.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 1
Средняя оценка: 4,00
Загрузка...

Поделится:

Также рекомендую: