Игра «Арканойд»

Игра будет состоять из одного уровня, последующие уровни можно будет сделать по образцу.

Настройка приложения

Для начала потребуется найти картинки, которые будут у нас в качестве блоков. Пусть это будут яблоки.

Далее, нужно изображение для площадки (от которой будет отскакивать шар). Например, такое:

Поскольку в MIT App Inventor нет простого способа определить, коснулся ли шар конкретной границы экрана (например, нижней). Поэтому для отслеживания касания нижней границы экрана мы используем следующую хитрость: создаём у нижнего края игровой области спрайт-объект, ширина которого равна ширине экрана. Этот спрайт выполняет роль «зоны поражения». Вместо проверки «коснулся ли шар нижней границы?» мы проверяем более простое и контролируемое событие: «Произошло ли столкновение шара со спрайтом-ловушкой?». Если да — отнимаем жизнь.

Чтобы как-то разнообразить дизайн, сделаем так, чтобы каждая такая полоса была раскрашена в свой цвет, как предупреждение на светофоре. Для этого используем цвета красный, желтый, зеленый (т.е. спрайт будет иметь изображение в виде залитого цветом прямоугольника).

Также для звукового сопровождения нам понадобятся звуки удара, проигрыша и победы.

Теперь перейдем к настройкам.

• Название приложения — «Арканоид».
• Иконка — можно выбрать из ранее загруженных (например, яблоко) или добавить свою.
• Остальные настройки — по умолчанию.

Дизайн-макет

Внешний вид приложения будет выглядеть вот так:

Состав компонентов:

и медиафайлов:

Первым делом настроим Экран:

• Выравнивание по горизонтали — Центр,
• Выравнивание по вертикали — Верх,
• Цвет фона, фоновый рисунок и анимацию можно оставить по умолчанию или сделать свои,
• Ориентация экрана — широкоформатный (т.е. горизонтальный),
• Отключаем показ заголовка и статус-бара.
• Галочку с «Прокручиваемый» можно не убирать, у нас и так будет расчет размера в процентах от размера экрана.

Добавим Горизонтальное расположение. В нем будут располагаться кнопки и основная информация об игре. Его настройки:

• Выравнивание по горизонтали и вертикали — Центр Центр.
• Высота — автоматически.
• Ширина — наполнить родительский.

Внутрь расположения добавим две Кнопки. Это будут кнопки старта и перезапуска. Оформить их можно по своему вкусу. Главное, что у первой:

• название компонента — Старт,
• текст — «Старт».

У второй:

• название компонента — Заново,
• текст — «Заново».

Далее внутрь расположения после кнопок добавляем две Надписи. Сюда будут выводится очки и жизни. Оформление, опять же, любое, главное — это название компонентов и их содержимое.

У первой надписи:

• название компонента — Очки,
• текст — «Счет: 0».

У второй надписи:

• название компонента — Жизни,
• текст — «Жизни: 3».

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

Победа — красная:

Плюс к оформлению, не забываем, чем еще должны отличаться эти надписи. У проигрыша:

• название компонента — Проигрыш,
• текст — «Не повезло».

У победы:

• название компонента — Победа,
• текст — «Победа!».

Ключевая особенность этих надписей — они должны быть скрыты, потому что показываться должны только при определенных условиях.

С горизонтальным расположением закончили. Теперь двигаемся дальше и добавим Холст — основное игровое поле. Его настройки:

• Цвет фона — сделайте любой, приятный вам. Главное, чтобы не он не сливался с блоками, площадкой и шаром, ну и самим экраном (чтобы было понятно, что это игровое поле). Напоминаем, что выбрать цвет можно, кликнув на кружок цвета и в палитре цветов отметить понравившийся вариант. Для более продвинутых пользователей можно ввести код цвета в поле ниже. После выбора не забудьте нажать Save.

• Фоновый рисунок можно не делать, если есть заливка цветом.
• Высота — 230 пикселей (фиксировано, чтобы лучше установить блоки и линии перехвата).
• Ширина — наполнить родительский.

Теперь добавим Шар. Это именно то, что будет двигаться на холсте и сбивать блоки. Его настройки:

• Цвет краски — любой, лишь бы не сливался с фоном.
• Радиус — 8. Можно больше/меньше, подбирайте по своему комфорту: чтобы шар был заметен, но не был слишком громоздким.
• Видимый — галочка стоит.
• Координаты вбивать не нужно. Просто установите шар мышкой где-нибудь в центре холста.
• Включено — галочка снята. Нам не нужно, чтобы шар работал без нажатия кнопки «Старт».
• Курс — 0 (по умолчанию).
• Интервал — 100 (по умолчанию).
• Скорость — 5 (средняя).

Теперь добавим блоки, которые будем сбивать. Для этого нам понадобится Изображение спрайта. Лучше добавить несколько, чтобы было интереснее играть. В нашем случае их 6. У них будут схожие настройки:

• высота — 30 пикселей,
• ширина — 30 пикселей,
  высоту и ширину можете сделать больше/меньше в зависимости от выбранного изображения и вашего предпочтения;
• изображение — желтое или красное яблоко (если используете предложенные картинки),
• название компонента, чтобы не путаться, но и не потерять их, лучше сделать по шаблону — Блок1, Блок2 и т.д.
  т.е. ваш список компонентов, отвечающих за блоки, должен выглядеть примерно вот так:
  

Расставьте блоки равномерно в верхней части холста.

В итоге должны получится примерно такие настройки спрайтов. Отличатся они будут только координатами и изображениями.

Теперь сделаем площадку — от чего будет отскакивать шар. Для этого добавим еще одно Изображение спрайта. Разместите его в нижней трети холста, но не в самом низу — нам понадобится пространство, чтобы добавить линии ограничения. Настройки площадки:

• Высота — 10 пикселей,
• Ширина — 100 пикселей,
• Установить выбранное изображение площадки,
• Название компонента — Площадка,
• Остальные настройки по умолчанию.

Теперь добавим линии ограничения, их будет три: зеленая, желтая и красная.

Добавим первую линию — зеленую. Её нужно расположить чуть ниже, чем площадка. Например, если площадка располагается на высоте y = 170, то зеленая линия должна располагаться на высоте ниже y = 190. Напоминаем, что отсчет координат идет от левого верхнего угла, соответственно, чем ближе к низу экрана, тем координата y будет больше. В нашем случае отсчет идет от левого верхнего угла холста, т.к. спрайты привязываются именно к нему.

• Название компонента — Зеленая.
• Ширина — наполнить родительский.
• Высота — 5 пикселей.
• координаты:
  • x = 0 (левая сторона экрана)
  • y = 190 (или +20 пикселей к координате y вашей площадки).
• Изображение — ранее загруженная картинка зеленого прямоугольника.

Обратите внимание! Ширина загруженного изображения должна быть больше или равна ширины экрана, на котором планируется запускать игру.

В приложенных файлах ширина линий 1000 пикселей, что вполне хватит для большинства смартфонов. Если вы планируете делать игру также под планшеты, рекомендуем добавить более широкое изображение линий (от 2000 пикселей). В противном случае линия не будет доставать до правого края экрана.

Сделаем следующую линию контроля — желтую. Она должна располагаться ниже зеленой и появляться только тогда, когда шар коснулся зеленой. Добавим Изображение спрайта. Его настройки:

• Название компонента — Желтая.
• Ширина — наполнить родительский.
• Высота — 5 пикселей.
• координаты:
  • x = 0 (левая сторона экрана)
  • y = 210 (или +20 пикселей к координате y зеленой линии).
• Видимый — галочка снята.
• Изображение — ранее загруженная картинка желтого прямоугольника.

Добавим последнюю линию — красную. Она должна располагаться ниже желтой и появляться после того, как шар коснулся желтой линии. Добавим Изображение спрайта. Его настройки:

• Название компонента — Красная.
• Ширина — наполнить родительский.
• Высота — 5 пикселей.
• координаты:
  • x = 0 (левая сторона экрана)
  • y = 220 (или +10 пикселей к координате y желтой линии). Вообще в идеале нужно, чтобы красная линия была по самой нижней границе холста.
• Видимый — галочка снята.
• Изображение — ранее загруженная картинка красного прямоугольника.

Итак, холст готов, на нем есть все: шар, блоки, площадка и линии ограничения. Теперь осталось добавить немного: средство управления и проигрывания звука.

Добавим Сенсор Ориентации. Это невидимый компонент с минимумом предварительных настроек: есть только галочка включения/выключения. Оставим его включенным.

Добавим Проигрыватель, который будет отвечать за проигрывание звука (победа, проигрыш, удар). В настройках поставим:

• Звук — добавим звук удара, т.к. в игре он будет использоваться чаще всего.
• Установим громкость на 50, чтобы не было слишком громко.
• Остальное — по умолчанию.

Дизайн готов, можно переходить к программированию.

Программирование

В начале создадим две переменных: Счет и Жизни. Они должны иметь числовые значения. Счет будет равен 0, Жизни — 3.

Теперь создадим две процедуры, которые будут формировать надписи, отвечающие за счет и количество жизней. Удобнее использовать именно процедуры, чтобы каждый раз не прописывать несколько блоков.

Добавим первую процедуру Изменить Жизни, в ней добавим локальную переменную Жизни. Локальная переменная — это значение, которое будет использоваться внутри процедуры для последующей обработки. Чтобы добавить переменную, щелкнем на знак шестеренки.

Что должна делать данная процедура?

1. Процедура получает на вход значение жизни. Т.е. в локальную переменную процедуры запишется входящее значение.
2. Присваивает полученное значение глобальной переменной (чтобы жизни учитывались во всей игре).
3. Заменяет значение количества жизней в надписи.

Первый пункт будет выполнен, когда будем вызывать процедуру, поэтому перейдем сразу ко второму: присваиваем полученное значение в глобальную переменную.

Затем требуется изменить текст надписи, чтобы скорректировать количество. Но загвоздка в том, что в надписи у нас не только число, но и текст «Жизни: «. Как тут быть? Использовать объединение строк! Мы каждый раз будем пересобирать надпись из двух частей: текста «Жизни: » (обязательно с пробелом после двоеточия) и значения переменной Жизни.

Обратите внимание! Сначала присваиваем значение, затем переписываем надпись

Процедура готова. По аналогии сделаем вторую — Изменить Счет. Можно скопировать процедуру жизней и заменить соответствующие пункты на относящиеся к счету.

Теперь запрограммируем управление площадкой. Площадка должна реагировать на наклон телефона вправо/влево. Для этого возьмем блок Когда Сенсор Ориентации Ориентация Изменена.

Когда ориентация телефона изменилась, площадка должна переместиться в нужную сторону. Для этого возьмем блок вызов Площадка Переместить В и установим координаты:

• х — текущая координата площадки + крен телефона (Сенсор Ориентации Катиться)
• y — не должна изменяться, т.к. площадка должна перемещаться в одной плоскости. Поэтому y = текущее положение y + 0.

Теперь запрограммируем кнопку старта. Что должно происходить при старте игры?

• Сама кнопка должна деактивироваться.
• Обнуляем счет и восстанавливаем жизни.
• Шар, где бы он ни был (на случай, когда одна игра уже была сыграна и шар перемещен от центра), должен переместиться в центр. Для этого делим ширину холста пополам и присваиваем это значение х, а y = 140 (или другое значение высоты, но шар должен располагаться выше площадки, т.е. начальная координата y шара должна быть меньше, чем координата y площадки. Напоминаем, что у площадки мы поставили 170).
• Шару должна быть задана начальная скорость (опять же на случай, когда уже была сыграна игра, в которой у шара была изменена скорость).
• Задаем шару случайный курс (наверх, чтобы шар сразу не улетел в линию ограничения: от 20 до 160).

Запрограммируем, что делать, когда шар коснулся края. Напоминаем, что конкретно трех краев: левого, правого и верхнего. Нижнего он коснутся не может — там установлены линии ограничения. Когда шар коснулся края, он должен отскочить в другом направлении, поэтому в блок вызов Шар Отскакивать мы добавим локальную переменную Край, чтобы её значение использовалось как курс для отскока (курс будет использован с противоположным знаком).

Теперь сам игровой процесс. Что делать, когда шар касается какого-либо объекта (а их у нас много: блоки, площадка, линии ограничения).

Для начала самое простое: добавим блок когда Шар Наложение с Объектом и запрограммируем проигрывание звука. На случай, если игра уже была проведена и звук был заменен на проигрыш или победу, следует предварительно присвоить проигрывателю звук удара.

Теперь будем добавлять условия, что происходит от соприкосновения с теми или иными объектами. Для наглядности будем делать это отдельными блоками ЕСЛИ — ТО.

Если шар касается площадки, он должен отскочить зеркально (угол падения равен углу отражения). Для этого будем вычислять новый курс шара по формуле: 360 (полный круг) — текущий курс шара.

Если шар попал в блок, то нужно:

• убрать блок с экрана (для этого выключим видимость блока),
• изменить зеркально курс шара (по аналогии с отскоком от площадки),
• изменить и вывести счет (для этого вызовем процедуру изменения счета, на вход которой передадим изменение текущего счет на 1).

По аналогии нужно сделать еще 5 таких программных блоков (если у вас всего 6 блоков для сбивания), заменяя в них название блока для касания (т.е. блок1, блок2, блок3 и т.д.).

Теперь запрограммируем касание линий. Первая — Зеленая, если шар её коснулся, должно произойти следующее:

• вызываем процедуру изменения жизни, куда на вход подаем текущее значение жизни — 1 (процедура перезапишет значение переменной и выведет это на экран),
• убираем зеленую линию,
• включаем видимость желтой линии,
• меняем курс шара по аналогии с другими отскоками.

Аналогично делаем блок для Желтой линии. Только в этот раз скрываем желтую, показываем красную:

Красная линия, тут уже интересней:

• запускаем процедуру изменения жизни на -1,
• убираем красную линию,
• выключаем движение шара,
• показываем надпись проигрыша,
• присваиваем проигрывателю звук проигрыша и включаем его.

Т.е. при касании красной линии игра прекращается.

Но в игре есть не только проигрыш, надо оформить и победу. Когда мы сбили все блоки (и счет стал равен 6):

• выключаем движение шара,
• показываем надпись победы,
• присваиваем проигрывателю звук победы и включаем его.

И маленький штрих, чтобы чуть усложнить игру: увеличим скорость, когда половина блоков будет сбита. Т.е. когда счет будет равен 3, скорость шара увеличивается.

Все эти блоки нужно добавить в когда Шар Наложение с Объектом. В итоге у нас получится вот такая длинная команда:

Осталось запрограммировать перезапуск игры, т.е. кнопку «Заново», которая расставляет все на свои места. Кнопка должна работать универсально, т.к. перезапуск будет осуществляться как после победы, так и после проигрыша. Поэтому, когда кнопка «Заново» нажата:

• перемещаем шар на центр холста чуть выше площадки,
• обнуляем счет,
• возвращаем жизни,
• скрываем надписи проигрыша и победы,
• выключаем движение шара,
• активируем кнопку Старт,
• показываем блоки для сбивания (в нашем случае 6 штук),
• скрываем желтую и красную линии,
• показываем зеленую.

Игра готова, можно тестировать.

Самостоятельная работа

• Попробуйте добавить еще один или несколько уровней. Это можно сделать либо на том же экране, изменив расположение блоков, либо с переходом к новому экрану.
• Попробуйте добавить бусты: например, периодически появляющийся спрайт, соприкосновение с которым будет увеличивать скорость шара.
• Сделайте ваш холст адаптивным: установите высоту холста не фиксированным количеством пикселей, а в зависимости от высоты экрана; расставьте блоки в зависимости от ширины и высоты холста (с помощью программных блоков и вычисления процентного соотношения); разместите линии ограничения в зависимости от расстояние (в процентах) от нижней границы экрана.