Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Создание HTML5 игр на JavaScript и Canvas
Highest Rated
Rating: 4.7 out of 5(85 ratings)
838 students

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

Пишем HTML5 арканоид и змейку на чистом JavaScript с нуля
Highest Rated
Created byAleksandr Bolotnikov
Last updated 6/2019
Russian

What you'll learn

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

Course content

2 sections • 41 lectures • 8h 53m total length

  • Подготовка19:36

    • знакомимся с функционалом и структурой проекта

    • выводим спрайт бэкграйнда на экран

  • Код игры с HD графикой0:21
  • Выводим платформу и шар23:17

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


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

    • правильно позиционируем спрайты на экране

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


  • Выводим блоки на экран13:20

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


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

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

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

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


  • Запуск мяча с платформы16:14

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


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

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


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

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


  • Отскок мяча от платформы25:45

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


  • Уничтожаем блоки7:37

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


  • Отскок мяча от краев экрана16:40

    • обработка столкновения мяча с краями экрана

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

    • добавляем отталкивание мяча от краев экрана


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

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

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


  • Поражение на уровне6:09

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


  • Победа на уровне7:12

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


  • Загрузка и воспроизведение звуков9:39

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


  • Рендеринг текста5:18

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


  • Покадровая анимация11:04

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


Requirements

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

Description

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

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

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

  • основы работы с HTML5 canvas

  • загрузка, отрисовка и движение спрайтов

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

  • обработка столкновений

  • запуск покадровой анимация из spritesheet

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

  • изменение размеров игры в зависимости от разрешения экрана

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

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


Who this course is for:

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

Report abuse