Программная реализация игры «Змейка»

Правила игры «Змейка»

В классическом варианте игры правила следующие.

Имеется поле, условно представленное в виде сетки, на квадратных ячейках которой будет происходить действие игры. На этом поле случайным образом появляется еда (в виде определённым цветом закрашенной клеточки). Есть змейка (связная последовательность из нескольких клеток, расположенных по прямой или с поворотами), которая постоянно двигается с момента запуска игры и является управляемой (при помощи стрелок на клавиатуре). Если на пути у змейки появляется еда, то еда исчезает и тут же появляется на поле в другом месте, а сама змейка при этом удлиняется на одну клеточку.

Цель игры – накормить змейку, сделав её как можно длиннее.

Условия выхода из игры: игра оканчивается, когда змейка врезается в стену или в саму себя.

Программная реализация игры на JavaScript

Для отображения игрового поля и выполнения на нём действий «Змейки» потребуется браузер, а для написания кода программы с реализацией этой игры – любой удобный блокнот.

В его файлах будет создана разметка html-страницы – пустой html-файл с канвой для прорисовки самой игры. В блоке со стилями, который находится между открывающим и закрывающим тегами style (в заголовочной части файла html), задаются цветовое оформление web-страницы и расположение на ней игрового поля.

Пусть оно будет зелёного цвета с жёлтой границей и размещается по центру окна браузера с заданным тёмно-синим фоном.

Рисунок 1. Код. Автор24 — интернет-биржа студенческих работ

Вся логика программы будет записана в отдельном скриптовом файле с расширением .js, который затем вызывается из готового html-файла игры, подключаясь в атрибуте src тега script, применяемого для включения различных скриптов в разметку web-страницы.

Перечислим пошагово этапы создания скрипта snake.js для реализации игрыю

Сначала задаются все необходимые переменные.

К ним относится само поле, на котором будет происходить действие игры. Соответствующая переменная привязывается к элементу canvas из файла html и указывается, что созданное поле будет двухмерное (размерности 2d).

Всё это пространство поля размера 400px $\times$ 400px условно разделяется на клеточки, допустим размера 16px $\times$ 16px (задаётся в переменной grid). То есть поле будет содержать 25 клеток по вертикали и 25 – по горизонтали. Ещё создаётся переменная count, отвечающая за скорость игры.

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

Для объекта змейки также требуются начальные координаты, и ещё нужны её стартовая длина (допустим, 4 клеточки) и скорость (пусть сначала змейка будет перемещаться по горизонтали, а не по вертикали, т.е. dx = grid, dy = 0). Массив cells будет отвечать за содержимое хвоста змейки, который изначально является пустым.

Рисунок 2. Код. Автор24 — интернет-биржа студенческих работ

Далее используем генератор случайных чисел для размещения еды на произвольных свободных клеточках поля. Для написания этой функции с именем getRandomInt() обращаемся к готовому пакету Math с его возможностями, связанными с округлением чисел (при помощи функции floor()) и с выбором случайного числа, для чего применяется встроенная функция random().

Теперь самое сложное – организация основного цикла, который будет работать бесконечно в процессе всей нашей игры. На следующем рисунке представлен программный код соответствующей функции loop().

Рисунок 3. Код. Автор24 — интернет-биржа студенческих работ

Сначала здесь замедляется скорость игры с 60 кадров в секунду до 15 (т.е. в 4 раза) за счёт того, что игровой код будет срабатывать только один раз из четырёх. То есть до тех пор, пока счётчик count меньше 4, код не выполняется.

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

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

Далее представлен текст программы (на предыдущем рисунке он заменён многоточием), в котором расписывается содержимое функции по обработке каждого элемента змейки при её движении:

Рисунок 4. Код. Автор24 — интернет-биржа студенческих работ

Это прорисовка её элементов-квадратиков и рассмотрение различных возможных ситуаций: длина змейки увеличивается при съедании яблока (плюс появляется другое новое яблоко); проверяется, не столкнулась ли змейка сама с собой. Для этого просматриваем весь массив, определяющий змейку, и если в нём есть две клетки с одинаковыми координатами, то начинаем игру заново, задавая базовые стартовые параметры.

Затем добавляем управление змейкой при помощи стрелочек на клавиатуре, используя возможности js, связанные с прослушиванием и обработкой событий. Для этого будем использовать специальный метод addEventListener() и обозначим параметр функции, отвечающей за нажатие клавиш на клавиатуре компьютера буквой e. Далее проверяется код нажатой клавиши (это 37, 38, 39 и 40, соответственно, для стрелок влево, вверх, вправо и вниз) и выполняется смещение змейки на игровом поле в нужном направлении.

Рисунок 5. Код. Автор24 — интернет-биржа студенческих работ

И, наконец, осуществляется запуск игры из специальной функции requestAnimationFrame( ), которая будет вызывать бесконечный цикл игры, описанный здесь в 3 пункте.

Дополнительные опции в игре «Змейка»

Для улучшения описанной здесь реализации игры «Змейка» можно добавить ещё несколько опций, например:

• выводить на экране количество полученных в ходе игры очков (по количеству собранной змейкой еды на её пути);
• задавать случайное начальное положение змейки и еды при старте игры;
• создать запрет на прохождение змейкой сквозь стены поля;
• добавить кнопку с возможностью паузы в игре;
• добавить некоторые препятствия на игровом пространстве поля.