Игра “Нажми на кнопку!”

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

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

Создаем новый проект. Название проекта может быть любое, например, Button. Это название проекта в App Inventor, название самого приложения можем поменять в любой момент. Кириллические символы не поддерживаются.

Настраиваем первый экран:

• Название приложения (AppName) — по умолчанию копируется название проекта, но мы можем изменить на свое усмотрение. Именно это название будет отображаться после установки приложения на телефон. Кириллица поддерживается. Можно назвать “Нажми на кнопку!”
• Иконка — изображение, которое будет отображаться на телефоне после установки приложения. Поддерживаются популярные форматы изображений: png, gif, jpg.  Можно добавить любую на свой вкус. 

Указанные выше настройки доступны только на первом экране (Screen1), они распространяются на приложение в целом. 

Теперь рассмотрим настройки конкретно экрана игры. Нам понадобятся:

• Выравнивание по горизонтали и вертикали — данные опции отвечают за расположение всего содержимого экрана. Мы выровняем по центру оба параметра. Цифры указаны возле вариантов не спроста — они понадобятся для программирования изменения выравнивания. 

• Оставим опцию “Ориентация экрана” в режиме “Неопределено”, чтобы наше приложение могло подстраиваться под ориентацию экрана устройства. 
• Оставим опцию “Sizing” (Размер) в режиме “Responsive” (Отзывчивый), чтобы наше приложение подстраивалось под размер устройства, на котором оно будет запущено. 
• Снимем галочку с опции “ShowStatusBar” (Показывать панель состояния), которая разрешает отображение статусной строки во время работы приложения. 
• Снимем галочку с опции “TitleVisible” (Отображение заголовка), которая разрешает отображение заголовка экрана.

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

Добавим надпись. Настроим её:

• Цвет фона и текста, размер и тип шрифта оставим по умолчанию.
• Высоту оставим автоматической (т.е. размер блока надписи по высоте будет подстраиваться под размер содержимого).
• А вот ширину сделаем 90 процентов (percent), чтобы на маленьких экранах или при большой надписи текст не сливался с границей экрана —  всегда были поля по краям. 
• Заполним поле “Текст” — это будет непосредственно тот текст, который отобразится на экране. Например, таким содержимым: “Привет! Давай начнем. Нажми кнопку ниже”
• Сделаем выравнивание текста по центру. Здесь важно понять отличие: при выравнивании в свойствах экрана, мы выравнивали  расположение содержимого самого экрана, сейчас же мы выравниваем текст внутри блока “Надпись”, т.к. выравнивание экрана на этот текст не распространяется.

Итого у нас должно получится:

Добавим кнопку под надпись. Она должна встать по центру экрана. Настроим её:

• Цвет фона — светло-серый. Чтобы кнопка отличалась от фона всего приложения. 
• Шрифт — жирный.
• Размер, цвет,  тип шрифта — по умолчанию.
• Высота, ширина, форма кнопки — по умолчанию.
• Текст (который будет отображен на кнопке) — “Нажми!”.
• Выравнивание текста по центру. 

Собственно, дизайн мы закончили. Можно переходить к программированию. Сравните то, что у вас получилось с той картинкой, которая была в начале. Похожа? 

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

Переходим в раздел “Блоки”. И вспомним, что, собственно, мы хотим сделать? Чтобы после нажатия на кнопку у нас что-то происходило. Причем каждый раз разное, в зависимости от количества нажатий кнопки. Т.е. чтобы нажали один раз — одно произошло, нажали второй — другое. 

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

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

Вначале нам нужно инициализировать переменную (ввести ее в программу) и задать ее начальное значение. Т.е. сказать программе: “Вот здесь ты будешь что-то хранить, но пока тут пусто”. 

Инициализируем переменную СЧЕТЧИК, и зададим ей значение 0:

Блоки в App Inventor раскрашены в свои цвета. Как видите, блок, относящийся к переменной, окрашен оранжевым, значит, мы будем искать этот блок в разделе “Переменные”. Синий блок с цифрой будем искать в разделе “Математика”. 

Далее опишем действие — нажатие на кнопку. Все команды, относящиеся к конкретному компоненту (кнопка, надпись, спрайт и т.д.) нужно искать именно в списке команд конкретного компонента. Поэтому в компоненте “Кнопка1” ищем событие Щелчок.

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

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

Счетчик запущен, теперь при каждом нажатии кнопки переменная будет увеличиваться на 1. Теперь нам нужно привязать количество нажатий к выполнению каких-либо действий. Мы можем это сделать через условный оператор ЕСЛИ. Найдем этот оператор в разделе “Управление”. Этот оператор работает следующим образом:

ЕСЛИ сработало заданное условие,

ВЫПОЛНИТЬ определенные действия

При этом может быть несколько условий, и, соответственно, несколько вариантов действий:

ЕСЛИ сработало заданное условие,

ВЫПОЛНИТЬ определенные действия,

ИНАЧЕ ЕСЛИ сработало заданное условие 2, 

ВЫПОЛНИТЬ определенные действия 2,

ИНАЧЕ ЕСЛИ сработало заданное условие 3, 

ВЫПОЛНИТЬ определенные действия 3

Мы опишем в программе 10 условий (10 нажатий на кнопку) и 11 условие, последнее, которое будет перезапускать игру. Для этого мы должны расширить блок ЕСЛИ, щелкнув по шестеренке в блоке ЕСЛИ. 

Добавим 10 условий ИНАЧЕ ЕСЛИ. Структура создана, теперь можно приступать к наполнению. 

1 условие. 

Кнопку нажали один раз. Пока ничего кардинального делать не будет. Просто поменяем текст надписи, чтобы было чуть веселее. Для этого присвоим  свойству “Текст” Надписи новое значение “Ой! Что-то не получилось. Попробуй еще раз!”.

У нас получится следующее:

2 условие.

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

Замечу, что не обязательно каждый раз собирать блоки из компонентов, можно скопировать уже те, что есть (если среди размещенных есть необходимые). Для этого щелкаем правой кнопкой мыши по нужному блоку, выбираем “Создать копию”. Размещаем блок куда требуется и меняем данные. 

3 условие.

Кнопку нажали третий раз. Мы продолжим менять текст, но теперь мы сменим еще и цвет фона кнопки:

Цвет можно найти в разделе “Цвета”.

4 условие.

Кнопку нажали четвертый раз. Мы продолжим менять текст, заодно поменяв фон всего экрана на жёлтый.

Напоминаю, что блоки компонентов нужно искать в конкретном компоненте.

5 условие.

Кнопку нажали пятый раз. Меняем текст и его размер.

6 условие.

Кнопку нажали шестой раз. Меняем текст и его размер еще раз.

7 условие.

Кнопку нажали седьмой раз. Меняем текст и размер текста кнопки. 

При этом размер кнопки тоже увеличится, так как мы задали автоматическую высоту и ширину в дизайне. 

8 условие.

Кнопку нажали восьмой раз. Подвигаем содержимое на экране — изменим выравнивание экрана. 

Помните,  я писала про цифры возле обозначений положения выравнивания? Вот здесь они нам пригодились. 1 по вертикали  означает верх, 1 по горизонтали  означает лево.

9 условие.

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

2 по горизонтали означает право, 3 по вертикали означает низ. 

10 условие.

Кнопку нажали десятый раз. Вернем расположение в центр и сменим текст. 

11 условие.

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

Поздравляю! Мы закончили программировать наше приложение. Давайте сверимся, что у нас получилось, а должна у нас получится довольно длинная программа, состоящая из двух блоков:

Теперь, чтобы проверить работу программы, можно запустить ее на эмуляторе или построить файл .apk, чтобы установить на смартфон.

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

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

• цвет фона экрана или кнопки
• цвет текста кнопки или  надписи
• размер кнопки или надписи

Подумайте над тем, можно ли как-то с помощью программы изменить порядок следования блоков: чтобы кнопка была выше надписи?