Учебник Игры на JavaScript для начинающих

Программа курса

1. 1 Основы игрового движка

   1. Как делают игры: игровой цикл и FPS

      Что такое игровой цикл и FPS, почему игра обновляется 60 раз в секунду и из каких трёх шагов состоит каждый кадр любой игры.

   2. Canvas и контекст 2D

      Подключаем элемент canvas, получаем контекст 2D через getContext и делаем первый шаг к рисованию игровой графики на JavaScript.

   3. Рисуем спрайты и фигуры

      Учимся рисовать прямоугольники, круги и загружать картинку-спрайт цыплёнка на canvas — базовый набор команд для любой игровой графики.

   4. requestAnimationFrame: сердце игры

      Запускаем настоящий игровой цикл через requestAnimationFrame, очищаем кадр и двигаем цыплёнка по экрану — оживляем картинку.

2. 2 Движение и управление

   1. Состояние игрока и обновление

      Храним координаты и скорость цыплёнка в объекте state и обновляем их каждый кадр — основа движения любого игрового объекта.

   2. Управление с клавиатуры

      Ловим нажатия клавиш через события keydown и keyup и учим цыплёнка двигаться стрелками или WASD без рывков и залипаний.

   3. Мышь и тач-управление

      Получаем координаты мыши и касаний на canvas, переводим их в систему холста и ведём цыплёнка за пальцем или курсором.

   4. Дельта-время: плавность на любом FPS

      Считаем дельта-время между кадрами и умножаем на него скорость, чтобы цыплёнок двигался одинаково и на 30, и на 144 FPS.

3. 3 Первая игра — Понг

   1. Понг: мяч и ракетки

      Начинаем игру Понг: рисуем две ракетки и мяч, задаём им состояние и заставляем мяч лететь по экрану — каркас первой игры.

   2. Отскоки и столкновения мяча

      Учим мяч отскакивать от стен и ракеток в Понге: меняем знак скорости при ударе и делаем отскок зависимым от точки попадания.

   3. Счёт и UI

      Добавляем в Понг счёт: считаем голы, рисуем цифры на canvas методом fillText и показываем игроку текущий результат матча.

   4. Простой ИИ-противник

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

4. 4 Коллизии

   1. AABB: прямоугольные столкновения

      Разбираем AABB — проверку пересечения двух прямоугольников по осям: четыре сравнения координат, на которых держатся столкновения в играх.

   2. Круговые столкновения

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

   3. Реакция на столкновение

      Что делать после удара: выталкивать объекты из пересечения, останавливать или отражать движение, чтобы цыплёнок не проваливался сквозь стены.

   4. Оптимизация: пространственная сетка

      Когда объектов сотни, проверять всех со всеми дорого: разбиваем мир на сетку ячеек и сравниваем только соседей — ускоряем коллизии.

5. 5 Змейка

   1. Сетка и движение змейки

      Строим Змейку на сетке клеток: храним тело как список сегментов и двигаем змейку по шагам, добавляя голову и убирая хвост.

   2. Еда, рост и счёт

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

   3. Проигрыш и рестарт

      Завершаем Змейку: проигрыш при ударе о стену или о собственное тело, экран Game Over и рестарт игры по нажатию клавиши.

6. 6 Платформер

   1. Гравитация и прыжок

      Начинаем платформер: добавляем цыплёнку гравитацию, вертикальную скорость и прыжок по нажатию — он падает и подпрыгивает как настоящий.

   2. Платформы и приземление

      Делаем платформы, на которые цыплёнок приземляется: проверяем коллизию сверху, останавливаем падение и разрешаем прыжок только с земли.

   3. Камера за героем

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

   4. Тайловые уровни

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

   5. Сбор предметов и враги

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

7. 7 Графика и звук

   1. Спрайт-листы и анимация персонажа

      Анимируем цыплёнка: вырезаем кадры из спрайт-листа методом drawImage и переключаем их по таймеру, чтобы получить бег и прыжок.

   2. Тайлсеты и параллакс

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

   3. Звук и музыка в игре

      Добавляем звук: проигрываем эффекты прыжка и монетки через Audio и запускаем фоновую музыку, не забывая про разрешение от браузера.

   4. Частицы и эффекты

      Делаем сочные эффекты: система частиц для искр от монеток и облачка пыли при прыжке — много мелких спрайтов с короткой жизнью.

8. 8 Архитектура игры

   1. Игровые состояния

      Наводим порядок: разделяем игру на состояния меню, игра, пауза и Game Over и переключаемся между ними по одному правилу.

   2. Сущности и компоненты (ECS лайт)

      Упрощаем код большой игры: описываем объекты как сущности с компонентами-данными вместо длинных классов — лёгкая версия ECS.

   3. Загрузка ресурсов и прелоадер

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

   4. Сохранение прогресса

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

9. 9 Геймдизайн и баланс

   1. Что делает игру весёлой: кор-луп

      Разбираем кор-луп — главную петлю действий, ради которой в игру хочется играть снова: цель, действие, награда и снова цель.

   2. Сложность и кривая обучения

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

   3. Очки, комбо и обратная связь

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

   4. Плейтест и итерации

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

10. 10 Релиз

    1. Адаптив и мобильное управление

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

    2. Производительность и профилирование

       Учим игру не тормозить: находим узкие места через профайлер браузера и убираем лишние рисования, чтобы держать стабильные 60 FPS.

    3. Финальный проект: своя аркада

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

    4. Публикация игры на itch.io

       Выкладываем готовую игру в интернет: упаковываем проект, заливаем на itch.io и оформляем страницу, чтобы друзья могли сыграть по ссылке.