udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Продолжительность
8 ч 54 мин
Категория
HTMLКоличество уроков
40 Видео
Дата добавления
11 мая 2020 г., 17:21
Язык
Русский
Дата выхода
1 июн. 2019 г., 20:19
Дата обновления
29 апр. 2026 г., 07:49
Освойте создание игр на чистом JavaScript и разберитесь в работе HTML5 Canvas на практике, разработав две классические игры — арканоид и змейку. Курс подойдёт начинающим и тем, кто хочет глубже понять механику HTML5‑игр без фреймворков.
Что вы изучите в этом курсе
Материал построен вокруг практики: вы шаг за шагом создадите две полноценные игры и изучите ключевые техники разработки 2D‑игр на Canvas.
HTML5 Canvas с нуля
- Инициализация Canvas и работа с контекстом
- Очистка сцены и управление частотой перерисовки
- Принципы создания игрового цикла
Работа со спрайтами
- Загрузка и отображение графики
- Движение объектов и базовая физика
- Вращение изображений и управление координатами
- Покадровая анимация через spritesheet
Механики игр
- Обработка столкновений и границ сцены
- Создание игровых объектов и их взаимодействий
- Настройка сложности и скорости игры
Дополнительные возможности
- Подключение и воспроизведение звуков
- Адаптация размера игры под разные разрешения
- Подготовка проекта к дальнейшему развитию
Какие проекты вы создадите
Арканоид
Классическая игра, в которой вы запрограммируете:
- управление платформой
- физику отскоков
- разрушение блоков
- систему подсчёта очков
Змейка
Игра, помогающая глубже понять работу с координатами, таймингом и обновлением состояния:
- движение хвоста и головы
- генерацию еды
- детекцию столкновений
- логику роста змейки
Кому подойдёт этот курс
Курс рекомендуем тем, кто:
- начинает путь в веб‑разработке и хочет понять JavaScript на практике
- интересуется созданием игр и хочет разобраться во внутренней кухне HTML5‑движков
- планирует перейти к Phaser, Pixi или другим игровым фреймворкам
- предпочитает обучение через реальную разработку
Почему этот курс будет полезен
После прохождения вы:
- будете уверенно работать с Canvas и игровым циклом
- поймёте, как устроены простые игровые движки
- сможете создавать собственные мини‑игры без сторонних библиотек
- получите сильную базу для дальнейшего изучения JavaScript
Присоединяйтесь к курсу, создавайте свои первые HTML5 игры и раскрывайте возможности JavaScript через практику. Приятного обучения!
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:19:37Подготовка
- Урок 2. 00:23:18Выводим платформу и шар
- Урок 3. 00:13:54Расставляем объекты на экране
- Урок 4. 00:13:21Выводим блоки на экран
- Урок 5. 00:20:10Реализуем движение платформы
- Урок 6. 00:08:09Удерживаем мяч на платформе во время движения
- Урок 7. 00:16:15Запуск мяча с платформы
- Урок 8. 00:15:42Первый взлет мяча под случайным углом
- Урок 9. 00:15:45Обработка столкновений мяча с блоками
- Урок 10. 00:25:46Отскок мяча от платформы
- Урок 11. 00:07:38Уничтожаем блоки
- Урок 12. 00:16:41Отскок мяча от краев экрана
- Урок 13. 00:10:41Не даем платформе выйти за края экрана
- Урок 14. 00:06:10Поражение на уровне
- Урок 15. 00:07:13Победа на уровне
- Урок 16. 00:09:40Загрузка и воспроизведение звуков
- Урок 17. 00:05:19Рендеринг текста
- Урок 18. 00:11:05Покадровая анимация
- Урок 19. 00:08:39Подготовка
- Урок 20. 00:19:25Вывод изображения на canvas
- Урок 21. 00:21:44Прелоадер для спрайтов
- Урок 22. 00:24:42Генерируем игровое поле
- Урок 23. 00:14:18Создаем и рисуем змейку
- Урок 24. 00:14:18Как управлять размерами канваса
- Урок 25. 00:24:23Подгоняем размеры игры по высоте
- Урок 26. 00:10:46Заполняем канвас по ширине браузера
- Урок 27. 00:20:36Движение змейки
- Урок 28. 00:05:16Отслеживание событий нажатия клавиш
- Урок 29. 00:19:16Изменение направления
- Урок 30. 00:06:34Отрисовка яблока
- Урок 31. 00:16:13Генерация яблока в случайной ячейке
- Урок 32. 00:08:13Поглощение яблока
- Урок 33. 00:05:26Отрисовка головы змейки
- Урок 34. 00:17:27Вращение спрайтов на канвасе
- Урок 35. 00:10:51Вывод бомб на поле
- Урок 36. 00:08:51Завершение игры
- Урок 37. 00:08:40Прелоадер звуков
- Урок 38. 00:08:15Воспроизведение звуков
- Урок 39. 00:05:16Рендеринг текста
- Урок 40. 00:08:45Использование собственных шрифтов
Автор - udemy
Комментарии
Пошёл за следующим на phaser)