Делаем игру Арканоид на Javascript. Урок HTML/CSS/JavaScript
📝В этом уроке мы создадим классическую игру “Арканоид“ на JavaScript. Отрисовку графики будем выполнять внутри элемента canvas. Мы напишем логику движения мяча, управление платформой и обработку столкновений мяча с кирпичами. Также научимся вести счет и отслеживать количество жизней игрока.
🔗 Ссылка на код:
❓ Есть вопрос или проблема по фронтенду?
Пиши в комментарии к видео или в чат канала в ТГ:
TG:
⌚️ Таймкоды:
0:00 Введение. Показываю геймплей игры
0:24 Добавляем элемент canvas в HTML
0:58 Пишем стили
1:33 Начинаем писать Javascript
6:49 Заполнение массива с блоками начальными значениями
8:43 Пишем функцию отрисовки мяча
9:58 Пишем функцию, которая будет вызываться каждый кадр
11:53 Пишем функцию отрисовки платформы
12:53 Пишем функцию отрисовки кирпичей сверху
16:34 Пишем функцию отрисовки счета
16:41 Пишем функцию отрисовки жизней
17:37 Пишем логику столкновений мяча с кирпичиками
21:54 Пишем логику управления платформой с помощью мыши
23:43 Пишем логику отталкивания мяча от стенок и платформы
28:38 Проверяем игру
✔️ Подписывайтесь на канал, обучаю фронтенду просто. Готовится много новых уроков :)
🎵 Права на фоновую музыку:
Chill Vibes by Alex-Productions |
Music promoted by
Creative Commons / Attribution 3.0 Unported License (CC BY 3.0)
1 view
435
129
5 months ago 00:58:39 1
Как делали Смуту
5 months ago 00:09:25 1
Сделал СМУТУ ЗА ЧАС из г*вна и палок в Unreal Engine 5
5 months ago 00:10:01 1
«Запад уволен на пенсию» – отныне решать дела Евразии будут Россия и Китай! Большая игра началась!
5 months ago 00:10:05 5
Ненависть девяти в State of Decay 2
5 months ago 00:11:32 1
Мы рождены, чтоб Кафку сделать былью. Соцрейтинг привязывают к банковским счетам в 40 странах
5 months ago 00:00:00 2
30 БОЕВ НА VIDAR | War Thunder | Стрим на заказ от Zombie01m
5 months ago 00:00:00 1
Делаем игру уже 8 лет
5 months ago 00:07:46 1
Как развить гибкость рук? / Растяжка пальцев для игры на гитаре
5 months ago 00:22:16 1
Разреши Вселенной сделать тебе хорошо | Татьяна Мужицкая | TEDxBolshayaSadovayaStreet