Цветной арканоид на JavaScript

Всё как на старых приставках.

Арканоид — классическая компьютерная игра. Сегодня мы её воссоздадим.

Суть игры такая:

• свер­ху игро­во­го поля сто­ят несколь­ко рядов кир­пи­чей;
• по полю дви­жет­ся шарик, кото­рый при каса­нии уби­ра­ет кир­пич и отска­ки­ва­ет в про­ти­во­по­лож­ную сто­ро­ну;
• от стен и вер­ха шарик тоже отска­ки­ва­ет;
• вни­зу есть подвиж­ная плат­фор­ма, как ракет­ка;
• что­бы шарик не упал вниз, игрок дви­га­ет плат­фор­му вле­во или впра­во, под­став­ляя её под шарик;
• если шарик пада­ет мимо плат­фор­мы — игра оста­нав­ли­ва­ет­ся или закан­чи­ва­ет­ся совсем, смот­ря как запро­грам­ми­ро­вать;
• цель игры — сбить все кир­пи­чи и не дать шари­ку упасть.

Мы сделаем свою версию с такой же механикой, но с некоторыми отличиями. А в следующих проектах добавим сложности и новые возможности для игры. За основу возьмём код программиста Stalker с гитхаба .

Логика игры

Если вы видели наш проект с пинг-понгом , то многое вам будет уже знакомо. Например, механика проверки на касание объектов, покадровая отрисовка игры и отскок шарика со сменой направления — всё это мы уже делали в той игре.

Чтобы было понятно, в какой последовательности мы пишем код, вот общая структура:

1. Гото­вим стра­ни­цу и рису­ем на ней игро­вое поле. Всё осталь­ное будет про­ис­хо­дить в скрип­те.
2. Заво­дим пере­мен­ные, кото­рые будут отве­чать за напол­не­ние уров­ня, цвет и раз­мер всех игро­вых эле­мен­тов.
3. Сра­зу поме­ща­ем всё, что отно­сит­ся к кир­пи­чам, в одну боль­шую пере­мен­ную, с кото­рой будем рабо­тать всю игру.
4. Добав­ля­ем функ­цию про­вер­ки на каса­ние объ­ек­тов — вся игра будет стро­ить­ся на ней.
5. Дела­ем глав­ный цикл игры, в кото­ром по оче­ре­ди сдви­га­ем все объ­ек­ты, кото­рые дви­жут­ся, и уби­ра­ем те кир­пи­чи, кото­рые нуж­но убрать. Каж­дый кадр всё будет отри­со­вы­вать­ся зано­во, что­бы был эффект непре­рыв­но­го дви­же­ния.

Готовим страницу

Единственное, что нам здесь понадобится, — сделать стилями чёрный фон, чтобы цветные кирпичи смотрелись на нём эффектнее. Всё остальное берём из шаблона пустой страницы. Пока что на экране будет чернота, рисовать будем дальше.

Переменные

Для игры нам понадобятся две основные переменные (помимо всяких вспомогательных).

Первая переменная отвечает за дизайн уровня — это двумерный массив, где каждая строка отвечает за свой ряд кирпичей. Сами кирпичи сразу обозначаются буквами, которые отвечают за их цвет. Если кирпичей нет, то ряд пустой и там ничего рисоваться не будет. Меняем эту переменную — меняется и внешний вид уровня. В будущем этой переменной может быть много дизайнов уровней.

Вторая переменная — одномерный массив, в котором хранится вся информация обо всех кирпичах: координаты, цвет и размеры каждого кирпича. Именно с этой переменной мы и будем работать всю игру — в самом начале поместим туда все кирпичи из переменной с дизайном, а потом будем убирать их оттуда при касании шарика.

Проверка на касание объектов

Это настолько востребованная функция у разработчиков игр, что проще взять уже готовую, чем писать самому с нуля. В проекте используется функция с сайта Mozilla для разработчиков :

Отслеживаем нажатия на клавиши

Чтобы игрок мог управлять движением платформы, добавим обработчик нажатий на клавиши.

Стрелки влево и вправо двигают платформу в стороны, а пробел запускает шарик, если он не движется. Как только игрок отпускает стрелки, платформа перестаёт двигаться.

Главный цикл игры

Вся игра — это один большой цикл, где каждое новое положение элементов отрисовывается в новом кадре. Последовательность действий будет такая:

1. Очи­ща­ем игро­вое поле
2. Сдви­га­ем плат­фор­му, если было нажа­тие на стрел­ки, и сле­дим, что­бы она не уле­те­ла за гра­ни­цы стен.
3. Дви­га­ем шарик со сво­ей ско­ро­стью и направ­ле­ни­ем и смот­рим, что­бы он отска­ки­вал от стен и верх­ней гра­ни­цы.
4. Если шарик упа­дёт вниз мимо платформы-ракетки — поме­ща­ем его на стар­то­вую пози­цию и оста­нав­ли­ва­ем, пока не игрок не нажмёт про­бел.
5. Если шарик кос­нул­ся плат­фор­мы — дела­ем отскок в про­ти­во­по­лож­ную сто­ро­ну.
6. Когда шарик кос­нёт­ся кир­пи­ча — тоже дела­ем отскок и сра­зу уби­ра­ем этот кир­пич.
7. И толь­ко в самом кон­це мы отри­со­вы­ва­ем все игро­вые эле­мен­ты на сво­их новых пози­ци­ях.

Запускаем игру

Для запуска достаточно одной команды в самом конце скрипта:

requestAnimationFrame(loop);

Вот теперь мы видим всю красоту:

Можно посмотреть, как это работает на странице проекта .

Готовый код игры

Что дальше

Сейчас у этой игры много проблем:

• плат­фор­ма малень­кая, и ловить шарик слож­но;
• нет услож­не­ния по ходу игры;
• нет под­счё­та очков;
• у игро­ка бес­ко­неч­ное коли­че­ство жиз­ней — воз­мож­но­стей уро­нить шарик;
• толь­ко один уро­вень;
• нет бонус­ных кир­пи­чей, кото­рые дают новые воз­мож­но­сти или боль­ше очков.

Что-то из это­го испра­вим в сле­ду­ю­щих вер­си­ях.