Игра “Камень, Ножницы, Бумага”

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

Экран визуально будет разделен на 2 части: поле игрока и поле соперника (компьютера). Выше будет расположена надпись со счетом, ниже — кнопка очистить, которая будет сбрасывать счет. Выглядеть будет примерно так:

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

Вы же можете найти любые другие. Желательно, чтобы они были в одном стиле, небольшого размера (вы же будете загружать их в приложение, и чем больше вес картинки, тем больше будет весить ваше приложение. Обязательно переименуйте скаченный с интернета файл перед заливкой в проект: имя файла должно состоять из латинских букв и цифр, а также знаков «-«,»_», «.», «!», «~», «*», «(«,  «)». Также крайне желательно присваивать названия, по которым точно будет понятно, что это за изображение. В нашем проекте будет всего 3 картинки, и если назвать их, соответственно, “1.png”, “2.png”, “3.png”, то работать с ними будет сложновато, но терпимо. А если картинок 50? Поэтому лучше назвать файлы что-то в стиле “kamen.png”, “nozhnici.png”, “bumaga.png”. 

Чтобы загрузить что-то в наш проект, потребуется воспользоваться разделом “Медиа”, в котором есть кнопка “Загрузить файл”: 

В появившемся окне нажимаем кнопку “Выбрать файл” и выбираем файл на компьютере. 

После выбора нажимаем ОК. Файл появится в списке медиа. Если кликнуть по его названию, то в окошке появятся действия, которые можно сделать с файлом:

• Preview — просмотр. Файт откроется для просмотра.
• Удалить — удалить файл из проекта. Действие необратимо, его не получится отменить! Так что будьте внимательны. 
• Загрузить на компьютер  — скачать файл из проекта на компьютер. Иногда это может потребоваться для того, чтобы отредактировать картинку, а затем загрузить в проект заново. 

Теперь перейдем к проекту.  

Настраиваем экран. 

• Название приложения — “Камень, Ножницы, Бумага”
• Теперь  мы можем установить иконку, выбрав из ранее загруженных картинок. 

• Убираем лишнее, сняв галочки с “ShowStatusBar” и “TitleVisible”. 
• Размер поставим “Responsive”, чтобы экран растягивался по размеру экрана устройства.
• Ориентацию поставим “Альбомную”, чтобы приложение всегда переходило в портретный режим. Тут особенность перевода App Inventor на русский язык. Мы привыкли, что “альбомный” вид — это вид, когда ширина больше, чем высота. Здесь же  “альбомный” когда ширина меньше, чем высота, а “широкоформатный” — как раз когда ширина больше, чем высота. 

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

• Выравнивание по вертикали — Верх.
• Выравнивание по горизонтали  — Центр.

Теперь приступим к наполнению. Сначала добавим надпись. В ней будет выводиться счет. Когда добавим компонент в приложение, надпись встанет в самом верху по центру. Настроим её: 

• размер шрифта — 20 (чтобы виднее было),
• текст —  0:0 (начальное значение),
• цвет и фон можно оставить по умолчанию или сделать какой больше нравится.

После надписи добавляем 2 горизонтальных расположения.

Они встанут один под другим. 

Настройки у обоих расположений почти  одинаковые:

• Выравнивание по вертикали — Центр.
• Выравнивание по горизонтали  — Центр.
• Высота — 40 процентов (percent) — нужно для того, чтобы приложение автоматически распределяло пространство для блоков. 
• Ширина — “наполнить родительский”, чтобы блоки растягивались по ширине экрана.
• Единственное отличие двух расположений  — цвет фона. Его нужно сделать разным, чтобы визуально их можно было отличать. т.к. один блок — это поле компьютера, второй блок — поле игрока. В приведенном примере цвета синий и пурпурный, вы же можете выбрать любые другие. 

В верхнее горизонтальное расположение добавляем Изображение. 

• Переименовываем компонент изображения в “Компьютер”, чтобы потом было удобно с ним работать при программировании. Это будет картинка, отображающая ход компьютера. Именно сюда будет подставляться изображение камня, ножниц или бумаги.
• Сделаем высоту и ширину изображения по 100 пикселей (pixels)
• Скроем изображение, сняв галочку у пункта “видимый”. На экране данное изображение должно появляться только тогда, когда мы сделали ход. Поэтому сейчас оно нам не нужно. 

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

Поэтому алгоритм наполнения блока будет следующий:

Добавляем 3 кнопки. Они встанут в ряд. 

• Переименуем каждый компонент кнопки в “Камень”, “Ножницы”, “Бумага” соответственно. 
• Каждой кнопке сделаем высоту и ширину по 70 пикселей (pixels).
• Каждой кнопке присвоим изображение в соответствии названием компонента — камню — камень, ножницам — ножницы, бумаге — бумагу. Будьте внимательны, если перепутаете картинки, игра будет работать не так, как хотелось бы.

После кнопок добавляем изображение. 

• Переименовываем компонент в “Игрок”.
• Высоту и ширину ставим по 100 пикселей (pixels).
• Скроем изображение, сняв галочку у пункта “видимый”. Данное изображение — картинка выбранного игроком хода, которое должно появляется после нажатия одной из кнопок. Поэтому в начале оно нам ни к чему. 

Добавим еще одну кнопку. 

Данная кнопка будет начинать новый ход. 

• Переименуем компонент в “Ещё”.
• Напишем текст на кнопке “Ещё”.
• Сделаем ей оформление: выберем размер шрифта, цвет и фон текста, форму кнопки. Можете выбрать любые параметры. 
• Скроем кнопку, сняв галочку у пункта “видимый”. Т.к. она должна появляться уже после того, как сделан ход. 

С блоком Игрока закончили. Осталось добавить кнопку, которая будет перезапускать всю игру, очищая данные счета. 

Добавляем кнопку после всех расположений.

• Переименуем компонент в “Очистить”.
• Напишем текст на кнопке “Очистить”
• Оформление кнопку можно сделать любое: цвет, размер, форма.

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

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

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

Переходим в раздел “Блоки”. Обратите внимание, что на данном экране ниже списка блоков отображается список доступных медиа-объектов, которые мы загрузили ранее. Они нам понадобятся. 

Первое, что мы должны сделать — создать переменные для хранения счета Компьютера и счет Игрока. Так и назовем их:”СчетКомп” и “СчетИгрок”.

Первоначальное значение у обеих будет равно нулю:

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

Если в программе какой-то блок кода (состоящий, как правило, из нескольких блоков) требует частого выполнения, то разумнее создать ПРОЦЕДУРУ, которую можно будет вызывать в определенном месте, вместо того, чтобы заново писать блок кода. 

Далее увидите, как это работает. 

А пока создадим процедуру Счет.  В ней мы будем использовать слияние 5 строк в одну и вывод оной в Надпись. 

Процедуры находятся в фиолетовом блоке. Берем оттуда самый первый блок. Меняем название. Это мы создали процедуру, но пока она пуста. 

Далее идем в Надпись и берем блок “Присвоить Надпись Текст”. 

Раз мы будем работать с текстом, значит идем в раздел “Текст” и там идем блок “Соединить”. Данный блок соединяет блоки с текстом в одну строку. Нам нужно соединять не 2 строки, а 5. Поэтому кликаем на шестеренку и добавляем строки в блок:

Первой строкой у нас будет текст “Компьютер ” — после слова обязательно поставьте пробел! Иначе счет “приклеится” к слову. 

Вторая строка — значение переменной СчетКомп. 

Третья строка  — текст “ : ”. Обратите внимание, что здесь пробелы стоят до и после двоеточия! 

Четвертая строка — значение переменной СчетИгрок.

Пятая строка  — текст “ Игрок”. 

Что в итоге у нас должно быть выведено в Надпись? Допустим, счет компьютера 3, счет Игрока 5. Следовательно, надпись получится: 

“Компьютер 3 : 5 Игрок”

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

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

Как же нам выбрать, какую картинку будет присваивать изображению компьютер? Очень просто — случайным образом. Чтобы это сделать, нам нужно создать список картинок, доступных для выбора, и затем выбирать из этого списка случайный элемент. Список будем создавать из трех текстовых строк, содержащих названия картинки. Будьте очень внимательны, заполняя названия, т.к. отличие введенного названия от названия картинки хотя бы на 1 символ уже приведет к ошибке. 

Вот именно поэтому на экране “Блоки”  есть раздел со списком медиа-контента — чтобы вы не ошиблись при прописывании названий. 

Создаем список:

Выбираем из него случайный элемент, добавив соответствующий блок из компонента “Массивы”. 

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

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

Теперь перейдем к программированию того, что будет происходить, когда игра запустилась. Для этого берем блок “Screen1.Инициализировать”. Напоминаю, блоки, относящиеся к конкретным компонентам, нужно искать в самих компонентах.

Что делать, когда игра запустилась?  

• Скрыть изображения Компьютера и Игрока
• Сделать значения счета Компьютера  и Игрока равными нулю.
• Скрыть кнопку “Ещё”, но показать кнопки выбора хода Игрока.
• А также запустить процедуру вывода счет на экран.

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

Так будет выглядеть блок инициализации экрана:

Вы заметили, наверное, что в блоках очень много “истина” — “ложь”. Это логические элементы, которые принимают всего 2 значения — истина или ложь. Если переводить на разговорный язык, то можно подобрать такие сочетания как “да — нет”, “включено — выключено”, “работает — не работает”. Где “истина” является синонимом для “да”, “включено”, “работает”, а “ложь” для “нет”, “выключено”, “не работает”.

Т.е. блоком 

мы говорим программе о том, что “Видима кнопка Ещё?” — “Нет”.

А блоком

мы говорим, что “Видима кнопка Ножницы?” — “Да”.

Процедуру счета мы вызываем короткой командой 

Согласитесь, это проще, чем писать все перечисленные в данной процедуре блоке. Такой командой мы как бы даем указание, где взять блоки для работы. 

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

Поэтому будем программировать 3 похожих блока.

Блок “Камень”.

Что будет происходить, если Игрок решил выбрать камень.

Как он его выбрал? Щелкнул на соответствующую кнопку. Значит, берем данный блок

Первое, что должно произойти после щелчка — показаться картинка с изображением камня, показаться кнопка “Еще” на случай, если Игрок продолжит игру, спрятаться кнопки выбора. 

Далее — компьютер при этом тоже должен сделать ход, поэтому запускаем процедуру “ИграКомп”, чтобы компьютер показал результат. 

Добавляем еще 2 блока:

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

Для этого будем использовать блок ЕСЛИ с условием предварительно добавив в него дополнительное условие ИНАЧЕ ЕСЛИ.

Условие будет следующее:

ЕСЛИ компьютер выбрал бумагу, то ему добавляется очко.

ЕСЛИ компьютер выбрал ножницы, то очко добавляется игроку. 

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

И в конце добавим вызов процедуры вывода счета на экран.

Обратите внимание еще раз, правильно ли у вас написаны названия файлов-картинок для камня, ножниц, бумаги. Они должны совпадать ПОСИМВОЛЬНО! 

В итоге выглядеть блок должен так: 

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

Чтобы не писать заново все блоки, можно копировать уже имеющиеся с помощью правой кнопки мыши (пункт “Создать копию”). Попробуйте сами сделать оставшиеся 2 варианта. 

А это для того, чтобы свериться:

После того, как варианты развития событий проработаны. Нужно добавить еще 2 блока: блок для кнопки “Еще” и блок для кнопки “Очистить”.

Одна будет запускать новый раунд, вторая — обнулять счет.

Запрограммируем кнопку “Еще”. Она должна скрывать результат, показывать снова кнопки выбора, и прятаться сама. 

Кнопка “Очистить” обнуляет значение переменных и выводит это на экран:

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