Бесплатный курс · Для начинающих
Курс создания игр на JavaScript
С нуля до своей игры в браузере. Пошаговые уроки, практика и публикация первого проекта.
8 модулей · 39 шагов · В своём темпе
Знания в деле
Чему ты научишься на курсе
- Создашь историю с разными концовками
- Соберёшь кликер, игру на реакцию и «Память»
- Научишь игру работать со случайностью, временем и сохранениями
- Нарисуешь героя и соберёшь лабиринт с уровнями, звуком и управлением на телефоне
- Найдёшь ошибки, проверишь свои правила и сохранишь рабочую версию в Git
- Соберёшь свою игру, проведёшь плейтест и опубликуешь её по ссылке
Игры, которые ты создашь на курсе
Практика разработки браузерных игр: каждый проект добавляет новую механику и даёт работающий результат.
Кликер
Камень, ножницы, бумага
Поймай квадрат
Игра «Память»
Сбор предметов на Canvas
Побег из лабиринта
Своя игра по ссылке
От основ к собственной игре
Программа курса по разработке игр на JavaScript
Начинай с первого модуля, если раньше не писал код. Сначала разберёшь HTML и CSS, затем подключишь JavaScript и перейдёшь к Canvas. Внутри каждого проекта продолжай предыдущую версию: добавляй новую возможность, проверяй результат и пробуй своё изменение.
Первая игра и устройство веб-страницы
Законченная история с разными окончаниями, собственной веткой и удобным интерфейсом на телефоне.
01
Пробуждение кода: история с двумя исходамиСоздай первую историю на HTML: страницу с выбором и две концовки. Свяжи их ссылками, проверь переходы и добавь свой вариант событий.
02
CSS для игры: делаем историю читаемойПодключи один файл CSS ко всем сценам истории. Настрой шрифт, цвета и отступы, разберись с селекторами и оформи предупреждение отдельным классом.
03
Ветвление истории: сцены, файлы и собственная концовкаДобавь в историю новую сцену и собственную концовку. Разберись в относительных путях и проверь, что все ссылки ведут на нужные страницы.
04
Flexbox: располагаем варианты выбора на страницеРасположи варианты выбора рядом на широком экране и друг под другом на узком. Разберись с осями Flexbox, отступом gap и переносом элементов.
Дополнительно 3
Необязательные материалы: выбирай то, что интересно сейчас.
Обучение программированию через создание игрНеобязательное чтение после законченной истории. Продолжить бесплатный маршрут можно без этого материала.
Дополнение
Как научиться программировать с нуля через игрыНеобязательное чтение после законченной истории. Продолжить бесплатный маршрут можно без этого материала.
Дополнение
HTML-семантика для начинающих: собираем правильную структуру страницы по шагамНеобязательное чтение после законченной истории. Продолжить бесплатный маршрут можно без этого материала.
Дополнение
Основы JavaScript на маленьком кликере
Кликер с очками, энергией, покупкой, победой и перезапуском. Своя правка правила, поиск ошибки и рабочая версия в Git.
05
Переменные и числа: где игра хранит очкиПодключи JavaScript к странице и рассчитай очки и энергию в консоли браузера. Разберись с let, const, числами, строками и присваиванием на примере кликера.
06
Кнопки в JavaScript: DOM, функции и событияПокажи очки и энергию на странице и научи кнопки менять их по нажатию. Разберись с DOM, обработчиками событий и textContent на примере кликера.
07
Условия и правила: покупка, энергия и победаЗапрети сбор при нулевой энергии, добавь покупку улучшения и завершение игры. Разберись с условиями if и проверь, что происходит, когда очков не хватает.
08
Функции в JavaScript: параметры и returnНапиши функции для расчёта награды и проверки покупки. Научись передавать им значения, возвращать результат через return и вызывать их при нажатии кнопки.
09
Как найти ошибку в JavaScript, когда кнопка не работаетНайди и исправь ошибки в пути к файлу, выборе элемента и условии покупки. Разберись с сообщениями в консоли и проверь каждую правку в игре.
10
Завершаем кликер: перезапуск и проверка правилДобавь кнопку новой партии и проверь сбор кристаллов, покупку улучшения и победу. Затем сам измени правило восстановления энергии.
11
Git для первой игры: сохраняем версии и отменяем измененияСоздай локальный репозиторий Git, сохрани рабочую игру и отмени неудачное изменение. Разбери основные команды на файлах своего кликера.
Данные, правила и время
Случайный выбор, раунды игры, состояние в объектах и управляемые таймеры. Игра с ограниченным временем и безопасным перезапуском.
12
Массивы и случайный выбор: ход компьютераНаучи компьютер выбирать камень, ножницы или бумагу. Разберись с массивами, индексами и случайными числами, затем сделай выбор по нажатию кнопки.
13
Камень, ножницы, бумага: переводим правила в кодСобери игру «Камень, ножницы, бумага» и проверь все девять сочетаний ходов. Добавь счёт, матч до трёх побед и кнопку новой партии.
14
Объекты в JavaScript: храним данные карточекСобери свойства карточки в объект. Разберись, почему присваивание не копирует объект, и научись создавать новый набор карточек при сбросе игры.
15
Таймеры в JavaScript: запуск и остановка игрыДай игроку секунду на подготовку и десять секунд на набор очков. Разберись с setTimeout и setInterval, остановкой таймеров и повторным запуском игры.
16
Поймай квадрат: случайные координаты и партия на времяСделай игру, в которой нужно попадать по квадрату за отведённое время. Научись выбирать случайные координаты и удерживать цель внутри поля.
Коллекции и сохранение прогресса
Массивы карточек, циклы и игра на поиск пар. Запуск игры через локальный HTTP-сервер и сохранение прогресса в браузере.
17
Циклы: строим поле карточек из массиваСоздай поле карточек из массива с помощью циклов for и for...of. Добавь обработчики нажатий и научись менять число карточек без копирования HTML.
18
Игра «Память»: ищем пары карточекСобери игру «Память»: сравнивай карточки, закрывай несовпавшие пары с задержкой и считай попытки. Добавь перемешивание, победу и начало новой партии.
19
Локальный сервер: запускаем игру по HTTPЗапусти игру через локальный сервер Python и открой её по HTTP. Разберись с адресом, портом и папкой проекта, затем найди ошибку загрузки во вкладке Network.
20
Сохраняем рекорд и настройки игры в localStorageСохрани рекорд и оформление игры с помощью localStorage и JSON. Научись загружать данные после обновления страницы и обрабатывать ошибки сохранения.
Canvas: рисуем героя и управляем им
Координаты и рисунок героя, игровой цикл и движение с клавиатуры. Собираем предметы, проверяем столкновения со стенами и создаём свою сцену.
21
Первый Canvas: координаты и команды рисованияРисуем сцену из прямоугольников и круга, разбираем координаты, цвет, размеры холста и перерисовку из данных.
22
Рисуем кота на Canvas: функции и координатыСобираем кота из фигур Canvas, привязываем все части к одной точке и рисуем второго героя теми же функциями.
23
Игровой цикл на JavaScript: двигаем героя и ставим игру на паузуПродолжи сцену с героем: отдели update от render, рассчитай deltaTime и управляй одним циклом. Проверь первый кадр, паузу и разные шаги времени.
24
Движение персонажа: удержание клавиш, скорость и границыДобавь управление прежним героем через состояние клавиш. Разбери фокус, отпускание, диагональ и границы с учётом размера персонажа.
25
Столкновения на Canvas: собери предметы и обойди стенуПроверь пересечение прямоугольников и добавь стену. Каждый предмет приносит очки только один раз. Придумай свой предмет с другим эффектом.
Лабиринт: уровни, звук и управление
Создаём карту из данных, добавляем ключ, дверь и выход. Управляем состояниями игры, загружаем изображения, подключаем звук и кнопки для телефона.
26
Уровень как данные: карта из клетокПревращаем массив строк в стены, старт и предметы: строки, столбцы, вложенный цикл и размер клетки.
27
Побег из лабиринта: ключ, дверь и следующий уровеньПродолжаем Canvas-лабиринт: ключ открывает дверь, первая карта сменяется второй, а новая попытка восстанавливает состояние.
28
Состояния игры: старт, пауза, результат и рестартУправляем началом партии, паузой, победой и перезапуском: один цикл, очистка ввода и полный сброс лабиринта.
29
Загрузка изображений: Promise, async/await и запасной рисунокЗаменяем рисунок кота локальным SVG, ждём загрузку и продолжаем игру при ошибке. Сначала события, затем Promise и async/await.
30
Звук в игре: включение, пауза и обработка ошибокДобавляем фоновую музыку и эффект ключа, сохраняем выбор игрока и продолжаем игру без звука при ошибке воспроизведения.
31
Игра на телефоне: экранные кнопки и Pointer EventsДобавляем экранные стрелки, независимые касания и захват указателя. Проверяем отпускание за кнопкой, паузу и размер поля.
Своя игра: от идеи до проверки
Выбираем небольшую идею, собираем прототип со своими правилами, упрощаем код и проверяем игру. Проводим первый плейтест и исправляем то, что мешает игроку.
32
От идеи к брифу: выбираем игру, которую сможем закончитьВыбери небольшую игру из знакомых систем и составь бриф: правила, данные, конец партии и три этапа реализации.
33
Самостоятельный прототип: сначала одна работающая механикаСобери игру по собственному брифу: от данных и одного действия до правила, результата и полного рестарта.
34
Рефакторинг своей игры: функции, модули и проверка поведенияВыносим правило в чистую функцию и ES-модуль, убираем повтор и сохраняем поведение игры. Затем применяем приём к своему проекту.
35
Проверка игры: сценарии, границы и тесты правилВоспроизводим ошибочную победу, проверяем чистую функцию без npm и составляем таблицу проверок своей игры.
36
Первый плейтест: наблюдаем игрока и исправляем непонятноеПроводим наблюдение без подсказок, отличаем баг от неясного интерфейса и проверяем одно небольшое изменение своей игры.
Публикация и первая доработка
Готовим файлы и ресурсы, публикуем игру по ссылке и проверяем её после загрузки. Выбираем одну доработку по наблюдениям и выпускаем обновление.
37
Готовим игру к выпуску: файлы, ресурсы и чистый запускСобираем отдельную папку игры, проверяем пути, происхождение ресурсов и запуск распакованной копии. Готовим инструкцию для другого человека.
38
Публикуем браузерную игру через GitHub PagesРазмещаем свою HTML/CSS/JavaScript-игру на GitHub Pages. Проверяем папку проекта, пути, внешнюю ссылку и повторную публикацию.
39
Первая доработка после релиза: проверяем гипотезуВыбираем одно изменение по наблюдению, проверяем правила и выпускаем новую версию. Записываем только переходы партии в ограниченный локальный журнал.
Кому подходит курс
Для тех, кто хочет научиться программировать, создавая небольшие игры. Можно начать без опыта. Если уже знаешь немного HTML, CSS или JavaScript, проекты помогут связать отдельные темы и применить их на практике.
Как проходит бесплатное обучение
Это курс для самостоятельного прохождения: текстовые уроки, примеры кода и практические задания. Читай объяснение, запускай проект в браузере и пробуй менять игровые правила.
Все основные уроки доступны бесплатно. Проходи курс в своём темпе и возвращайся к нужным темам, когда потребуется.
Для старта понадобятся компьютер, браузер и редактор кода. Инструменты для следующих этапов настроишь по инструкциям в уроках.
Без лишних сомнений
Перед началом курса
О первых шагах, материалах и темпе обучения — ответы на частые вопросы.
Почему курс начинается с HTML и CSS, а не с JavaScript?
Сначала нужно разобраться, как устроена страница, на которой работает игра. В первом модуле ты создашь историю с выборами и настроишь её оформление. Затем подключишь JavaScript: добавишь действия, очки и правила.
Будут ли примеры кода и исходники?
В практических уроках есть код, файлы проектов и пояснения к запуску. Они помогают сверить свою работу и найти ошибку. Самостоятельные задания сначала пробуй выполнить сам, а затем обращайся к подсказкам и примерам решений.
Смогу ли я сделать игру не по готовому примеру?
Этому посвящена заключительная часть курса. Ты выберешь небольшую идею, опишешь правила и соберёшь собственный прототип из изученных механик. Цель — научиться принимать решения в коде и проверять их, а не только повторять готовую реализацию.
Сколько времени займёт прохождение?
Это зависит от твоей подготовки и времени на практику. Не ориентируйся только на прочитанные уроки: запускай проекты, выполняй задания и возвращайся к непонятным местам. Переходи дальше, когда можешь объяснить свою версию кода и изменить в ней небольшое правило.
От примера к собственной игре
Придумай своё правило и проверь его в игре
Начни с небольшого проекта: создай историю с выбором, запусти её в браузере и добавь свой вариант событий.
Открыть первый урок
Бесплатно · С нуля · В своём темпе