Своя игра: создаём собственную «Змейку»

Работы на 10 минут, а удовольствия на целый день.

Не так давно мы разбирали, как искусственный интеллект учится играть в змейку. А теперь мы сами сделаем такую игру, чтобы ей могли насладиться обычные люди. Что нам понадобится:

• HTML, чтобы можно было играть прямо в браузере;
• CSS для украшений;
• JavaScript для самой игры.

Логика игры

У классической змейки правила простые:

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

Чтобы играть было проще, мы сделаем так, чтобы змейка не врезалась в стенки, а проходила сквозь них. Если что — сможете это сами потом настроить в коде, когда захотите посложнее.

Последовательность наших действий будет такой:

1. Делаем пустую HTML-страницу.
2. Настраиваем внешний вид с помощью CSS.
3. Рисуем игровое поле.
4. Пишем скрипт, который и будет отвечать за всю игру.

Делаем HTML-страницу

С этим всё просто: берём стандартный код и сохраняем его как файл snake.html.

Это даст нам пустую страницу, которую мы сейчас немного настроим стилями.

Настраиваем внешний вид

За внешний вид на странице у нас отвечает раздел <style>, поэтому мы просто добавим в него CSS-код:

Теперь у нас на странице нет лишних отступов, зато всё по центру, есть чёрный фон и граница вокруг игрового поля. Самое время создать само игровое поле.

Рисуем игровое поле

Поле делается очень просто:

<canvas id="game" width="400" height="400"></canvas>

400 пикселей в ширину, столько же в высоту, название поля — game. Этого достаточно, чтобы браузер отобразил холст с такими размерами и позволил нам на нём рисовать.

Пишем скрипт

1. Зададим все переменные, которые нам понадобятся.

2. Сделаем генератор случайных чисел. Он нам понадобится, чтобы размещать еду на поле случайным образом.

// Делаем генератор случайных чисел в заданном диапазоне
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

3. Напишем основной игровой цикл, который будет работать бесконечно.

4. Сделаем управление стрелочками на клавиатуре.

5. Запускаем игру. Для этого достаточно запустить предыдущий бесконечный цикл, поэтому пишем:

requestAnimationFrame(loop);

6. Наслаждаемся результатом:

Чтобы у вас тоже получилось такое, просто скопируйте готовый код, сохраните его как HTML-файл и откройте в браузере.

Готовый код

Как улучшить

Этот код — самая простая реализация змейки, и игру можно сделать ещё лучше:

• выводить количество набранных очков;
• сделать так, чтобы нельзя было проходить сквозь стены;
• добавить препятствия;
• поставить таймер — кто больше соберёт еды за 5 минут;
• добавить вторую змейку и играть вдвоём.

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