Всем привет!

Продолжаем делать игру для детей. В предыдущем видео мы настраивали проект. В этом видео мы затронем bundling (объединение и сжатие JS в бандл). А так же добавим и настроим канвас (HTMLCanvas). Канвас на самом деле прикольная штука! По сути это картинка - набор пикселей. И с помощью простых команд можно легко рисовать разные 2d фигуры. В общем приятного просмотра!

ВКонтакте • YouTube

00:00 Вступление
01:40 Настраиваем esbuild
08:35 Сжимаем JS бандл
09:38 Объясняю как дебажить
11:29 Знакомимся с HTMLCanvas
12:38 Добавляем canvas в наш html
12:25 Рассказываю про Development Tools
14:26 Убираем бордер вокруг canvas
15:12 Расширяем canvas во весь экран
22:56 Рисуем красный прямоугольник
25:57 Проблема при ресайзе
27:14 Добавляем рисование на каждый кадр
28:56 Добавляем простую анимацию
30:38 Нужно чистить экран
32:54 Столкновение с краем экрана
37:09 Заключение

Код посмотреть тут

Результат тут

Оглавление
1. Настраиваем проект
2. Добавляем canvas (мы тут)
3. Масштабирование игры
4. Добавляем интерактивность