Створи свою першу груПочатківці в програмуванні
Хочете вивчити JavaScript не на абстрактних задачах, а на тому, що рухається, стрибає й реагує на кожне натискання.
18+ Від нуля Наживо онлайн
Веб-ігри: розробка
HTML, CSS, JavaScript, Canvas і Three.js: ігровий цикл, анімації, керування, звук, 2D- і 3D-сцени та публікація гри, що відкривається в будь-якому браузері.
ФорматЖиві заняття з ментором
РезультатГотова браузерна гра
РівеньВід нуля
Після курсуСертифікат LeoGame
Про курс
Від першого заняття до завершеного проєкту
Браузерна гра — найкоротший шлях від ідеї до гравця: жодних інсталяторів, лише посилання. На курсі ви з нуля опануєте HTML, CSS і JavaScript, напишете власний ігровий цикл на Canvas, зберете 3D-сцену в Three.js і опублікуєте гру, яку можна відкрити і з комп’ютера, і зі смартфона.
Для кого цей курс
Веб-розробники
Вже знаєте HTML, CSS чи JS і хочете додати до своїх навичок ігровий цикл, анімації, колізії та 3D у браузері.
Ті, хто хоче швидкий результат
Мрієте про гру, якою можна поділитися просто посиланням — без магазинів застосунків, інсталяторів і важких рушіїв.
Результат навчання
Після курсу ви зможете
Кожен модуль додає нову частину до фінальної роботи — теорія одразу закріплюється практикою.
- Верстати ігрові екрани на HTML і CSS: меню, HUD і адаптивні layout-и
- Писати на JavaScript ігровий цикл на requestAnimationFrame з урахуванням delta time
- Малювати 2D-графіку на Canvas: спрайти, sprite sheet-анімацію, тайлові карти й паралакс
- Будувати 3D-сцени в Three.js: камера, світло, матеріали та моделі у форматі glTF
- Реалізовувати керування з клавіатури, миші й тачскріна, колізії, звук і таблицю рекордів
- Збирати проєкт через Vite і публікувати гру на GitHub Pages
Програма
Що вивчаємо
6 модулів. Кожен закінчується практичним завданням, яке стає частиною вашого фінального проєкту.
01Структура HTML і стилі CSSЗакладаємо фундамент: як браузер будує сторінку і як перетворити її на ігровий інтерфейс.
- Семантичний HTML і структура ігрової сторінки
- Flexbox, Grid і шари інтерфейсу поверх гри
- CSS-змінні, transitions і keyframes-анімації
- Адаптивність: media queries, viewport, одиниці vw і vh
- Visual Studio Code, Live Server і DevTools
Практика: Верстаєте стартовий екран гри з меню, кнопками та анімованим логотипом.
02JavaScript та ігровий циклВивчаємо JavaScript через призму гри: стан, оновлення й рендер у циклі, що виконується десятки разів на секунду.
- Змінні, функції, масиви, об’єкти та класи
- DOM, події й обробка введення
- Ігровий цикл: requestAnimationFrame, update і render, delta time
- Стани гри: меню, гра, пауза, Game Over
- ES-модулі та організація коду
Практика: Пишете гру на реакцію з таймером, рахунком і перемиканням між станами гри.
03Canvas, спрайти й анімаціїПереходимо до справжньої 2D-графіки: малюємо гру на Canvas кадр за кадром.
- Canvas 2D API: фігури, зображення, трансформації
- Спрайти та sprite sheet-анімація
- Тайлові карти й камера, що слідкує за гравцем
- Паралакс-фон і прості системи частинок
- Завантаження ассетів і прелоадер
Практика: Створюєте 2D-сцену з анімованим персонажем, тайловим рівнем і паралакс-фоном.
04Three.js: сцена, камера, світло та 3D-об’єктиВиходимо в третій вимір: будуємо 3D-сцену в браузері на базі WebGL за допомогою Three.js.
- Scene, PerspectiveCamera і WebGLRenderer
- Geometry, Mesh і MeshStandardMaterial
- Ambient, Directional і Point Light, тіні
- Моделі glTF через GLTFLoader, зокрема експортовані з Blender
- OrbitControls і анімація об’єктів
Практика: Збираєте інтерактивну 3D-сцену з імпортованими моделями, світлом і керованою камерою.
05Керування, колізії, звук, UI та адаптивністьПеретворюємо сцену на гру: гравець керує, об’єкти стикаються, звучить музика, а інтерфейс підлаштовується під будь-який екран.
- Клавіатура, миша й тачскрін через Pointer Events
- Колізії AABB і кіл, Raycaster у Three.js
- Web Audio API: музика та звукові ефекти
- HUD, пауза й збереження рекорду в localStorage
- Адаптація під мобільні пристрої та devicePixelRatio
Практика: Додаєте до своєї гри керування з клавіатури й тачскріна, зіткнення, звук і таблицю рекордів.
06Публікація гри в браузеріДоводимо гру до релізу: збираємо, оптимізуємо й викладаємо онлайн, щоб нею можна було поділитися посиланням.
- Production-збірка через Vite
- Оптимізація ассетів і профілювання в DevTools
- Git, GitHub і публікація на GitHub Pages
- Іконка, мета-теги та прев’ю для соцмереж
- Плейтест у групі та презентація
Практика: Публікуєте свою гру онлайн і презентуєте її групі просто за посиланням.
Інструменти
Чим працюємо
Професійні інструменти, якими користуються в ігровій індустрії. Перед стартом допоможемо все встановити й налаштувати.
HTML і CSSJavaScript (ES6+)Canvas APIThree.jsWeb Audio APIViteVisual Studio CodeGitHub Pages
Фінальний проєкт
Браузерна гра, опублікована онлайн
Власна 2D-гра на Canvas або 3D-гра на Three.js, яка відкривається за посиланням на комп’ютері та смартфоні. Ви проходите повний цикл — від ідеї й коду до збірки та публікації.
- Ігровий цикл, стани гри та рахунок на JavaScript
- Графіка й анімації на Canvas або 3D-сцена в Three.js
- Керування з клавіатури й тачскріна, звук і UI
- Збірка через Vite і публікація на GitHub Pages
Формат
Як проходить навчання
Живі заняття з ментором
Пояснення, демонстрація процесу й відповіді на запитання в реальному часі. Можна показати екран і одразу розібрати помилку.
Фідбек на кожну роботу
Конкретно: що працює, де проблема і який наступний крок. Ментор не робить завдання за вас — він вчить знаходити рішення.
Особистий кабінет
Матеріали, домашні завдання, здача робіт, оцінки та фідбек викладача зібрані в одному місці.
Сертифікат
Після успішного завершення програми студент отримує сертифікат LeoGame Academy та готовий проєкт для портфоліо.
Технічні вимоги
Курс невимогливий до заліза: достатньо сучасного 64-бітного комп’ютера чи ноутбука з 8 ГБ RAM (комфортніше — 16 ГБ) і свіжою версією Chrome або Firefox. Підійдуть Windows, macOS і Linux.
Перед стартом перевіримо ваш ПК
На консультації підкажемо, чи підходить конфігурація, та допоможемо встановити необхідні програми.
«На курсі з веб-ігор я нарешті зібрав власний проєкт на JavaScript і зрозумів, як пов’язані логіка, графіка та взаємодія з гравцем.»
FAQ
Питання про курс
Уже навчаєтесь у нас? Завдання, матеріали й фідбек — в особистому кабінеті.
Чи потрібно знати програмування до старту?
Ні, починаємо з HTML і CSS, а JavaScript вивчаємо на ігрових прикладах. Якщо ви вже знайомі з вебом, перші теми пройдуть швидше, і ментор дасть додаткові задачі.
Чому браузер, а не Unity чи Unreal?
Веб-гра запускається без встановлення, і її легко показати будь-кому за посиланням. До того ж JavaScript — універсальна навичка, яка знадобиться і поза GameDev.
Чи можна буде грати з телефона?
Так. Окремий модуль присвячений тач-керуванню та адаптації під різні екрани, тож гра працюватиме і на смартфоні.
Де буде розміщена моя гра?
Ми публікуємо проєкти на GitHub Pages — хостингу для статичних сайтів. Ви отримаєте публічне посилання на гру та репозиторій з кодом.
Інші програми
Усі курси Досліджуй далі
Дорослим · Unity · C#
Unity базис
Сцени, GameObject, фізика, базовий C#, UI та перший завершений 2D або 3D прототип.
2D- або 3D-ігровий прототипПрограма
Дорослим · Unreal Engine 5
Unreal Engine дизайн
Level Design, Blueprints, матеріали, освітлення, атмосфера та цілісна 3D-сцена.
Цілісне 3D-середовище в Unreal EngineПрограма
Дорослим · Game QA
QA ігор
Тест-дизайн, баг-репорти, механіки, UI, продуктивність, сумісність і баланс.
Тестова документація для ігрового проєктуПрограма
Почніть створювати власний проєкт
Розкажіть про досвід і ціль навчання. Ми підберемо групу, формат і реалістичний темп.
Веб-ігри: розробка18+ · Готова браузерна граЗаписатися