Игра «Змейка»

Простой вариант игры, в которой требуется собирать еду и получать за это очки. Без «смерти» змейки от врезания в стены. Также стоит добавить, что ввиду особенностей визуала в MIT App Inventor сделать увеличивающийся хвост не получится. Наша змейка будет выглядеть просто шариком, бегающим по экрану.

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

Предварительно стоит скачать изображение еды. Например, яблочка.

Эту же картинку можно использовать в качестве иконки приложения.

Назовём приложение «Змейка». Остальные настройки оставим по умолчанию.

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

Игра будет выглядеть примерно так:

Придется, как и в игре «Лабиринт» добавить довольно много компонентов расположения, чтобы сделать управление достаточно удобным.

Компоненты:

Для начала настроим Экран.

• Выравнивание по вертикали — Верх.
• Выравнивание по горизонтали — Центр.
• Отключим показ Статус бара и Заголовка, чтобы не отнимали места.
• Остальные настройки можно оставить как есть или сделать свои.

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

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

Внутрь расположения добавим Кнопку. Оформление кнопки может быть любое, главное, чтобы:

• Название компонента было «Заново».
• Текст кнопки был «Заново».

В это же расположение добавим 2 Надписи. Первая надпись будет выводить на экран слово «Счёт:». Поэтому её настройки минимальны — только сделать текст надписи. Не забудьте после двоеточия в «Счёт:» поставить пробел, чтобы цифры счета не сливались с надписью.

Вторая надпись будет выводить значение счета. Поэтому придется сделать чуть больше настроек:

• Переименовать компонент в «Счет».
• Присвоить тексту надписи значение 0.

Оформление можно оставить как есть или сделать свое.

Добавим после горизонтального расположения Холст. Здесь будет основное игровое поле, поэтому его нужно сделать побольше.

• Цвет фона — любой, главное, чтобы отличался от фона остального экрана (для визуального восприятия).
• Высота — 50 процентов.
• Ширина — наполнить родительский.

На холст добавим Шар. Это будет сама змейка.

• Переименуем компонент в «Змейка».
• Цвет краски — любой, но чтобы выделялся на фоне холста.
• Радиус — 10 (чтобы заметно было).
• Координаты не имеют значения, это стартовое положение. Раз еда будет появляться в произвольном месте, то можно начальные координаты оставить как есть (то есть какие получились, когда вы добавляли компонент на холст).
• Курс — 0.
• Интервал — 100.
• Скорость — 0 (чтобы при старте приложения змейка не двигалась).

Добавим Изображение Спрайта на холст. Это будет еда.

• Название компонента — Еда.
• Высота и Ширина — по 20 пикселей.
• Изображение — выбрать предварительно загруженное изображение яблока (или чего-то другого).
• Остальное оставить как есть.

После холста добавим еще одно Горизонтальное расположение. Оно будет служить разделителем между холстом и кнопками управления. Поэтому самое главное — сделать в настройках высоту минимум 20 пикселей (чтобы был виден отступ). Остальное можно не трогать.

После добавим третье по счету Горизонтальное расположение. Его настройки:

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

Внутрь данного расположения добавим Кнопку. Это будет первая кнопка управления змейкой. Наверное, будет лучше, чтобы оформление этих кнопок было в едином стиле. Хотя не обязательно, выбирайте то, что вам больше нравится. Тут будем перечислять только обязательные настройки.

• Название компонента — Вверх.
• Текст кнопки — Вверх.

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

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

Внутрь данного расположения добавим Кнопку. Настройки:

• Название компонента — Влево.
• Текст кнопки — Влево.

Рядом с кнопкой добавим еще горизонтальное расположение. Оно будет разделителем между двух кнопок, иначе они «прилипнут» друг к другу. Настройки:

• Высота — 30 пикселей.
• Ширина — 40 пикселей.

После него добавляем еще одну Кнопку.

• Название компонента — Вправо.
• Текст кнопки — Вправо.

Теперь добавим последнее Горизонтальное расположение. Оно будет идти после всех блоков на экране.

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

Внутрь расположения добавим Кнопку.

• Название компонента — Вниз.
• Текст кнопки — Вниз.

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

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

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

Запрограммируем кнопки управления.

Когда щелкнут кнопку Вверх, змейка приобретёт скорость 10 и изменит курс на 90. Вспомним направления в MIT App Inventor, они соответствуют градусной мере.

90 — направление наверх.

Соответственно запрограммируем остальные кнопки, меняя только направление движения:

Скорость должна быть одинакова для всех направлений.

Теперь запрограммируем, что делать, когда змейка дошла до еды.

Когда ему что-то (а именно змейка, т.к. другого ничего нет в игре) касается спрайта еды, он перемещается в положение со случайно выбранными координатами x и y. При этом диапазон координат вычисляется от 0 до ширины/высоты холсты минус размерность самого спрайта. Это нужно, чтобы еда не ушла за границы экрана.

Далее, раз змейка съела еду, нам нужно увеличить счет, поэтому используем сложение для изменения текущего значения счета.

Собственно, игра готова. Но осталось еще запрограммировать кнопку перезапуска. Если этого не сделать, то для перезапуска игры придется закрывать и снова открывать приложение. А это не очень удобно, лучше, когда это делается нажатием одной кнопки. Поэтому запрограммируем кнопку Заново.

Здесь принцип тот же — при перезапуске спрайт еды перемещается в случайные координаты, а вот счет обнуляется.

Вот теперь наша игра готова: можно проверять и создавать apk файл для загрузки на устройство.

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

Попробуйте обыграть касание змейкой края экрана. Можно использовать несколько вариантов:

• При достижении края змейка «отскакивает» в случайном направлении.
• При достижении края игра заканчивается.

Для воплощения этой идеи используйте блок «когда змейка достигнут край».