Создание HTML5 игр на JavaScript и Canvas

629 students enrolled

Создание HTML5 игр на JavaScript и Canvas

Пишем HTML5 арканоид и змейку на чистом JavaScript с нуля

629 students enrolled

Created by Aleksandr Bolotnikov

Last updated 6/2019

Russian

Preview this course

Создание HTML5 игр на JavaScript и Canvas

$13.99 $19.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

9 hours on-demand video
1 article
42 downloadable resources
Full lifetime access
Access on mobile and TV

Certificate of Completion

Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business

What you'll learn

Создание HTML5 игры Арканоид на чистом JavaScript и Canvas
Создание HTML5 игры Змейка на чистом JavaScript и Canvas
основы работы с HTML5 canvas
загрузка, отрисовка и движение спрайтов
вращение спрайтов на канвасе
обработка столкновений
запуск покадровой анимация из spritesheet
воспроизведение звуков
определение размеров игры под разные устройства и разные разрешения экрана

+ – HTML5 арканоид

19 lectures 04:06:27

знакомимся с функционалом и структурой проекта
выводим спрайт бэкграйнда на экран

Подготовка

Preview 19:36

Код игры с HD графикой

00:21

Рисуем на экране спрайты платформы и шара.

Выводим платформу и шар

Preview 23:17

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

Расставляем объекты на экране

13:53

Генерируем игровой уровень и выводим блоки на экран

Выводим блоки на экран

13:20

Реализуем движение платформы.

Реализуем движение платформы

20:09

Оставляем мяч лежать на платформе во время движения.

Удерживаем мяч на платформе во время движения

08:08

Реализуем запуск мяча с платформы.

Запуск мяча с платформы

16:14

Делаем первый запуск мяча с платформы под случайным углом.

Первый взлет мяча под случайным углом

15:41

Реализуем отскок мяча от блоков при столкновении.

Обработка столкновений мяча с блоками

15:44

Добавляем обработку столкновения мяча с платформой.

Отскок мяча от платформы

25:45

Уничтожаем блоки при столкновении с мячом.

Уничтожаем блоки

07:37

обработка столкновения мяча с краями экрана
исправляем баг с накладываем платформы на мяч
добавляем отталкивание мяча от краев экрана

Отскок мяча от краев экрана

16:40

не даем платформе выйти за края экрана
улучшаем обработку столкновения платформы с мячом

Не даем платформе выйти за края экрана

10:40

Разрабатываем завершение игры с поражением на уровне.

Поражение на уровне

06:09

Реализуем победное завершение уровня.

Победа на уровне

07:12

Проигрываем звук столкновения при касании шара блоков, платформы и краев экрана.

Загрузка и воспроизведение звуков

09:39

Выводим число набранных очков на экран.

Рендеринг текста

05:18

Создаем и запускаем покадровую анимацию вращения мяча из подготовленного spritesheet с набором фреймов.

Покадровая анимация

11:04

+ – HTML5 змейка

22 lectures 04:47:32

Знакомимся с функционалом игры и изучаем структуру проекта.

Подготовка

Preview 08:38

Рисуем спрайт фона на канвасе.

Вывод изображения на canvas

Preview 19:24

Разрабатываем прелоадер игровых ассетов и запускаем игру по факту загрузки всех ресурсов.

Прелоадер для спрайтов

21:43

Создаем и выводим на экран игровое поле.

Генерируем игровое поле

24:41

Создаем объект змейки и выводим на игровом поле соответствующие спрайты.

Создаем и рисуем змейку

14:17

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

Как управлять размерами канваса

14:17

Подгоняем высоту канваса по высоте экрана.

Подгоняем размеры игры по высоте

24:22

Заполняем канвас по ширине экрана браузера.

Заполняем канвас по ширине браузера

10:45

Запускаем змейку при старте игры.

Движение змейки

20:35

Стартуем движение змейки по факту нажатия на клавишу клавиатуры.

Отслеживание событий нажатия клавиш

05:15

Изменяем направление движения змейки в зависимости от нажатой кнопки.

Изменение направления

19:15

Выводим на поле яблоко.

Отрисовка яблока

06:33

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

Генерация яблока в случайной ячейке

16:12

Увеличение змейки при съедании яблока.

Поглощение яблока

08:12

Рисуем спрайт головы в качестве первой ячейки змейки.

Отрисовка головы змейки

05:25

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

Вращение спрайтов на канвасе

17:26

Создаем бомбу при старте игры.

Вывод бомб на поле

10:50

Обрабатываем возможные случаи завершения игры.

Завершение игры

08:50

Дорабатываем прелоадер для предзагрузки звуковых файлов.

Прелоадер звуков

08:39

Воспроизведение звуковых эффектов и музыкальной темы игры.

Воспроизведение звуков

08:14

Выводим текст на экран.

Рендеринг текста

05:15

Загружаем и используем внутри игры кастомный шрифт для текста в нашем проекте.

Использование собственных шрифтов

08:44

Requirements

Для комфортного усваивания материала курса вам потребуются знания основ HTML и синтаксиса JavaScript

Description

Видеокурс по разработке HTML5 игр на JavaScript.

В ходе курса мы разработаем 2 классические игры с нуля: арканоид и змейка. Мы напишем весь код на чистом JavaScript с использованием HTML5 canvas без использования сторонних библиотек.

В ходе обучения разбираем следующие темы:

основы работы с HTML5 canvas
загрузка, отрисовка и движение спрайтов
вращение спрайтов на канвасе
обработка столкновений
запуск покадровой анимация из spritesheet
воспроизведение звуков
изменение размеров игры в зависимости от разрешения экрана

Полученные знания станут отправной точкой к дальнейшему более глубокому практическому применению языка JavaScript и разработки игр на нем.
Будет полезно пройти этот курс до начала изучения вашего первого HTML5-фреймворка для создания игр.
Возможности игровых JS-движков станут намного понятнее, т.к. вы уже будете знать, как они реализованы и что за ними стоит.

Приятного просмотра и продуктивного обучения!

Who this course is for:

Начинающие JavaScript разработчики, увлекающиеся созданием игр