Делаем игру Арканоид на Javascript. Урок HTML/CSS/JavaScript

preview_player
Показать описание
📝В этом уроке мы создадим классическую игру "Арканоид" на JavaScript. Отрисовку графики будем выполнять внутри элемента canvas. Мы напишем логику движения мяча, управление платформой и обработку столкновений мяча с кирпичами. Также научимся вести счет и отслеживать количество жизней игрока.

🔗 Ссылка на код:

❓ Есть вопрос или проблема по фронтенду?
Пиши в комментарии к видео или в чат канала в ТГ:

⌚️ Таймкоды:
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 Проверяем игру

✔️ Подписывайтесь на канал, обучаю фронтенду просто. Готовится много новых уроков :)

🎵 Права на фоновую музыку:
Creative Commons / Attribution 3.0 Unported License (CC BY 3.0)
Рекомендации по теме
Комментарии
Автор

Очень хороший гайд у тебя получился по созданию арканоиды. Надеюсь, что ты продолжишь делать контент для этого канала, ибо твои видосы - очень полезные для новичков. 👍

Unknown-xhrz
Автор

Обычно такие видосы от маленьких каналов не смотрибельная вида, но я был удивлен, даже каналы с приличным количеством просмотров не объясняют так.

kidll
Автор

я не знаю, кому молиться и каким алгоритмам приносить жертвы, но я обязательно найду 😂
спасибо огромное за ваши видео! это просто какой-то глоток свежего воздуха для меня
так устала от шарпов и плюсов, решила обновить стек, а тут вы с потрясающей практикой и замечательными объяснениями. так много каналов по фронту, но этот просто самородок какой-то среди них)) пожалуйста, продолжайте творить и делиться своими знаниями. успехов в продвижении!

meowry
welcome to shbcf.ru