Создание HTML5 игр на JavaScript и Canvas
4.8 (37 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
629 students enrolled

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

Пишем HTML5 арканоид и змейку на чистом JavaScript с нуля
4.8 (37 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
629 students enrolled
Last updated 6/2019
Russian
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 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
  • воспроизведение звуков
  • определение размеров игры под разные устройства и разные разрешения экрана
Course content
Expand all 41 lectures 08:54:00
+ 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

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

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 разработчики, увлекающиеся созданием игр