Text
                    ƎƏƌƉƋ

Ɠ
ƐƑƉƃƆ ƋƁ
Ɖ
Ǝ Ƙ
ƠƆƅƉ

ă. ă. ĚāĘāėāĚā

ÿó÷ïõïöóô
ûôö÷ăĂóô
Ăôāïþóô


В. В. ТАРАПАТА Scratch Программировать сможет КАЖДЫЙ Электронное издание Москва Лаборатория знаний 2025
УДК 004.9 ББК 32.97 Т19 Тарапата В. В. Т19 Scratch. Программировать сможет каждый : учебное пособие / В. В. Тарапата. — Электрон. изд. — М. : Лаборатория знаний, 2025. — 299 с. — Систем. требования: Adobe Reader XI ; экран 10". — Загл. с титул. экрана. — Текст : электронный. ISBN 978-5-93208-913-2 Scratch — язык программирования и одновременно визуальная среда разработки программ, созданная специально для изучения основ программирования. Это мощный инструмент с низким порогом входа, с помощью которого возможно начать освоение алгоритмизации, этапов проектирования и разработки программных продуктов, применение программирования для решения широкого круга задач. В данной книге используется третья, основная и актуальная, версия Scratch. Она получила новый современный вид и дизайн, более дружелюбный интерфейс, исправления и доработки несовершенств предыдущих версий, а также адаптирована для работы на большинстве мобильных устройств и онлайн — теперь границ для освоения программирования практически не остаётся. Книга предназначена для детей среднего школьного возраста, учителей и руководителей кружков. УДК 004.9 ББК 32.97 Деривативное издание на основе печатного аналога: Scratch. Программировать сможет каждый : учебное пособие / В. В. Тарапата. — М. : Лаборатория знаний, 2025. — 296 с. : ил. ISBN 978-5-93208-437-3 В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами защиты авторских прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации ISBN 978-5-93208-913-2 © Лаборатория знаний, 2025
От автора Дорогой друг! У тебя в руках книга, способная открыть горизонты мира информационных технологий. Проявив достаточно усердия, ты освоишь основы алгоритмизации и программирования в таком ключе, который позволит в дальнейшем «бесшовно»1 изучать профессиональные языки: Python, C, C#, Java, JavaScript и многие другие. Обучение будет идти по нарастающей: от наиболее простых действий к освоению серьёзных подходов организации программ и созданию полноценных игровых проектов. Всё это позволит не только прикоснуться к цифровому творчеству, но и, хочется в это верить, станет для тебя первым шагом к современным IT-профессиям. А может быть, именно ты изберешь путь наставника и станешь новым Учителем информатики для своих будущих воспитанников, которые никогда не скажут: «Не знаю, что там было на информатике в школе, мы просто сидели рисовали в пэинте, решали какие-то тесты и что-то программировали, но я ничего не помню». Основной инструмент в этом путешествии — среда программирования Scratch. В ней можно создавать самые разные интерактивные программы с анимацией, а также мультфильмы и игры. Книга состоит из двух частей: «Основы программирования» и «Разработка игр». В первой части ты освоишь минимальные основы программирования, необходимые для создания несложных анимаций и (пока что) простеньких игр. Пройдя все десять уровней, ты получишь ранг junior-программиста. Во второй части ты откроешь собственную студию разработки инди-игр! Знания основ программирования помогут тебе в создании и разработке настоящих игр, которые можно демонстрировать друзьям, родственникам и сообществу разработчиков, а заодно внести их в своё портфолио и получить ранг junior. 1 То есть плавно и непрерывно. По сути, «бесшовным» можно назвать переход от одного объекта изучения к другому, если для этого требуется минимум или вообще не требуется усилий.
4 От автора Ты не будешь один! На всём пути обучения тебе будут помогать наставники. Знакомься: старший программный инженер Единичка и ведущий разработчик Нолик! С ними ты пройдёшь этот путь от начала до конца. Они будут подмечать важные моменты, рассказывать интересные факты, напоминать о своевременном тестировании программ и говорить о том, на что следует обратить внимание. Выражаю уверенность в твоих силах и убеждён, что это учебное пособие станет для тебя хорошим стартом в мире программирования и разработки игр, позволит реализовать творческие идеи и добиться первых успехов в области программирования. Желаю тебе, будущий мастер кода, терпения и настойчивости в преодолении сложностей. Не бойся ошибаться, главное — учиться на своих ошибках и двигаться вперёд. Пусть трудности и препятствия на пути к мастерству станут для тебя лишь стимулом к развитию и росту. Ты только начинаешь свой путь, и впереди тебя ждёт множество интересных задач и открытий. Удачи в их решении и покорении новых вершин! И помни: программирование — это сложно, но БЕЗУМНО интересно ͦ ВВТ
Благодарности Автор выражает бескрайнюю благодарность всем людям, принявшим участие в создании, редактировании и совершенствовании этой книги, а также тем, кто так или иначе повлиял на её появление в свет. Отдельно автор благодарит: своего научного руководителя, доктора педагогических наук, профессора Московского педагогического государственного университета Надежду Николаевну Самылкину за неоценимый вклад в образование и научное становление; обучающихся школы № 283 города Москвы за вдохновение, огромный интерес к информатике, помощь в бета-тестировании и написании книги; программиста-разработчика в области компьютерной 3D-графики rabbitGraned, а также выпускника, который обучался по методике, лежащей в основе данного учебного пособия, за невообразимо ценную конструктивную критику и тестирование содержания; Викторию Алексеевну Мажукину — уважаемую коллегу, учителя информатики школы № 283 города Москвы за сонаправленное движение в развитии методов и подходов к обучению детей и помощь в бета-тестировании и разработке глав настоящей книги; Веру Андреевну Словиковскую, учителя информатики Лицея № 1568 города Москвы, за созданный интерес к информатике и программированию в школьные годы; Евгению Алексеевну Белову, архитектора и любимую жену, создавшую персонажей для этой книги; тебя, дорогой читатель, за интерес и желание освоить программирование и, возможно, изменить свою будущую жизнь в столь нелёгкую, но крайне увлекательную сторону.
Введение Ранги программиста В профессиональной среде принято разделение программистов по их рангу, характеризующему количество выполненных проектов, уровень знаний, опыт разработки и работы в IT-компаниях. Все выполняемые проекты программист собирает в портфолио, которое используется на собеседовании при устройстве на работу. Если программист меняет место своей работы — это нормально, ведь мир программирования практически не имеет границ, и можно заниматься разными его сторонами: разработкой мобильных приложений, веб-сайтов, игр, программированием работы нейросетей и алгоритмов искусственного интеллекта, автоматизированных систем, прикладных приложений… Это перечисление можно продолжать очень долго. В конечном счёте программист достигает определённого ранга своей профессиональной подготовки: y Junior (от англ. младший) — начинающий программист с определёнными знаниями, но без опыта разработки, проработавший в IT-компании не более полутора лет; обычно он работает только над простенькими задачами под руководством более опытных коллег; для краткости его зовут «джуном»; y Middle (от англ. средний) — его ещё можно назвать «подмастерье», то есть программист, имеющий опыт разработки и способный решать более сложные задачи без «опеки» со стороны; старшие коллеги обычно только проверяют конечный результат его работы; y Senior (от англ. старший) — мастер, способный не только на самостоятельное решение задач, но и на обучение младших коллег, руководство командой разработки и/или проектом. Между этими рангами могут также существовать переходные, например, junior, говорящие о том, что программист обладает знаниями, превышающими его текущий ранг, но пока ещё недостаточными для достижения следующего. Например, «джун» может проработать один год и получить в портфолио несколько проектов. В этот момент его уже и «джуном» не назовёшь, но и «миддлом» он пока ещё не стал.
Введение Алгоритмизация и программирование Персональный компьютер, ноутбук, планшет, смартфон и прочие гаджеты на самом деле не больше, чем набор деталей, «упакованный» в корпус. Этот набор ещё принято называть hardware1. Программисты вдохнули жизнь в груду пластика и металла, создав для его «тяжёлого»2 содержимого программное обеспечение, называемое software3. Все перечисленные выше устройства, которыми мы пользуемся ежедневно, содержат в себе процессор — электронный «мозг», который занимается обработкой данных и, по сути, именно он позволяет компьютеру быть «умным» устройством. Процессор понимает «машинный язык», или двоичный код (0 — сигнала нет, 1 — сигнал есть), в который превращаются все команды алгоритма, написанные на любом языке программирования. Чтобы выполнять сложные задания и решать задачи более высокого уровня, для процессора нужно составить алгоритм — строгую и предельно логичную последовательность действий для решения конкретной задачи. Процесс создания алгоритма и называется алгоритмизацией. Вот такие требования традиционно предъявляются к любому алгоритму: 1) однозначность — все шаги алгоритма должны строго следовать друг за другом, иметь однозначную трактовку и не допускать никаких двусмысленностей; 2) конечность — алгоритм не может исполняться бесконечно; после того как задача решена или стало понятно, что не может быть завершена, алгоритм обязан завершиться; 3) детерминированность — алгоритм должен работать одинаково при одинаковых начальных условиях и выдавать каждый раз предсказуемый результат; 4) корректность — результат работы алгоритма должен соответствовать начальным условиям поставленной задачи; 5) массовость — один и тот же алгоритм должен подходить для решения группы однотипных задач (например, если это алгоритм сложения двух чисел, то он должен подходить для любых чисел); 6) эффективность — ресурсы, затрачиваемые на исполнение алгоритма, должны быть оптимально распределены (для ком1 2 3 Аппаратное обеспечение, компьютерные комплектующие, «железо». Hard (часть слова hardware) переводится с английского как «тяжелый». Программное обеспечение, комплекс программных средств. 7
8 Введение пьютера такими ресурсами являются использование памяти для хранения данных и затрачиваемое на исполнение алгоритма время); 7) понятность — алгоритм должен быть понятен тому, кто его исполняет, то есть используемый язык должен подходить (быть известен) исполнителю. В этом списке седьмой пункт и порождает понятие программы — алгоритма, переведённого на язык, понятный как компьютеру, так и программисту. Ведь тот алгоритм, который мы составляем для решения конкретной задачи, создаётся на том естественном языке, который мы знаем (русский, английский и др.). Компьютер, в свою очередь, понимает всего лишь два цифровых сигнала 0 и 1. Вопрос: как заставить процессор компьютера выполнять нужные команды? Ответ: нужно обратиться к особому человеку, который способен перевести алгоритм на язык, понятный компьютеру. Этого человека и называют программистом, а процесс перевода алгоритма на понятную компьютеру последовательность действий — программированием. Замечание: оговоримся, что между алгоритмом, созданным программистом с использованием языка программирования, и процессором компьютера, который получает алгоритм на машинном языке, есть ещё один участник — транслятор — специальная программа, остающаяся в тени, которая и осуществляет конечный перевод алгоритма с языка программирования в машинный код. Мы назвали программиста, по сути, переводчиком, способным организовать прямой диалог между человеком и компьютером. И это вовсе не зря, ведь для «общения» с компьютером он использует язык программирования. Так что сам процесс изучения этого языка мало чем отличается от изучения любого естественного языка, за тем лишь исключением, что «разговаривать» приходится с искусственной системой, а не с живым человеком. Одним из таких языков и является Scratch. Что такое Scratch? Scratch — язык программирования и одновременно визуальная среда разработки программ, созданная специально для изучения основ программирования. Она сочетает в себе самые лучшие решения для начинающих:
Введение 9все основные алгоритмические структуры и конструкции, используемые в реальном программировании; 9визуальные блоки, заменяющие текстовые команды; 9анимационное поле (область исполнения), объекты на котором подчиняются создаваемой из блоков программе; 9встроенные инструменты для создания и редактирования творческих решений; 9свободное (бесплатное) распространение. Создавая анимацию, игры и интерактивные модели в Scratch, на самом деле мы учимся именно программировать и готовимся к покорению новых вершин. Scratch создана группой учёных и разработчиков Массачусетского технологического университета1, США. Какую версию Scratch выбрать? На момент издания этой книги актуальной версией является Scratch 32: 1 2 MIT — Massachusetts Institute of Technology, USA. Если быть точнее, Scratch 3.29.1. 9
10 Введение Это третья версия Scratch, адаптированная для работы онлайн и созданная с использованием возможностей HTML5 и движка WebGL, что позволяет работать со средой и языком программирования не только на персональном компьютере, но и на мобильных платформах (смартфон, планшет и др.). Именно с этой версией мы и будем работать. Scratch доступна на официальном сайте разработчика для работы в онлайн-режиме: https://scratch.mit.edu/ Для начала работы с ней в верхнем меню нужно нажать кнопку Создавай или на кнопку Начни создавать на центральном баннере. Сайт Scratch является сетевым сообществом начинающих (и не только) разработчиков всех возрастов, которые публикуют здесь свои работы в Scratch и даже основывают мини-студии разработки. Присоединиться к сообществу может любой желающий. Так ты сможешь оценить программные и творческие решения разработчиков со всего мира и поделиться своими успехами. Поэтому не стесняйся исследовать и расширять пространство энтузиастов. Ты можешь загрузить индивидуальную работу, а можешь открыть целую студию — как индивидуальный разработчик, так и вместе со своими друзьями, или присоединиться к уже существующей! Загрузка и установка Scratch 3 Offline Editor Помимо работы онлайн, Scratch можно скачать для работы без подключения к сети Интернет. Так работать намного надёжнее, потому что мы не будем зависеть ни от стабильности работы Интернета, ни от скорости соединения.
Загрузка и установка Scratch 3 Offline Editor Оффлайн-версия среды доступна для свободного скачивания с официального сайта разработчика по ссылке: https://scratch.mit. edu/download Также попасть на страницу загрузки можно и с главной страницы. Для этого необходимо перейти в самый её низ и выбрать пункт меню «Загрузить»: При переходе по ссылке мы попадём на страничку загрузки Scratch 3. Здесь необходимо выбрать используемую на твоём компьютере операционную систему, например, Windows (мы будем работать именно с этой версией, но никаких отличий, кроме технических, в них нет): Для Windows доступен выбор: загрузить и установить приложение с помощью Microsoft Store или загрузить установочный файл напрямую. Оба способа одинаково удобны. Мы выберем прямую загрузку. 11
12 Загрузка и установка Scratch 3 Offline Editor Начнётся скачивание установочного файла, после чего его нужно запустить и следовать инструкциям по установке. Важно! Во время установки может понадобиться режим Администратора компьютера (или пароль для него).
РАЗДЕЛ 1. JUNIOR: Основы программирования Первая часть книги посвящена минимальным основам программирования. В ней мы вместе пройдём одиннадцать уровней — от нулевого до десятого — на пути к рангу Junior-программиста. Структура каждого уровня, кроме нулевого, одинакова: сначала мы вместе пошагово изучаем те или иные приёмы программирования, создавая несложные анимации и мини-игры, а затем, для прохождения уровня и получения нового звания, тебе нужно выполнить предложенные задания. Частые вопросы Как изменить язык приложения? При первом запуске Scratch по умолчанию может быть установлен английский язык. Сменить его на русский (или любой другой из доступных) можно, кликнув на значок глобуса в верхней панели меню и инструментов. Кстати! Рекомендуем для каждого нового уровня создавать отдельный проект в среде Scratch и сохранять свои наработки.
РАЗДЕЛ 1. JUNIOR: Основы программирования 14 Как создать новый проект? Для создания нового проекта нужно воспользоваться пунктом меню Файл o Новый (при запуске Scratch новый пустой проект создается автоматически). Как сохранить свой проект? Для сохранения своего проекта во избежание его внезапной потери (например, из-за перепада электроэнергии или программной ошибки) и его дальнейшей демонстрации друзьям или в сети Интернет нужно воспользоваться пунктом меню Файл o Сохранить на свой компьютер, затем выбрать папку для его хранения и задать имя. Важно! Настоятельно рекомендуем почаще пользоваться сохранением своего прогресса в уже созданном проекте. Ещё настоятельнее рекомендуем давать своим проектам осмысленные имена и привыкать к использованию английского языка, так как в реальной разработке не существует широко используемых языков программирования, имеющих в своём арсенале команды на русском языке1. 1 Есть и исключения из правил, например, в России весьма распространён язык программирования 1С, встроенный в семейство программ «1С: Пред6 приятие». Но количество подобных примеров в мировой практике практиче6 ски равно нулю.
Обзор интерфейса Как открыть ранее созданный проект? Для открытия ранее созданного проекта и его последующей демонстрации, доработки или обновления необходимо сначала запустить среду Scratch, а затем воспользоваться пунктом меню Файл o Загрузить с компьютера. В открывшемся окне остаётся найти нужный файл в той директории файловой системы, куда он был ранее сохранен. Важно! Хоть файлы проектов и ассоциированы в файловой системе с приложением Scratch, при попытке их запуска может открываться пустой проект. Это нормально. Для открытия пользуйся инструкцией, описанной выше. Вперёд, на аллею славы Великих Программистов! Обзор интерфейса УРОВЕНЬ 0: «Первый взгляд» Разберёмся, из каких областей состоит рабочее пространство Scratch 3, и договоримся о том, как будем называть те или иные элементы. Область исполнения В правой верхней части расположена область исполнения (или область анимации), и на ней мы сразу видим главного героя, кота Царапку1. 1 «Scratch» в переводе с английского означает «царапать», поэтому логично предположить, что главного котика зовут именно так. 15
16 РАЗДЕЛ 1. JUNIOR: Основы программирования В области исполнения мы будем видеть результат работы создаваемых нами программ. В правом верхнем углу расположены три кнопки переключения вида: — уменьшить область исполнения (иногда это нужно для экономии места на экране); — стандартный вид (установлен по умолчанию); — во весь экран (данный режим лучше всего использовать для тестирования и демонстрации полностью готового при ложения). Зелёный флажок и красный восьмиугольник в левом верхнем углу области исполнения — это кнопки запуска и прерывания исполнения программ соответственно. Область управления объектами
Обзор интерфейса В этой области мы можем выбирать (активировать) объекты для работы с ними и создания программ для них. В новом (пустом) проекте изначально мы можем управлять Царапкой и Сценой. Все объекты, с которыми мы работаем в Scratch, называются Спрайтами. В верхней части этой области мы видим следующие настраиваемые параметры: y имя объекта (можно задавать его любым удобным способом, что особенно актуально, когда объектов в проекте несколько и они взаимодействуют); y положение по горизонтали (по оси x); y положение по вертикали (по оси y); y кнопки включения и отключения отображения объекта; y размер (в процентах); y направление (поговорим об этой системе чуть ниже). В голубой области располагаются все добавленные в текущий проект объекты (спрайты). Их можно активировать для настройки и программирования или удалять, если они стали ненужными. Внизу расположена кнопка добавления новых объектов, предоставляющая четыре варианта: 1) загрузить готовый спрайт с компьютера (доступны популярные графические форматы .svg, .png, .jpg и др.); 2) сюрприз — выбрать случайный спрайт из библиотеки Scratch; 3) нарисовать — создать собственный спрайт с помощью встроенных в Scratch инструментов рисования; 4) выбрать спрайт из библиотеки Scratch. Справа находится отдельная область для работы со сценой (фоном), обладающая похожим функционалом. Направления в Scratch Не будем откладывать на потом и сразу разберемся с системой направлений в Scratch. Под направлением здесь подразумевается направление луча зрения объекта, выходящего из его центра. Кликнем по полю настройки направления. Для удобства понимания у нас есть своеобразный компас, по которому мы можем сориентироваться. 17
РАЗДЕЛ 1. JUNIOR: Основы программирования 18 В общем, система направлений построена следующим образом: y направления правого полукруга — положительные значения от 0 (верх) до 181 (низ); y направления левого полукруга — отрицательные значения от 0 (верх) до 179 (низ). Таким образом, направления построены на использовании градусной меры угла, но, как мы видим, со своими особенностями. Это интересно! В математике и теории чисел ноль не является ни положительным ни отрицательным числом и определяется как «число, при сложении или вычитании с любым другим не изменяющее последнего». Запомним основные направления: y 90 — вправо; y 0 — вверх; y 180 — вниз; y 90 — влево. Помимо этого, в нижней части расположены режимы изменения направления (вращения): — поворот разрешен без ограничений; — поворот только либо строго влево, либо строго вправо; — поворот запрещен. Следующие три области, которые мы рассмотрим, открываются по вкладкам в левой верхней части интерфейса. Область кода Основная рабочая область — место, где происходит написание кода программ. Отдельные части программ называются скриптами1. В левой части мы видим группы команд: Группа 1 Описание Движение Управление положением, направлением и переме6 щением спрайта по области исполнения Внешний вид Изменение внешности спрайта (костюмы, размеры, эффекты) и вывод на экран текстовых фраз От английского script — «сценарий».
Обзор интерфейса Окончание табл. Группа Описание Звук Работа со звуками, мелодиями, нотами, музыкой События Команды управления событиями, происходящими в ходе исполнения программ Управление Алгоритмические конструкции проверки условий, циклов, задержки и команды для работы с клонами спрайтов Сенсоры Стандартные команды проверки и обработки собы6 тий и входных данных Операторы Арифметические и логические операции, работа с псевдослучайными числами, обработка строк Переменные Создание и управление переменными и массивами данных (списками) Другие блоки Резервная группа для создания собственных команд (подпрограмм) Скрипты составляются из различных команд. В Scratch команды представляют собой блоки и размещаются программистом в правой части данной области, цепляясь друг за друга подобно пазлам. 19
20 РАЗДЕЛ 1. JUNIOR: Основы программирования Область костюмов В этой области находятся все доступные костюмы (виды) активного спрайта. Здесь их можно редактировать как в векторном режиме (работа с графическими примитивами), так и в растровом (пиксельном, точечном) с помощью вполне стандартных инструментов, которые можно встретить в любом графическом редакторе. Доступны добавление новых костюмов и редактирование их имён. Область звуков В этой области для активного спрайта можно добавлять звуки, которые он воспроизводит, редактировать их и накладывать предустановленные эффекты (пресеXты). Стоит отметить, что в Scratch 3 инструменты для редактирования костюмов и звуков обрели боXльшую интуитивную понятность и вариативность, так что разобраться с ними не составит труда. Главное — пробовать и не бояться.
Первая программа Область меню В верхней части окна находится панель меню для работы со всем проектом и поле для удобного редактирования его имени — при сохранении это имя по умолчанию будет присвоено имени соответствующего файла, что очень удобно. Первая программа УРОВЕНЬ 1: «Начинающий программист» Создадим нашу первую программу, чтобы ближе познакомиться со средой Scratch и принципами программирования. Перед тем как приступить к написанию скрипта, определимся с теми действиями, которые должен будет выполнить Царапка, то есть опишем логику программы. Логика программы Царапка будет начинать движение из центра экрана, делать несколько шагов вправо, затем влево, после чего скажет: «Привет, мир!». Первый шаг Для начала попробуем просто сделать так, чтобы Царапка шёл вправо. 21
РАЗДЕЛ 1. JUNIOR: Основы программирования 22 Перетащим блок Идти <количество> шагов1 из группы Движение в рабочую область скриптов. Пока ничего не происходит, потому что команда не приведена в исполнение. Сейчас мы можем проверить, работает ли она. Для этого кликнем по ней один раз. Мы можем заметить, что Царапка передвинулся немного вправо в области исполнения, и при этом в области управления изменилось значение положения по горизонтали (ось x) на 10. Отсюда мы делаем вывод, что шаги в этом блоке — на самом деле количество единиц (пикселей на экране), на которые смещается спрайт. Давай добавим ещё четыре таких команды, чтобы Царапка смог прошагать дальше (см. рисунок слева). Для выполнения этого скрипта, состоящего уже из пяти блоков, кликнем по любому из них один раз. Мы можем заметить, что Царапка сместился намного дальше вправо, чем в предыдущий раз, а его положение изменилось ещё на 50 по оси x. 1 В треугольных скобочках <…> мы будем указывать, что подразумевается в качестве значений, которые необходимо внести в поля (окошки) команд.
Первая программа Но мы ведь хотим, чтобы Царапка шёл, а не дёргался вправо. Для этого мы должны добавить несложную анимацию. Сначала сделаем так, чтобы в начале программы кот возвращался в середину сцены, то есть в точку с координатами1 x: 0, y: 0. Для этого в начало скрипта добавим команду Перейти в x: <значение> y: <значение> (см. рисунок справа). Значения в окошках по умолчанию устанавливаются такими, которым соответствует положение спрайта в области исполнения. Мы изменили их на нули. 1 Подробнее о координатах мы поговорим позднее, но пока для понимания нам достаточно этой информации. 23
24 РАЗДЕЛ 1. JUNIOR: Основы программирования Теперь перейдём к анимации. Она представляет собой смену различных кадров с определённой скоростью. Это интересно! Часто производительность компьютера и оптимизацию компьютерных игр оценивают с помощью FPS (от англ. frames per second) — количества кадров, показываемых за одну секунду. Собственно, создание «живых фильмов» занимало человечество с древнейших времен, а первые опыты в этом были поставлены еще в 5-м веке до нашей эры! Отцами-основателями современного кинематографа как жанра искусства считают братьев Люмьер, которым удалось создать устройство, названное «синематограф», — прародителя современных кинокамер. Напоследок заметим: распространенное мнение о том, что человеческий глаз «видит» 24 кадра в секунду, не вполне верно — скорость восприятия нашего зрения на самом деле достигает 77 кадров в секунду. Для анимации шагов Царапки будем менять два его стандартных костюма, которые можно увидеть на вкладке Костюмы. Добавим в наш скрипт блок Следующий костюм из группы Внешний вид после каждой команды Идти <количество> шагов, кроме последней.
Первая программа Теперь попробуем запустить этот скрипт кликом по нему. К сожалению, пока ничего не изменилось: котик по-прежнему не шагает, а дёргается. Дело в том, что мы задали различные кадры, но не отрегулировали скорость их смены — сейчас все наши команды выполняются почти мгновенно, так как процессор компьютера обрабатывает их очень быстро. Исправить положение можно созданием искусственной задержки после каждого шага. Для этого добавим команду Ждать <количество> секунд из группы Управление после каждого шага. 25
26 РАЗДЕЛ 1. JUNIOR: Основы программирования Запустим обновлённый скрипт. Теперь мы наконец видим, как Царапка шагает по области исполнения! F F F F Идём обратно Далее, по логике нашей программы, Царапка должен развернуться и пойти влево. Очевидно, что скрипт движения получится таким же, но с одним отличием: параметр команды Идти <количество> шагов будет равен не 10, а –10, то есть кот должен будет пойти в противоположную сторону. Чтобы заново не добавлять все эти команды, воспользуемся дублированием кода. Кликнем правой кнопкой мыши по первой команде движения (в скрипте она вторая по счёту) и выберем команду Дублировать.
Первая программа Расположим копию рядом. 27
28 РАЗДЕЛ 1. JUNIOR: Основы программирования В копии скрипта нам нужно изменить параметры команды Идти <количество> шагов на –10.
Первая программа Присоединим получившийся скрипт снизу уже имеющегося и запустим. Мы увидим, что Царапка действительно идёт влево, но делает это в стиле «лунной походки», то есть задом. Так дело не пойдёт. Перед началом обратного движения повернём кота в другую сторону. Добавим блок Повернуться в направлении <значение> из группы Движение в то место, где Царапка начинает идти в обратную сторону. Осталось выбрать само направление. Для этого кликнем по параметру этого блока и установим компас на значение –90 (влево). Запустим обновлённый скрипт. Когда он отработает, мы можем прийти в недоумение — Царапка вдруг стал ходить вверх ногами, да ещё и не в ту сторону! 29
30 РАЗДЕЛ 1. JUNIOR: Основы программирования Чтобы этого не происходило, нам нужно изменить режим вращения данного спрайта в его свойствах. Для этого в области управления объектами кликнем по окошку настройки направления и выберем средний переключатель (влево/вправо). Теперь можно запустить скрипт ещё раз. И тут же мы увидим ещё одну ошибку — в самом начале программы кот не поворачивается направо. Значит, нам нужно добавить ещё один блок Повернуться в направлении <значение>. Добавим его в самое начало сразу после первой команды, а значение 90 (вправо) оставим без изменений. Может быть, на этот раз всё сработает как надо? Попробуем запустить скрипт на исполнение.
Первая программа И снова что-то не так! Кот опять ходит «лунной походкой»! Дело в том, что, когда Царапка развернулся, изменился его «луч зрения». Важно! Отсюда можно сделать вывод, что команда Идти <количество> шагов перемещает спрайт на заданное количество пикселей в том направлении, куда направлен его «взгляд» (луч зрения). Поэтому в нашем скрипте изменим все параметры в блоках Идти <количество> шагов с –10 обратно на 10. 31
32 РАЗДЕЛ 1. JUNIOR: Основы программирования Вот такой скрипт должен получиться в итоге. Запустим его и убедимся, что теперь всё работает, как надо! Привет, мир! Последнее, что должен сделать Царапка в нашей программе, — сказать: «Привет, мир!». Это интересно! Фраза «Hello, world!» (в буквальном переводе с английского: «Привет, мир!») выбрана нами не случайно. Это приветствие впервые закрепилось в культуре программистов, благодаря изданию книги «Язык программирования Си» Брайана Кернигана и Денниса Ритчи, в которой оно использовалось в качестве тестового обращения при написании первой программы. Такая программа всего лишь выводит на экран одну фразу: «Hello, world!». Для текстовых языков написание такого кода способно продемонстрировать простейший пример синтаксиса изучаемого языка. Этот единичный случай без особого значения обрёл своеобразный ритуальный смысл, и с тех пор каждый уважающий себя программист, от мала до велика, при изучении нового языка программирования сначала пишет такой несложный код; а любая книга или видеокурс по изучению основ языка программирования непременно включает в себя ма-а-аленький раздел «Hello, world!». Кстати! Если лучше понимать тонкости английского языка, то буквальный перевод «Привет, мир!» не вполне корректен. Данную фразу, как правило, адресуют неопределенному кругу людей в качестве неформального приветствия, так что её следует понимать как «Всем привет!». Добавим в конце скрипта команду Говорить <фраза> <количество> секунд из группы Внешний вид. В первое поле для текста запишем нашу фразу: «Привет, мир!» (хотя теперь мы знаем, что лучше было бы написать «Всем при-
Первая программа вет!», но оставим это на твоё усмотрение), и пусть она продержится на экране две секунды, поэтому второй параметр менять не будем. Последним штрихом перед финальным запуском программы будет, собственно, обеспечение её корректного запуска. Когда мы рассматривали интерфейс среды Scratch 3, видели, что в области исполнения есть зелёный флажок, запускающий скрипты на исполнение. Но сам по себе он работать не будет. Это связано с тем, что скрипты могут запускаться не только вместе со всей программой, но и по возникновению других событий. Пока что мы сделаем так, чтобы наш скрипт запускался именно по нажатию на зелёный флажок. Для этого добавим команду Когда зелёный флажок нажат из группы События в самое начало скрипта. Теперь мы можем запустить нашу программу, нажав на зелёный флажок в области исполнения. И раз уж мы выполнили своеобразный ритуал «Hello, world!», теперь ты можешь считать себя начинающим программистом! Старт дан! Не забудь сохранить полученный результат! 33
34 РАЗДЕЛ 1. JUNIOR: Основы программирования Что мы теперь знаем и умеем? Мы познакомились с самыми простыми способами написания ; скриптов и научились работать с методами создания простой анимации, направлениями движения и смогли обеспечить корректное исполнение алгоритма. Написанный нами скрипт является вполне достойным приме; ром линейного алгоритма — в нём команды непрерывно следуют одна за другой, каждая команда выполняется строго в свою очередь и только один раз. Время для вопросов и экспериментов `Что, если мы добавим ещё один скрипт, который также будет начинаться с команды Когда зелёный флажок нажат и будет содержать другие команды? `Как изменится анимация персонажа, если поменять числовые значения однотипных команд на другие? `Для каких команд совершенно необязательно использовать целые числовые значения? `От чего зависит скорость движения Царапки? `Какой смысл имеет числовое значение количества секунд в команде Говорить <фраза> <количество> секунд? Задания для прохождения первого уровня и получения звания «Начинающий программист» 1. Сделай так, чтобы Царапка двигался быстрее. 2. Добавь фон для сцены — это можно сделать, выбрав объект Сцена в области управления и перейдя на вкладку Фоны. 3. Царапка любит считалочки — помоги Царапке в каждый свой шаг произносить считалочку: «Раз-два-три-четыре-пять, Царапке нравится шагать!» (один шаг одно слово). 4. Попробуй изменить движение кота — пусть он будет подниматься вверх по воображаемой лестнице (подсказка: для этого нужно будет поработать с координатой y). 5. Добавь второго персонажа, который будет двигаться вместе с Царапкой и одновременно с ним в конце произнесёт магическую фразу программистов. В программировании нет рамок (ну, разве что совсем немного) — смело проявляй фантазию!
Подпрограммы и циклы Подпрограммы и циклы УРОВЕНЬ 2: «Посвящённый» В нашей первой программе мы научили Царапку ходить. Но надо признать, что программа получилась громоздкой, а действий Царапка выполнил не так уж много. Для каждого шага Царапки у нас использовались одни и те же команды. Значит, если их несколько раз повторить, то и программа будет меньше, и Царапка сможет прошагать дальше. Плюс ко всему во избежание дублирования кода программисты часто пишут программы внутри программ — такие участки кода называются подпрограммами. Кстати! Условно все подпрограммы можно разделить на процедуры и функции. Процедурой обычно называют такую подпрограмму, которая выполняет какие-либо команды, но при этом не имеет на выходе какого-либо вычисляемого результата. Функция отличается как раз тем, что обязательно имеет вычисляемый результат. Часто (но не всегда) подпрограммам необходимы входные параметры — как автомату по продаже вкусняшек: на вход ему подается номер желаемого товара и определённая за него сумма денег; на выходе он выдаёт конкретный товар. Подпрограммы — убираем дублирование кода Начнём как раз с избегания дублирования кода. Чтобы Царапка сделал один шаг в любом направлении, нам достаточно трёх команд: Значит, мы можем написать маленькую подпрограмму, состоящую всего лишь из этих трёх команд, и затем пользоваться ею — так мы сократим три блока кода до одного. 35
36 РАЗДЕЛ 1. JUNIOR: Основы программирования Кстати! Когда в коде используется какая-либо подпрограмма (процедура или функция), говорят, что происходит вызов подпрограммы. Перейдём в раздел Другие блоки. В нём нажмём кнопку Создать блок. Откроется редактор подпрограммы. Здесь мы должны дать имя нашей подпрограмме и настроить входные параметры, если они нужны.
Подпрограммы и циклы Важно! Подпрограмма всегда выполняет какое-то действие, поэтому первое слово в её названии обязательно должно быть глаголом. Так как наша подпрограмма отвечает за совершение одного шага спрайтом, назовем её «Сделать один шаг». После этого нажмем ОК. В области кода появится заголовок нашей подпрограммы, где мы будем насыщать её командами. Добавим в подпрограмму три команды для шага. На этом подпрограмма готова! Да, это было просто ষ Теперь дело за основным скриптом. В левой части области кода появилась команда, которая будет вызывать написанную нами подпрограмму. Остаётся заменить каждую тройку команд для шага одной новой командой — вызовом подпрограммы «Сделать один шаг». 37
38 РАЗДЕЛ 1. JUNIOR: Основы программирования Отлично! Наш основной скрипт стал выглядеть намного лучше! Кстати! Использование подпрограмм очень удобно, если в коде встречаются повторяющиеся участки. Даже если одни и те же команды в одной и той же последовательности повторяются в коде хотя бы дважды, то программисты всегда стараются вынести такие блоки кода в отдельные подпрограммы.
Подпрограммы и циклы При этом стало намного удобнее редактировать один шаг. На прошлом занятии ты уже наверняка смог ускорить Царапку, ведь для этого всего лишь надо было сократить время задержки, например, до 0.3 секунды. Но это приходилось делать в каждой команде Ждать <количество> секунд. Теперь же достаточно поменять всего одно значение в подпрограмме, и всё будет работать! Важно! В Scratch во всех десятичных дробях (нецелых числах) для отделения целой части от дробной используется точка. Такое же обозначение принято в подавляющем большинстве профессиональных языков программирования. Обусловлено это чисто техническим моментом: в синтаксисе языков программирования символ запятой используется для отделения одного объекта от другого (одного числа от другого, строки от числа и так далее). Плюс Scratch является американским продуктом, а подобное разделение числа принято в США. Это интересно! Обрати внимание на то, как подсвечиваются скрипты, когда ты запускаешь программу на исполнение. В момент, когда вызывается подпрограмма, подсвечивается именно её скрипт, а когда выполняется команда из основного скрипта, вновь подсвечивается он. Именно так это и работает на деле: y компьютер видит вызов подпрограммы и ставит основной скрипт на паузу; y запоминает команду, которая должна была бы выполниться следующей; y уходит в подпрограмму; y выполняет команды в ней; y при выходе из подпрограммы «вспоминает» команду, на которой остановился; y возвращается в то место основной программы, из которого ушёл. 39
40 РАЗДЕЛ 1. JUNIOR: Основы программирования Однако наш алгоритм пока выглядит не совсем красиво — мы всё ещё дублируем код. Да, можно, конечно, написать ещё одну подпрограмму «Сделать пять шагов», которая будет состоять из пяти вызовов подпрограммы «Сделать один шаг», но это будет не совсем корректно. Кстати! Стоит упомянуть, что одна из составляющих культуры программирования — умение правильно выбирать те или иные решения и инструменты, чтобы сделать код кратким, красивым и удобочитаемым. Твой код должен быть написан так, чтобы его можно было понимать и без запуска — подобно хорошему рассказу или плану действий. Сейчас нам необходимо избавиться от самоповтора в коде. Для этого, помимо подпрограмм, существует ещё один механизм — циклы. Цикл — группа повторяющихся действий По сути, это указание процессору о том, что некоторые команды (а иногда и скрипты целиком) нужно повторить. При этом количество повторений можно отрегулировать по-разному. Чтобы во всём разобраться, поставим себе новую цель и опишем логику будущей программы. Кстати! Сейчас можно сохранить прогресс в текущем проекте и начать новый или продолжить работать в нём же. Логика программы Царапка будет идти вправо до тех пор, пока не дойдёт до края области исполнения, после чего развернётся и пойдёт обратно. Первый шаг Чтобы создать циклическую программу, нужно сначала понять, какие действия должны повторяться, чтобы всё работало корректно. В нашей программе всё очевидно: мы должны повторять вызов подпрограммы «Сделать один шаг».
Подпрограммы и циклы Этот вызов мы и поместим в цикл. Циклы бывают разные: y с заданным числом повторений — останавливаются после выполнения определённого заранее количества повторов; y с предусловием — продолжаются, пока выполняется определённое условие, оговоренное в начале цикла; y с постусловием — завершаются, как только выполнится определённое условие, оговоренное в конце цикла; y бесконечные — самые коварные, но оттого не менее полезные в некоторых случаях, без вмешательства остановиться они не могут. В Scratch для некоторых циклов существуют готовые блоки, а для некоторых придётся собирать циклические конструкции. Но мы пойдём от простого к сложному и рассмотрим те виды циклов, для которых есть готовые блоки. Цикл с заданным числом повторений Зайдём в группу Управление и найдём в ней блок Повторить <количество> раз. Этот цикл повторяет все команды, которые содержатся внутри него, и именно в той последовательности, в которой они идут друг за другом. Другими словами, мы зацикливаем очередь выполнения этих команд: когда все они будут выполнены, процесс начнётся заново и будет повторён то количество раз, которое записано в параметре самого цикла. 41
42 РАЗДЕЛ 1. JUNIOR: Основы программирования Теперь возьмём этот блок и поместим в него один вызов подпрограммы «Сделать один шаг». Для корректного запуска скрипта осталось добавить блок Когда зелёный флажок нажат из группы События. Теперь запустим программу и пронаблюдаем за Царапкой. Мы увидим, что Царапка благополучно сделал 10 шагов — именно столько, сколько указано в параметре количества повторов цикла. Запустим скрипт ещё раз, но предварительно увеличим число повторов цикла до 50. Мы увидим, что Царапка вышел за край экрана и попал, скажем так, в «тупик» — теперь нам виден только его хвост.
Подпрограммы и циклы В логике нашей программы мы договорились, что Царапка должен дойти до края, развернуться и пойти дальше. Для обработки этого события есть удобная команда Если касается края, оттолкнуться из группы Движение — её мы добавим внутрь цикла, в самом конце. Тогда на каждом повторе цикла последним шагом станет проверка, не пора ли Царапке развернуться в противоположную сторону. Кстати! Один повтор цикла называется итерацией, от латинского слова «iteratio» — «повторение». Поэтому вместо слов «на каждом повторе цикла» говорят: «на каждой итерации цикла» или вместо слов «на первом кругу цикла» говорят: «на первой итерации цикла» и так далее. 43
44 РАЗДЕЛ 1. JUNIOR: Основы программирования Важно! Если ты начал новый проект, то перед запуском обновлённого скрипта должен вспомнить, что кот при развороте переворачивается вверх ногами, поэтому нужно не забыть изменить его режим вращения. Теперь запустим наш скрипт. Пронаблюдаем: Царапка касается края области анимации, разворачивается и идёт влево до тех пор, пока не коснётся края, разворачивается и делает несколько шагов вправо, после чего скрипт завершается. Очевидно, что для нашей программы цикл с заданным числом повторений — не самое удачное решение. Если мы хотим, чтобы кот ходил туда и обратно без остановки, нам понадобится бесконечный цикл. Бесконечный цикл За организацию бесконечного цикла в Scratch отвечает блок Повторять всегда из группы Управление. Поменяем цикл Повторить <количество> раз на цикл Повторять всегда.
Подпрограммы и циклы И запустим скрипт на исполнение. Теперь мы видим, что кот ходит из стороны в сторону без остановки. Завершить бесконечный цикл всё-таки можно. Для этого есть два способа: 1) вручную нажать на кнопку останова1 (красный восьмиугольник) — это будет принудительная остановка исполнения программы; 2) задать параметры и условия, при которых цикл завершится, то есть организовать его программное прерывание. Пока что будем останавливать бесконечные циклы с помощью кнопки останова, так как с проверкой условий мы познакомимся позже. Отсюда мы видим, что бесконечный цикл хоть и решает нашу задачу, но не совсем правильно — так как нам не нужно, чтобы программа работала вечно. Цикл с предусловием Последний вид цикла, который существует в Scratch, — цикл с предусловием. Каждый раз перед тем, как выполнить одну итерацию, этот цикл проверяет некоторое условие. Если оно оказывается выполненным (истинным), то цикл завершается; если же нет (ложным), цикл идёт на новую итерацию. За организацию данного цикла в Scratch отвечает блок Повторять, пока не <условие> из группы Управление. Для начала заменим бесконечный цикл на цикл с предусловием. 1 Нет, мы не ошиблись при написании слова «остановКа». Точкой останова (от англ. breakpoint) в программировании называют намеренное прерывание ис6 полнения программы. Обычно за это отвечает специальная команда, кото6 рую можно использовать в разных частях программы при её отладке. Также останов программы вызывает ввод данных — чтобы программа продолжилась только после того, как пользователь введёт что6то с клавиатуры. В нашем случае кнопка останова вызывает завершение исполнения всех скриптов без исключения. 45
46 РАЗДЕЛ 1. JUNIOR: Основы программирования Остаётся только добавить условие прерывания этого цикла. Пусть Царапка останавливается в тот момент, когда касается указателя мыши. Зайдём в группу Сенсоры и перетащим блок Касается <объект>? в окно условия цикла (шестиугольник). В качестве объекта по умолчанию уже указан «указатель мыши», он нам и нужен. Но можно раскрыть выпадающий список и посмотреть, что ещё доступен объект «край» (край экрана). Когда мы будем создавать проекты с боXльшим количеством действующих спрайтов, они также будут появляться в качестве доступных для проверки данного условия объектов.
Подпрограммы и циклы Теперь мы можем запустить скрипт. Царапка по-прежнему бегает из стороны в сторону. Но если мы попробуем навести на него указатель мыши, то он тут же остановится. Это происходит потому, что завершается цикл, а после него никаких команд для исполнения нет, как нет и других активных скриптов. Поэтому программа завершается целиком, и процесс её исполнения на этом останавливается. Кошки-мышки Усовершенствуем нашу программу — сделаем так, чтобы кот гонялся за мышкой, а как только догонит её, останавливался и восклицал: «Я тебя поймал!». Для этого добавим внутрь нашего цикла блок Повернуться к <объект> из группы Движение. По умолчанию в выпадающем списке выбран Указатель мыши, так его и оставим. Осталось сделать так, чтобы Царапка кричал «Я тебя поймал!», как только «догонит» курсор мыши. Мы уже знаем, что цикл завершается тогда, когда кот касается указателя мыши. Значит, и восклицать он должен сразу после того, как цикл завершится. Добавим блок Говорить <фраза> <количество> секунд из группы Внешний вид сразу после цикла. В первое окошко занесём нашу фразу: «Я тебя поймал!», во втором параметр 2 секунды менять не станем — этого вполне достаточно, чтобы успеть её прочитать. 47
48 РАЗДЕЛ 1. JUNIOR: Основы программирования Теперь ты можешь запустить скрипт и поиграть с Царапкой в «Кошки-мышки»! Добавим красок Раз уж у нас получилась простенькая, но зато своя собственная, первая игра, надо её и оформить соответствующе. Добавим красочный фон. Для этого в области управления объектами справа выбери Сцену и кликни по круглой кнопке внизу.
Подпрограммы и циклы Откроется Библиотека фонов, в которой мы увидим множество различных вариантов. Добавим какой-нибудь из них. Например, сверху кликнем по категории На открытом воздухе и выберем в качестве фона Savanna. Теперь можно запустить нашу игру и воображать, что Царапка гоняется за маленькими песчанками в пустыне! 49
50 РАЗДЕЛ 1. JUNIOR: Основы программирования Что мы теперь знаем и умеем? Мы познакомились со способами сокращения кода: ; y написанием подпрограмм (при этом разобрались в их видах); y созданием циклов, то есть с новой алгоритмической конструкцией, и разобрали три их вида: с заданным числом повторений, бесконечный и с предусловием. Написанный нами скрипт является примером циклического ; алгоритма — в нём присутствуют повторяющиеся участки кода с использованием цикла с предусловием. При этом наша программа включает в себя подпрограмму — ; самостоятельный участок кода, вызываемый другим скриптом на исполнение в нужный момент. А также мы сделали свою первую мини-игру! ; Время вопросов и экспериментов `С какой части речи должно начинаться название подпрограммы? `Как изменится программа, если команды в подпрограмме попробовать поменять местами? `Что мы забыли сделать в нашей игре, чтобы при запуске программы кот оказывался всегда в одном и том же месте? `Как можно в течение игры менять фон сцены в зависимости от её этапа? Задания для прохождения второго уровня и получения звания «Посвящённый» 1. Сделай так, чтобы Царапка периодически выкрикивал фразы: «Поймаю!» и «Догоню!», пока он гоняется за мышкой (подсказка: лучше написать для этого отдельный, независимый от движения скрипт). 2. Попробуй немного изменить игру — пусть Царапка отпускает мышку первые два раза, выкрикивая: «Ой, убежала!», и продолжает гоняться за ней, пока, наконец, не поймает в третий раз. 3. Попробуй добавить в игру ещё один объект, который будет всегда находиться в том же месте, что и указатель мыши (например, можно добавить спрайт реальной мышки), — так ты
Декартова система координат улучшишь игровой опыт, и мышка, за которой гонится Царапка, обретёт более понятный вид, нежели обычный курсор. Не забудь изменить условие в цикле! 4. А теперь сделай так, чтобы мышка сама «бегала» от Царапки по экрану (подсказка: воспользуйся командой Плыть <количество> секунд к <объект>, где в качестве объекта укажи «случайное положение»). 5. Когда у тебя получилось выполнить все задания, обеспечь корректное завершение всей программы: когда Царапка поймал мышку в третий раз, она должна перестать бегать по экрану; после того как скрипт Царапки завершился, все остальные скрипты программы тоже должны перестать работать. Декартова система координат УРОВЕНЬ 3: «Мастер позиционирования» Мы уже научились перемещать объекты по экрану и немного управлять их поведением. Самое время углубиться в вопрос технологии их перемещения и наконец узнать, что же за мифические координаты x и y мы использовали ранее. Вспомним, что в самой первой программе команда Идти 10 шагов перемещала нашего кота по экрану, и в то же время изменялась координата x. Перед тем как перейти к постановке новой задачи и написанию кода, мы разберёмся с самими координатами. Координаты и Рене Декарт Люди на протяжении многих веков развивали науку, и одной из задач было изобретение способа однозначного определения местонахождения объектов на местности. Например, мы знаем, что пираты прятали свои сокровища на островах и рисовали карты, на которых отмечали ориентиры — высокие пальмы, камни необычной формы, похожие на зев тигра пещеры и так далее, — чтобы можно было определиться, куда идти. 51
52 РАЗДЕЛ 1. JUNIOR: Основы программирования Однако составлены такие карты были далеко не точно. Особенно поиск затрудняли такие пояснения, как: «Пройти пятьдесят шагов вперёд, затем трижды прыгнуть вправо…», потому что не было ясно, какие и чьи шаги (может, речь идёт о длине шага попугая) и какова величина прыжка (попробуй перепрыгать кенгуру!). До сих пор существуют карты, по которым спрятанные сокровища всё ещё не найдены. В 1637 году французский учёный-математик и философ Рене Декарт, работая над своим трудом «Рассуждение о методе», столкнулся с той же проблемой — он хотел определить местонахождение точки на плоскости. После долгих размышлений и научных изысканий он пришёл к ответу и предложил для этого свою прямоугольную систему координат.
Декартова система координат Данная система состоит из двух перпендикулярных направленных отрезков, называемых осями. Горизонтальная ось — абсцисс (от лат. отрезок), или ось x («икс»). Вертикальная ось — ординат (от лат. расположенный по порядку), или ось y («игрек»). Место их пересечения обозначается буквой O и называется началом отсчёта. Ось x направлена в положительную сторону изменения числовых значений (вправо). Слева от точки пересечения находятся отрицательные значения. Ось y также имеет положительное направление, а отрицательные значения находятся снизу от точки пересечения. Чтобы исключить погрешность в измерениях, вместо «шагов» и «прыжков» Декарт ввёл понятие единичного отрезка — равнозначной величины для всей системы. Например, на рисунке выше единичный отрезок равен двум тетрадным клеточкам, или примерно одному сантиметру. Это интересно! В зависимости от решаемой задачи оси можно располагать не только перпендикулярно, но и под другими углами относительно друг друга. Такие системы координат называют аффинными. Но и это не всё — количество осей можно увеличивать! Например, чтобы работать с более привычными 53
54 РАЗДЕЛ 1. JUNIOR: Основы программирования нам объёмными объектами, понадобится третья ось (обычно её обозначают буквой z и называют аппликат, что в переводе с латыни означает «прилегающая»). А если мы захотим фиксировать изменения объёмного объекта с течением времени, то придется добавить и четвертую ось t (от лат. tempus — «время»). Так можно создавать многомерные пространства и исследовать поведение различных объектов в них, развивая математику и наши представления о мире. С тех пор для любой точки на плоскости стало возможным задать её однозначное положение, записав, на сколько единичных отрезков нужно продвинуться по обеим осям от начала отсчёта. Эта пара чисел и называется координатами. Например, для точки А на рисунке такими числами являются по оси x: 2, по оси y: 3. Для записи координат точки принята следующая форма: А(2; 3). Координаты точки пересечения всегда: O(0; 0). Теперь приступим к применению этих знаний в программировании. Логика программы Царапка будет играть в футбол на Луне! Он разбежится, ударит по мячику, и тот начнёт летать — ведь на Луне вес всех объектов гораздо меньше, чем на Земле! Отправляемся на Луну Для начала создадим лунный пейзаж — изменим фон, как в предыдущем уровне, но на этот раз откроем категорию Космос, выберем изображение Moon и нажмём ОК. Вот так всего за пару кликов Царапка оказался на Луне! Люди так не могут, а программисты — всегда пожалуйста!
Декартова система координат Игра начинается! Теперь добавим новый спрайт. Для этого в области управления объектами нажмём кнопку Выбрать спрайт. В открывшемся окне в категории Все выберем спрайт с именем Ball. 55
56 РАЗДЕЛ 1. JUNIOR: Основы программирования Мячик сразу появится в области исполнения и добавится в область управления объектами. Можно заметить, что у мячика есть несколько костюмов, значит, и работать с ним будет интереснее. Ещё у мяча более понятное имя Ball. Для удобства сменим имя и у Царапки в области управления объектами на Scratchy.
Декартова система координат Теперь подготовим Царапку к удару по мячу. Объекты можно свободно перемещать по области исполнения, перетаскивая их мышью. Расположим Царапку и мячик примерно так: Царапка бьёт по мячу! Начнём с программирования поведения Царапки. Важно! Не забудь активировать его в области управления объектами. Мы уже знаем, что программа должна иметь начало. Поэтому добавим соответствующую команду. 57
58 РАЗДЕЛ 1. JUNIOR: Основы программирования Для начала зафиксируем стартовую позицию, чтобы Царапка каждый раз начинал с одного и того же места. Обратим внимание на текущие координаты в области управления объектами. Добавим команду Перейти в x: <значение> y: <значение> из группы Движение. По умолчанию в данной команде установлены координаты текущего положения объекта — то, что нам и надо. Теперь пусть Царапка повернётся к мячику и «побежит» к нему. Добавим блок Повернуться к <объект> из группы Движение и выберем из выпадающего списка спрайт с именем Ball.
Декартова система координат Можно запустить скрипт и увидеть, что Царапка теперь «смотрит» на мяч. Далее сделаем так, чтобы кот побежал к мячу, но надо вспомнить, что сила притяжения на Луне не такая, как на Земле! Поэтому Царапка оттолкнётся от поверхности Луны и «долетит» до мяча. Первый шаг будет состоять из уже знакомых команд Идти 10 шагов из группы Движение и Следующий костюм из группы Внешний вид. А теперь добавим новую команду Плыть <количество> секунд к <объект> 59
60 РАЗДЕЛ 1. JUNIOR: Основы программирования В качестве целевого объекта выберем, конечно же, Ball. Эта команда определяет, за какое время спрайт должен «доплыть» (плавно переместиться) до заданного объекта. Кстати! Рядом с этой командой есть похожая на неё Плыть <количество> секунд в x:<значение> y:<значение>. Она работает так же, но перемещает объект в точку с точно заданными координатами. Можно запустить этот скрипт и пронаблюдать, как кот отталкивается от поверхности Луны, «плывет» и… останавливается прямо за мячом. Почему это произошло? Дело в том, что последняя команда считывает координаты мяча и двигает Царапку до того момента, пока его координаты не совпадут со считанными координатами. При этом, как мы уже говорили, координаты задаются для точки (а в каждом нашем объекте можно уместить много таких точек). По умолчанию такой точкой для любого объекта является его центр. Именно поэтому центр Царапки «приплыл» прямо в центр мяча.
Декартова система координат Надо бы это исправить. И тут есть два пути: либо изменить центры объектов (что в нашем случае не вполне удобно), либо воспользоваться сенсорами касания объектов друг друга. Реализуем второй способ. Уберём команду Плыть <количество> секунд к <объект> и заменим её циклом с предусловием, который мы рассматривали на предыдущем уровне. Это блок Повторять, пока не из группы Управление. Далее зададим условие прерывания этого цикла. Для этого из группы Сенсоры поместим в ячейку условия команду Касается … И выберем из выпадающего списка спрайт с именем Ball. 61
62 РАЗДЕЛ 1. JUNIOR: Основы программирования Внутрь цикла добавим одну-единственную команду Идти <количество> шагов из группы Движение. В качестве параметра зададим 3 шага, чтобы создать иллюзию того, что Царапка неспешно летит к мячику. Осталось создать анимацию «пинка» Царапки, для этого будет достаточно снова сменить костюм на исходный. После цикла добавим блок Следующий костюм из группы Внешний вид. Теперь можно запустить программу и убедиться, что Царапка прыгает к мячу и пинает его. Далее займёмся поведением мячика.
Декартова система координат Штанга! В области управления объектами активируем спрайт с именем Ball. Добавим команду начала программы и первым делом зафиксируем начальное положение мяча. Далее добавим блок Ждать до <условие> из группы Управление. Мячик должен «дождаться», пока Царапка коснётся его. Поэтому в условие окончания ожидания добавим уже знакомый блок Касается <объект> из группы Сенсоры и в выпадающем списке выберем Царапку (Scratchy). 63
64 РАЗДЕЛ 1. JUNIOR: Основы программирования Здесь наш скрипт встанет на паузу и продолжит выполнять последующие команды, как только Царапка коснётся мяча. После этого мяч должен начать летать по экрану. Мы не хотим, чтобы это движение было хаотичным. Пусть он будет «ударяться» о края экрана: правый, верхний, левый, нижний; и лететь так, как бы это могло быть на Луне. Сделаем мы это с помощью четырёх команд Плыть <количество> секунд в точку x:<значение> y:<значение>. Но сначала выясним позиции для мяча, которые нам понадобятся. Для этого будем перемещать его по области исполнения и записывать координаты. x: 215, y: 0
Декартова система координат x: 0, y: 160 x: –215, y: 0 x: 0, y: –160 65
66 РАЗДЕЛ 1. JUNIOR: Основы программирования Реализуем такое поведение: Ура! Царапка играет в футбол на Луне! Что мы теперь знаем и умеем? Мы наглядно изучили декартову систему координат и приме; нили её в реальном программировании поведения объектов. Мы познакомились с новым приёмом — для двух разных ; объектов написали два скрипта, которые выполнялись параллельно. В программировании это называется параллельным исполнением. С его помощью можно решать сложные задачи, ставящиеся перед программистом. Время вопросов и экспериментов `К каким видам алгоритмов принадлежат составленные нами скрипты? `Могли бы мы обойтись в данной программе без циклов? `Можно ли вынести какие-либо участки кода в подпрограмму? `Какими значениями по координатам x и y ограничен экран в Scratch?
Рисование по координатам `Что будет, если записать в значения координат слишком большие числа? `Что будет, если в команде Плыть <количество> секунд в точку x:<значение> y:<значение> изменить количество секунд в боXльшую или меньшую сторону? `Если количество секунд в данной команде будет равно нулю, то какой командой её лучше заменить? Задания для прохождения третьего уровня и получения звания «Мастер позиционирования» 1. Если сразу после завершения программы запустить скрипты на исполнение ещё раз, то Царапка повернётся к последней позиции мяча быстрее, чем тот успеет встать на свою исходную позицию. Исправь это так, чтобы Царапка в начале выкрикивал: «Пенальти!» и только потом начинал движение. 2. Можно заметить, что если изначально у Царапки не выбран его первый основной костюм, то анимация получается не вполне корректной. Исправь скрипт так, чтобы изначально для Царапки всегда был выбран Костюм 1. 3. Запрограммируй полёт мяча иначе: измени скорость и траекторию полёта. 4. Сделай так, чтобы мяч при каждом изменении траектории полёта менял свой костюм, а в конце плавно возвращался на исходную позицию. 5. Сделай так, чтобы после остановки мяча в какой-либо точке Царапка продолжал пинать его ещё три раза. Рисование по координатам УРОВЕНЬ 4: «Дизайнер» Теперь, когда мы научились позиционировать объект на экране, пользуясь координатами, самое время научиться рисовать! В Scratch любой спрайт может оставлять за собой след в виде линии. Но это смотрится ещё лучше, когда этим спрайтом является, например, карандаш! Так мы сможем почувствовать себя настоящими мастерами искусства и одновременно повелителями программного пера! 67
68 РАЗДЕЛ 1. JUNIOR: Основы программирования Инструмент для рисования Для начала нам придётся попрощаться с Царапкой. В области управления объектами кликнем по значку мусорной корзины рядом с Царапкой. Далее добавим новый объект. Для этого воспользуемся Библиотекой спрайтов. В той же области надо нажать кнопку Выбрать спрайт. В открывшемся окне введём в окно поиска слово Pencil (карандаш) и выберем имеющийся спрайт карандаша. pencil Pencil Первые штрихи За рисование в Scratch отвечает группа команд Перо. По умолчанию её нет, поэтому нажмём на кнопку Добавить расширение, расположенную слева внизу области кода. В открывшемся окне представлены различные расширения возможностей программирования: работа со звуком и пером, управление роботами и микроконтроллерами, распознавание жестов с помощью веб-камеры и речи с помощью микрофона, перевод текста на различные языки. Нас интересует расширение Перо — кликаем по нему.
Рисование по координатам В области кода добавится новая группа команд: Для того чтобы карандаш начал рисовать, нужно выполнить команду Опустить перо. После этого любой объект начинает оставлять за собой след. 69
70 РАЗДЕЛ 1. JUNIOR: Основы программирования Перетащим эту команду в область скриптов. Далее нужно лишь двигать карандаш и наблюдать за тем, что получается. Для эксперимента добавим команду Идти 50 шагов. Остаётся добавить команду начала и запустить программу. И вот что мы увидим:
Рисование по координатам Линия появляется от середины карандаша. В реальности она, конечно же, появлялась бы у острия грифеля. Что же не так? Изначально тот самый инструмент Перо, который есть у каждого объекта, находится в центре его костюма. В этот раз, чтобы исправить ситуацию, необходимо переместить центр костюма к острию. Для этого откроем вкладку Костюмы. Кстати! Заметим, что у карандаша есть ещё и второй, более реалистичный костюм. При желании можно использовать и его. С помощью мыши выделяем костюм в области редактирования целиком. 71
72 РАЗДЕЛ 1. JUNIOR: Основы программирования Вокруг костюма появляется рамка выделения с элементами трансформирования. В середине костюма можно увидеть перекрестие, указывающее на относительный центр, то есть центр выделенной области. Абсолютный центр (то, что Scratch считает центром объекта) находится прямо за относительным центром (так как мы выделили карандаш целиком). Держа курсор мыши над костюмом, зажимаем левую кнопку и «тащим» костюм так, чтобы его остриё оказалось над абсолютным центром (кружок с перекрестием на рисунке ниже).
Рисование по координатам Сразу же в области исполнения мы можем увидеть, что теперь линия рисуется правильно. Для полноценного рисования выполним ещё несколько действий. Сначала уменьшим размеры карандаша, так как сейчас он крупноват для экрана. Можно сделать это напрямую в области управления объектами или добавить соответствующую команду в начало скрипта. Воспользуемся первым способом и установим размер, равный 50% (половина) от изначального. 73
74 РАЗДЕЛ 1. JUNIOR: Основы программирования Теперь подумаем вот о чём: y во избежание появления лишних штрихов, первым делом при запуске программы перо должно быть поднято; y при каждом запуске программы то, что было нарисовано ранее, хорошо бы удалять; y также будет полезно возвращать каждый раз карандаш в исходную позицию, например, в начало отсчёта (центр). Реализуем всё по порядку. Добавим команду Поднять перо сразу после начала программы.
Рисование по координатам Далее добавим команду Стереть всё — она удаляет с экрана всё, что было нарисовано пером любых объектов. Остаётся добавить команду Перейти в x: 0 y: 0. Начинаем рисовать Надо признать, что намного приятнее наблюдать за тем, как создаётся картина, чем сразу увидеть готовый результат. Поэтому для рисования мы будем использовать команду Плыть в точку x: <значение> y: <значение>, вместо Идти <количество> шагов или Перейти в x: <значение> y: <значение>. Постановка задачи: нарисовать домик с треугольной крышей, дверью, окнами и печной трубой. Начинаем с фасада: в плоском изображении он представляет из себя простой прямоугольник. Для того чтобы нарисовать его по координатам, нужно понять, какие конкретно точки и их координаты нам понадобятся. 75
РАЗДЕЛ 1. JUNIOR: Основы программирования 76 Рисование в Scratch происходит, по сути, прямыми отрезками. Прямоугольник состоит из четырёх таких отрезков. А значит, нам понадобятся координаты начала и конца каждого такого отрезка, то есть точек перегиба прямоугольника. Для начала рассмотрим, как ограничен основной экран. Кстати! Данный фон доступен в Библиотеке фонов, в категории Все под именем xy-grid. В соответствии с границами создадим заготовку рисунка. Сделать это можно на клетчатой бумаге или с помощью любого графического редактора1. 1 Мы, например, пользовались бесплатным векторным графическим редакто6 ром Inkscape.
Рисование по координатам Для начала изобразим координатную плоскость. В качестве единичного отрезка зададим: 1 клетка 10 пикселей. 77
78 РАЗДЕЛ 1. JUNIOR: Основы программирования Расставим точки, обозначающие углы будущего прямоугольника. Назовём эти точки латинскими буквами и определим координаты для каждой.
Рисование по координатам Соединим эти точки: это нужно делать так, как будет рисовать карандаш в Scratch. Самый лучший способ — не поднимая пера. Значит, соединим их по алфавиту: A o B o C o D o A. Заметим, что карандаш должен возвращаться в ту же точку, из которой начал рисовать. Логика программы В начале нужно поднять перо, затем очистить экран и переместить карандаш в центр. Далее каждый элемент дома (фасад, крыша, окно, дверь, труба) будем рисовать по следующим этапам: 9перемещаем карандаш в начальную точку фигуры; 9опускаем перо; 9«плаваем» от точки к точке; 9по завершении поднимаем перо. Кстати! Для каждой фигуры лучше писать скрипт отдельно, тестировать его и лишь после этого присоединять к основному. Приступим к изображению фасада. Перемещаем карандаш к точке A с координатами (50; 60). 79
80 РАЗДЕЛ 1. JUNIOR: Основы программирования Затем опускаем перо. Далее «проплывём» к точкам B, C, D и вернёмся в A. Сделать это получится с помощью четырёх команд. В конце остаётся поднять перо.
Рисование по координатам Тестируем данный скрипт, кликнув по нему. Если что-то пошло не так, следует ещё раз проверить каждую из команд, возможно, где-то допущена ошибка. Если всё хорошо и прямоугольник нарисован корректно, добавляем этот скрипт к основной программе. Запустим программу и пронаблюдаем, как карандаш нарисует фасад. Отлично! 81
82 РАЗДЕЛ 1. JUNIOR: Основы программирования Теперь, пользуясь освоенной логикой, дорисуй домик целиком. На бумаге заготовка может выглядеть так: В итоге получится вот такой уютный домик.
Рисование по координатам Комментирование кода Как мы уже говорили ранее, код надо писать так, чтобы его можно было читать, как хороший рассказ, и понимать без запуска на исполнение. Когда код разрастётся (а для целого домика это будет довольно внушительный по своим размерам и количеству команд скрипт), хорошим тоном станут комментарии. В реальном программировании с твоим кодом в 99.9% случаев будут работать другие программисты (или те, кто обучаются программированию и нашли твой код в качестве примера реализации полезной фичи). Грамотные комментарии могут помочь с пониманием твоего кода. Плюс, когда ты не работаешь со своим собственным кодом некоторое время, а потом возвращаешься к нему, чтобы продемонстрировать, позаимствовать какое-то решение или улучшить его, — твои комментарии станут твоим же помощником. Но это не значит, что код нужно то и дело комментировать. Умение правильно выбирать, чтоX комментировать, а чтоX нет, — ещё одна часть, относящаяся к твоей культуре программирования. Это интересно! Фича — сленговое слово программистов, происходящее от английского «feature» (особенность), обозначающее некоторую особенность реализации какого-либо решения, чаще всего носящую положительный характер. Другими словами, фича — хорошая реализация какой-либо функциональности в коде. Существует шуточная фраза: «Не баг, а фича». Под «багом» (от англ. «жук») подразумевают какое-то несовершенство или ошибку в коде. Но иногда бывает так, что баг оказывается полезным и его можно считать фичей. Любители поиграть в Minecraft наверняка сталкивались с Крипером. Так вот этот персонаж появился в результате ошибки. Создатель Майнкрафта Маркус Перссон во время моделирования животных для игры перепутал местами значения длины и ширины туловища (в этот момент он моделировал свинку), в результате и получился будущий Крипер — не баг, а фича! Однако стоит помнить и простую истину: не каждый баг является фичей, не каждая фича является фичей и не каждый баг является багом ষ . В нашем коде есть участок, отвечающий за отрисовку фасада, — как раз хороший пример для комментария! 83
84 РАЗДЕЛ 1. JUNIOR: Основы программирования Кликнем по верхней команде данного блока правой кнопкой мыши и выберем команду Добавить комментарий. Появится окно для комментария с привязкой к этой команде: Комментарии не считаются фрагментами кода, так что здесь можно чувствовать себя свободно. Опишем, за что отвечает данный блок кода и растянем окно комментария (правый нижний угол) на длину блока, к которому написан комментарий, — так будет понятно, где начинается комментированный блок и где заканчивается.
Рисование по координатам Комментарии можно сворачивать для компактности и разворачивать для чтения в любой момент работы с кодом. Для этого нужно нажать на значок стрелочки. Для удаления комментария нужно нажать на крестик. Теперь наш код стал ещё лучше! Покажем для наглядности, как он будет выглядеть дальше, добавив блок команд для отрисовки крыши: 85
86 РАЗДЕЛ 1. JUNIOR: Основы программирования С такими комментариями код станет более доступным для понимания другим человеком, а работать с ним будет проще. Что мы теперь знаем и умеем? Мы научились работать с группой команд Перо и управлять ; программируемым рисованием. Применили метод координат в художественном изображении. ; Познакомились с понятием центра объекта и научились само; стоятельно его определять для конкретного костюма. Научились комментировать код, следуя правилам хорошего тона. ; Время вопросов и экспериментов `К какому виду алгоритмов принадлежит составленный нами скрипт? `Могли бы мы составить такую структуру, которая позволила бы сократить количество команд? `Есть ли в нашей программе участки кода, которые можно вынести в подпрограмму?
Псевдослучайные числа `Могут ли в данной программе пригодиться циклы? `Можно ли с помощью команд пера и перемещения нарисовать кривую линию или окружность? Задания для прохождения четвёртого уровня и получения звания «Дизайнер» 1. Допиши программу так, чтобы домик был изображён полностью. 2. Сделай так, чтобы в начале рисования карандаш появлялся на экране и приветствовал пользователя, а в конце прощался и исчезал. 3. Попробуй применить и другие команды из группы Перо: стены дома могут стать толще (а значит, теплее и надёжнее), а линии заиграть новыми цветами. 4. Создай скрипты, которые изобразят на экране несколько классических фигур: треугольник, прямоугольник, пятиугольник, шестиугольник и восьмиугольник (подсказка: для этого нужно воспользоваться командой поворота карандаша на определенное количество градусов и, для удобства, циклами). 5. Составь скрипт, который нарисует следующую фигуру: 6. Составь скрипт, который нарисует окружность (помни, что полный поворот вокруг своей оси для объекта составляет 360 градусов, а один шаг в Scratch равен одному пикселю). 7. Когда ты справился с заданиями 5 и 6, составь скрипт, который дорисует струю дыма, выходящую из печной трубы домика. Псевдослучайные числа УРОВЕНЬ 5: «Неслучайный пассажир» Псевдослучайные числа «Случайности не случайны», — так говорит мастер Угвэй в замечательном мультфильме «Кунг-фу панда». 87
88 РАЗДЕЛ 1. JUNIOR: Основы программирования Этот мудрейший из галапагосских черепах необычайно прав! И вот почему… Давай попробуем загадать какое-нибудь случайное число. Вот прямо сейчас. Совершенно любое число. Загадал(а)? Отлично! Но теперь давай подумаем, так ли оно случайно? Знания любого человека о числах ограничены. И если мы знаем какое-то очень большое число, то оно, в первую очередь, и будет являться границей наших знаний. А значит, то число, которое мы загадали, на самом деле оказывается выбранным из какого-то диапазона. Это говорит о том, что возможность появления любого такого числа можно с определенной долей вероятности предсказать (точнее посчитать). Это может показаться сложным и непонятным, поэтому рассмотрим ещё один пример. Шестигранный кубик используется в большинстве настольных игр. Результат его броска считается случайным. Но опять же включаем «думательный аппарат»: бросок кубика приводит к одному из шести возможных вариантов (падение ребром будем считать невозможным — такой идеальный баланс под силу только некоторым титанам). А значит, можно посчитать вероятность выпадения любого из чисел в процентах: 1 100% | 16,67%. 6· Таким образом, примерно в 17 случаях из ста на кубике должно выпадать одно и то же число.
Псевдослучайные числа Это интересно! Один из покупателей популярного маркетплейса приобрёл кубик для настольной игры Dungeons & Dragons (подземелья и драконы), состоящий из 20 граней. И вот какой отзыв он оставил: Комментарии Сделал 5000 бросков кубика к20. К сожалению, я не могу приложить полную статистическую выкладку, расчёт и гистограмму: — грань 1 выпала 290 раз; — грань 2 выпала 308 раз; — грань 3 выпала 208 раз; — грань 4 выпала 166 раз; — грань 5 выпала 196 раз; — грань 6 выпала 204 раза; — грань 7 выпала 207 раз; — грань 8 выпала 330 раз; — грань 9 выпала 282 раза; — грань 10 выпала 328 раз; — грань 11 выпала 312 раз; — грань 12 выпала 305 раз; — грань 13 выпала 296 раз; — грань 14 выпала 164 раза; — грань 15 выпала 211 раз; — грань 16 выпала 164 раза; — грань 17 выпала 206 раз; — грань 18 выпала 187 раз; — грань 19 выпала 300 раз; — грань 20 выпала 336 раз. Шанс выпадения каждой грани должен составлять 1/20, или 5%, то есть при 5000 роллов каждая грань должна была выпасть 5000*0,05 = 250 раз. Теперь смотрим на результаты: разброс от 164 до 336. Грани 4, 14, 16 и 18 выпадают в два раза реже (!!!), чем 8, 10, 19 и 20. Расчётное значение критерия хи6квадрат составляет 301,09 при максимально допустимом 30,14, p6value 1,2*10^–50: скорее наступит тепловая смерть Вселенной, чем такое распределение будет достигнуто случайным образом. (Изображение взято из ТГ-канала про компьютерные игры «Пекарня».) Это интересно! Вообще, встретить чисто случайное число крайне непросто. Нам понадобится какое-нибудь непредсказуемое физическое явление. Например, колебания голоса диктора радио во время помех — в этом случае поведение тональности голоса или его громкости заранее предсказать невозможно, так как невозможно предсказать момент появления, характер и силу помех. 89
90 РАЗДЕЛ 1. JUNIOR: Основы программирования Обратимся к компьютеру. Его память, как известно, ограничена и может быть вполне выражена конкретной величиной (например, 16 гигабайт, 1 терабайт и так далее). А значит, и он не может «знать» бесконечно много чисел. Получается, что его диапазон «знаний» о числах тоже ограничен. К тому же если бы компьютеры имели непредсказуемое поведение, то это бы привело наш мир в хаос (зато программисты стали бы повелителями хаоса и надеждой человечества). Отсюда и возникает понятие ПСЕВДОслучайных чисел. Дело в том, что компьютер генерирует такое число путем выбора одного из некоего заданного диапазона. Такие числа как бы случайны. С этим мы и познакомимся в первую очередь. Это интересно! Рассмотрим один из вариантов того, как компьютер может создавать псевдослучайные числа, на примере генератора (это такой алгоритм), предложенного Джоном фон Нейманом — автором архитектуры современных компьютеров. N N2 Генератор случайных чисел Задаём начальное значение генератора случайных чисел, это может быть любое число — 12345 его называют «зерном» генератора (в данном случае начальным) 152 399 025 Возводим зерно в квадрат Получаем псевдослучайную цифру — как 152 399 025 9 среднюю в квадрате зерна От этого же квадрата отбрасываем цифры так, чтобы в середине осталось пятизначное чис152 399 025 ло (так как начальное тоже было пятизначным) — это новое зерно генератора Действия можно повторить с новым зерном… 23990 Берём новое зерно генератора 575 520 100 Возводим в квадрат R 575 520 100 N N2 R С 2 Получаем следующую псевдослучайную цифру — тоже как среднюю в квадрате зерна Отбрасываем числа так, чтобы в середине снова осталось пятизначное число — это новое зерно генератора Процесс можно продолжать до тех пор, пока новое зерно C не совпадёт с начальным зерном N 12345 — в этом случае последовательность генерируемых псевдослучайных чисел начнёт повторяться С 152 399 025 Хоть и создаваемые числа выглядят как случайные, у подобного генератора есть существенный недостаток: нам трудно отследить, когда генерируемая последовательность войдёт в цикл повторения, и не можем заранее знать, каков будет период этого повторения — может быть, числа начнут
Псевдослучайные числа повторяться уже на пятом шаге, а может, позже или раньше. Всё зависит от значения начального зерна, но при этом предсказание периода повторений либо затруднительно, либо невозможно. Этот алгоритм достаточно примитивный, но для своего времени являлся неплохим начальным решением. С помощью его анализа мы ещё раз убедились в псевдослучайной природе чисел, генерируемых компьютером. Логика программы Создадим небольшую анимацию «Аквариум». Здесь главным действующим спрайтом будет рыбка. Мы сделаем так, чтобы она перемещалась по области анимации случайным (но на самом деле псевдослучайным) образом, будто она плавает в воде. Нам уже знаком метод позиционирования объектов на экране с помощью координат — им мы и воспользуемся. Для начала удалим из области управления объектами Царапку и добавим новый объект из Библиотеки спрайтов. Нам понадобятся водные обитатели. Для этого в открывшемся окне в строке поиска введем слово Fish (рыба) и выберем спрайт с таким же названием. У этого спрайта несколько костюмов, так что будет из чего выбирать. Оформлением фона займёмся чуть позже. Сейчас главное заставить рыбку плавать. В Scratch программирование происходит интуитивно, поэтому нетрудно догадаться, что для этого понадобится команда Плыть <количество> секунд в точку x: <значение> y: <значение>. Добавим её из группы Движение в область кода. 91
92 РАЗДЕЛ 1. JUNIOR: Основы программирования Мы уже знаем, что первый параметр отвечает только за то, насколько быстро объект «приплывает» в заданную точку, поэтому его можно задать на своё усмотрение (или псевдослучайно). Значения координат указывают, куда «поплывёт» объект на экране. Из построенной нами логики программы следует, что эта точка должна быть выбрана случайным образом. Для этого в группе Операторы существует команда Выдать случайное от <значение> до <значение>. Это не самостоятельная команда (как и все блоки в данной группе), и использовать ее можно только внутри других блоков. Именно поэтому она имеет скругленную форму. Поместим этот оператор в качестве параметра для координат x и y (для каждого поля свой оператор). Теперь нужно задать диапазон, из которого будет выбираться случайное число (но мы не забываем, что оно псевдослучайное). Из предыдущих уроков мы уже успели узнать, что область исполнения в Scratch ограничена по оси x: от –240 до 240, а по оси y: от –180 до 180. Именно такие диапазоны и нужно задать в операторах. Можно покликать на собранную нами команду и убедиться, что рыбка будет плыть в случайно выбранную точку на экране. Теперь нужно подумать: а сколько раз она должна это делать? Настоящие живые рыбы плавают по аквариуму почти всегда. Пусть и наша рыбка будет плавать так же. Для этого поместим собранную команду в бесконечный цикл: добавим в область скриптов команду Повторять всегда из группы Управление, навесив её на созданный скрипт. Также добавим команду запуска по нажатию на зелёный флажок.
Псевдослучайные числа Отлично! Программа готова! Для завершения композиции заменим белый фон на что-нибудь морское. Для этого в области управления объектами нажмем на кнопку Выбрать фон. В открывшемся окне выберем тему Подводный мир. Из доступных фонов довольно симпатично выглядит Underwater 2, его и добавим. Замечательно! Теперь всё готово к запуску. Нажмём на зелёный флажок и будем наблюдать, как плавает наша рыбка. 93
94 РАЗДЕЛ 1. JUNIOR: Основы программирования Что мы теперь знаем и умеем? Мы разобрались со случайными и псевдослучайными числа; ми. Научились работать с новой группой команд Операторы и ге; нерировать псевдослучайные числа. Время вопросов и экспериментов `К какому виду алгоритмов принадлежит составленный нами скрипт? `Где в реальности мы можем встретить псевдослучайные числа? `Какие ещё существуют явления, которые могут быть выражены чисто случайными величинами? `Что будет, если использовать иные диапазоны для генерации псевдослучайных чисел? `Можно ли как-то улучшить анимацию рыбки, сделав её движения чуть более естественными? Задания для прохождения пятого уровня и получения звания «Неслучайный пассажир» 1. Добавь больше рыбок в аквариум. 2. Добавь краба (Crab из библиотеки спрайтов), который будет ползать по дну из стороны в сторону, постоянно меняя свою скорость случайным образом. 3. Добавь весёлого осьминога (Octopus из библиотеки спрайтов), который будет жить в нижнем углу аквариума и в случайные моменты времени менять свой костюм. 4. Сделай так, чтобы костюм осьминога тоже выбирался случайным образом (подсказка: его костюмы пронумерованы). 5. Добавь иглобрюха (Pufferfish из библиотеки спрайтов), который будет появляться на случайное количество секунд в любом месте аквариума и медленно плыть в случайном направлении, меняя костюмы.
Интерактивность и слушатели событий Интерактивность и слушатели событий УРОВЕНЬ 6: «Кодер»1 На этом уровне мы продолжим работать с аквариумом и превратим его из простой анимации в мини-игру. Если ты хочешь сохранить созданную тобой на предыдущем уровне реализацию, создай копию проекта — сохрани его под другим именем. Интерактивность Созерцание плавающих рыбок, конечно, успокаивает, но за этим лучше наблюдать в реальности. Гораздо интереснее было бы поуправлять каким-нибудь объектом на экране. Если программа (или объекты в ней) реагирует на действия пользователя в ходе своего исполнения, то говорят, что в ней реализована интерактивность (от англ. interaction — взаимодействие). В океане, помимо миролюбивых рыбок, обитает большое количество хищников. Одного из таких мы и возьмём под своё управление, а именно опасную зубастую акулу! Добавим её из Библиотеки спрайтов. Она также находится в разделе Подводный мир под именем Shark 2. Важно! Когда мы создаём программу для другого объекта, мы должны следить за тем, чтобы именно он был активирован в области управления объектами. 1 К о дер — так называют человека, который способен создавать программы по написанному заранее техническому заданию. 95
96 РАЗДЕЛ 1. JUNIOR: Основы программирования Логика программы Мы будем управлять движением акулы с помощью клавиш-стрелок на клавиатуре. Соответственно, для каждой из четырёх стрелочек нужно задать своё поведение акулы. При нажатии стрелки вправо она должна поворачиваться вправо и плыть туда, аналогично для стрелки влево — это можно реализовать с помощью команды Идти <количество> шагов. При нажатии стрелок вверх и вниз акула должна перемещаться выше и ниже — это мы сделаем с помощью изменения её положения по оси y. Прежде всего нам нужно понять, каким образом можно обработать нажатие клавиши на клавиатуре. В группе События есть и другие команды для начала исполнения скрипта, одна из которых Когда клавиша <наименование> нажата. Попробуем реализовать интерактивность с помощью неё. Начнём с программирования поведения акулы при нажатии на клавишу стрелка вправо. Для этого в выпадающем списке выберем стрелка вправо.
Интерактивность и слушатели событий Сначала акула должна повернуться направо. Для этого добавим команду Повернуться в направлении <значение> из группы Движение. Значение 90 (направо) оставим по умолчанию. Теперь, когда акула «смотрит» в нужную сторону, она может начинать плыть. Для этого добавим команду Идти 10 шагов из группы Движение. Уже можно протестировать работу данного скрипта. При нажатии на клавиатуре кнопки стрелка вправо акула будет двигаться по экрану направо. Причём для этого не нужно нажимать зелёный флажок — скрипт не зависит от него и исполняется непосредственно при нажатии конкретной клавиши. Аналогичным образом запрограммируем нажатие стрелки влево, разница будет лишь в направлении: –90 (влево). 97
98 РАЗДЕЛ 1. JUNIOR: Основы программирования Кстати! Для этого можно воспользоваться дублированием скрипта. Вот так должен выглядеть следующий скрипт. Важно! При тестировании можно заметить, что акула переворачивается вверх брюхом, — это неверно. Мы помним, что во избежание этой ситуации в настройках спрайта необходимо изменить режим вращения. Теперь зададим движение акулы по вертикали. В этом скрипте уже не будет использоваться команда Повернуть в направлении <значение>, нам достаточно только изменить положение акулы по оси y. Для этого служит команда Изменить y на <значение> из группы Движение. Вспомним, что изменение этой координаты на положительную величину приводит к перемещению объекта вверх. Значит, составим скрипт для обработки нажатия клавиши стрелка вверх. Аналогично запрограммируем движение вниз. В этом случае координату y нужно изменять в отрицательную сторону.
Интерактивность и слушатели событий Теперь можно полноценно протестировать всю функциональность нашего интерактива. И уже наметилась первая проблема: если нажать одновременно две клавиши, например, стрелку вправо и вниз, то по идее акула должна плыть к правому нижнему углу. На деле происходит следующее: Акула плывет только вправо (или только вниз). Это происходит потому, что при нажатии каждой клавиши выполняется свой отдельный скрипт. При нажатии двух клавиш одновременно выполняется тот скрипт, который «отреагировал» раньше. Таким образом, хоть и кажется, что эти скрипты должны выполняться параллельно, на деле компьютер не обрабатывает одновременное нажатие двух клавиш. К тому же акула двигается не сразу, а её движение скорее «рваное», чем плавное. Опять же потому, что при удержании клавиши один и тот же скрипт запускается и завершается много раз подряд. Исправить ситуацию нам помогут слушатели событий. 99
100 РАЗДЕЛ 1. JUNIOR: Основы программирования Это интересно! Для программиста совершенно нормально постоянно тестировать свой код или его отдельные участки для выявления возможных ошибок (багов). Данный процесс называется дебаггинг (от англ. debugging — «отладка») — в ходе него программист или тестировщик (специальный человек и целая профессиональная область) тестируют функциональность проекта, опираясь на то, как должны вести себя объекты. Если замечается баг (а зачастую он бывает не один), тестировщик записывает его в отчёт об ошибках (баг-репорт) и передаёт программисту, который приступает к исправлению — ищет в коде место, порождающее баг, и ликвидирует найденное несовершенство. В современных языках программирования и средах разработки можно часто встретить встроенные «дебаггеры» (отладчики) — специальные программы или расширения, помогающие программисту отлавливать баги в ходе исполнения кода. «Алло, событие? Я тебя слушаю» Слушателем события в программировании называется небольшая функция (подпрограмма), которая подключается для «прослушки» определенного события: нажатия клавиши, наведения курсора, клика мышью и так далее. Когда событие наступает, функция на него «отвечает»: обычно выполняет какое-то определённое действие. Это интересно! Чаще всего слушатели событий применяются при разработке сайтов, чтобы «оживить» на них кнопки, пункты меню, формы, окошки для ввода данных, и не только. Например, если войти в учётную запись на каком-то сайте, для которого важна конфиденциальность (Госуслуги, Электронный дневник или страничку банка), переключиться на другую вкладку браузера и продолжительное время не возвращаться обратно (или просто не посещать), то сайт автоматически нас разлогинит для безопасности — в этой функциональности тоже участвуют слушатели событий. Время допустимого бездействия или отсутствия пользователя для каждого сайта определяется по-разному. Например, банк разлогинит нас уже через 15–30 минут; а социальная сеть или мессенджер — через несколько дней.
Интерактивность и слушатели событий В общем-то, написанные нами скрипты уже являются слушателями событий — они ожидают событие нажатия определенной клавиши и реагируют на него. Однако скрипты этих событий запускаются каждый раз на каждое возникающее нажатие клавиши. Мы должны немного поменять их логику, сделав так, чтобы слушатель всегда работал в пассивном режиме — скрипт запускается с самого начала, но какие-то действия предпринимает только при наступлении определенного события. В нашем случае мы должны «повесить» слушателей событий на четыре кнопки. В этом нам пригодится бесконечный цикл, который будет запускаться по нажатию зелёного флажка и работать параллельно с остальными скриптами. Сделаем заготовку из команды запуска и бесконечного цикла. Чтобы компьютер мог «понимать» одновременное нажатие двух клавиш, ему необходимо в пассивном режиме постоянно проверять, нажата ли каждая из них. Именно поэтому мы и используем бесконечный цикл. Вся остальная часть скрипта должна находиться внутри этого цикла. Но теперь нужно будет заменить команду, проверяющую нажатие клавиши. Для организации каких-либо проверок используется блок Если из группы Управление (в программировании он называется оператором условия). В Scratch существует два оператора условий: Если <условие>, то <тело условия> 101
102 РАЗДЕЛ 1. JUNIOR: Основы программирования Данная команда проверяет условие и в случае его истинности выполняет записанные в теле условия команды. В программировании её называют неполной формой условия. В случае ложности тело условия не выполняется. И Если <условие>, то <тело условия> иначе <альтернативное тело условия> Эта команда проверяет условие, в случае его истинности выполняет записанные в теле условия команды, а в случае его ложности выполняет альтернативные команды, записанные в альтернативном теле условия после слова иначе. В программировании её называют полной формой условия. Теперь соотнесём это с нажатием кнопки на клавиатуре. Для конкретики рассмотрим клавишу стрелка вправо. Если она нажата, то акула должна повернуться направо и начать движение в этом направлении. Если же не нажата, то никаких других действий она предпринимать не должна. Значит, нам будет достаточно неполной формы условия. Приступим. Для начала нам нужно оставить уже заданные команды при нажатии клавиш со стрелочками. Сейчас это четыре скрипта:
Интерактивность и слушатели событий Отсоединим команды движения от начала и удалим последние — для этого их достаточно перетащить влево ко всем командам. Вернёмся к нашей заготовке с бесконечным циклом и добавим в неё команду Если <условие>, то <тело условия>. Теперь мы должны проверить следующее условие: Если клавиша стрелка вправо нажата, то ... Мы видим, что форма поля для условия представляет собой шестиугольник. Команды, которые подойдут для него и будут что-то проверять, находятся в группе Сенсоры. Нам понадобится команда Клавиша <наименование> нажата? Поместим её внутрь оператора условия. 103
104 РАЗДЕЛ 1. JUNIOR: Основы программирования В качестве проверяемой клавиши из выпадающего списка выберем стрелка вправо. Внутрь условия поместим команды, которые соответствуют нажатию этой клавиши. Их мы оставляли рядом.
Интерактивность и слушатели событий Аналогичным образом создадим остальных слушателей событий. Теперь можно запустить всю программу нажатием зелёного флажка. Здорово! Теперь рыбка плавает по экрану, а акула управляется с помощью клавишей-стрелочек, и главное, её движения свободные и плавные! 105
106 РАЗДЕЛ 1. JUNIOR: Основы программирования Слушаем события и управляем скриптами Нам осталось изучить ещё одну концепцию — как с помощью слушателей событий можно организовать взаимодействие разных скриптов. Это позволит нам создать ещё одну мини-игру! Логика программы Доработаем наши программы так, чтобы создать мини-игру «Большие челюсти». Задачей игрока будет съесть рыбку, управляя акулой. Для этого реализуем управление атакой — акула будет смыкать челюсти при нажатии клавиши Пробел. Если при этом рыбка окажется в пасти, то она будет съедена и игра закончится. Начнём с простого — запрограммируем атаку для акулы по нажатию клавиши Пробел. Так как смыкание челюстей — одноразовое действие, нам вполне подойдёт слушатель события Когда клавиша <наименование> нажата из группы События. В качестве проверяемой клавиши по умолчанию оставляем Пробел. Теперь перейдём на вкладку Костюмы у акулы.
Интерактивность и слушатели событий Мы видим, что у этого спрайта три костюма: 1) shark2-a — сомкнутые челюсти; 2) shark2-b — открытая пасть; 3) shark2-c — акула плохо себя чувствует. Для наших целей понадобятся только первые два. При нажатии на клавишу Пробел акула должна сомкнуть челюсти, то есть перейти к костюму Shark2-a. Перетащим команду Изменить костюм на <наименование> из группы Внешний вид и в выпадающем списке выберем нужный нам костюм. После того как акула сомкнула челюсти, она должна их немного подержать закрытыми, а затем снова раскрыть пасть. Значит, понадобится сделать задержку и потом вернуться к костюму shark2-b. Добавим команду Ждать <количество> секунд из группы Управление. Пускай акула держит пасть закрытой в течение одной секунды — параметр не меняем. Далее сменим костюм на Shark2-b. 107
108 РАЗДЕЛ 1. JUNIOR: Основы программирования Протестируем наш скрипт, нажимая клавишу Пробел. Всё получилось! Остаётся при запуске мини-игры сделать так, чтобы пасть у акулы была открыта. Имеет смысл написать для этого ещё один скрипт. Кстати! Если в скрипте будут собраны только те команды, которые объект должен выполнить в начале программы для установки своего начального состояния, то такой скрипт можно называть скриптом инициализации. В нашем скрипте инициализации акулы нужно выполнить только одну команду изменить костюм на Shark2-b. Кастомные события Теперь реализуем то, о чём говорилось выше, а именно: один скрипт будет управлять другим. Это нужно для того, чтобы рыбка «понимала», что её съели.
Интерактивность и слушатели событий В Scratch для этого используется метод отправки специальных системных сообщений, которые не видны пользователю, но на которые реагируют скрипты. 1 Это интересно! По сути, системные сообщения предоставляют метод «кастомизации»1 событий и слушателей для них. Если программисту требуется использовать уже существующую функциональность (в нашем случае это как раз слушатели событий), но со своей логикой работы, он ее «кастомизирует» (от англ. customization — «настройка»), что на сленге программистов означает настройку существующего решения под свои потребности. Такое сообщение будет отправлять акула каждый раз, когда она атакует. Иными словами, она будет генерировать кастомное событие. Для этого служит команда Передать <сообщение> из группы Управление. Добавим её в начало скрипта атаки. По умолчанию сообщение называется «сообщение1», но сделаем его более понятным. Из выпадающего списка выберем Новое сообщение. 1 От английского custom — «изготовленный на заказ», то есть выполненный не по шаблону. 109
110 РАЗДЕЛ 1. JUNIOR: Основы программирования В открывшемся окне введём текст сообщения, например: «Кусь!» и нажмём ОК. Теперь нам нужно создать скрипт, который будет реагировать на это сообщение — то есть кастомный слушатель нашего кастомного события. Съеденной должна оказаться рыбка, значит, и слушатель будет написан для неё. Активируем рыбку в области управления объектами, добавляем команду Когда я получу <сообщение> из группы События и выбираем сообщение Кусь! из выпадающего списка. Как мы описывали в логике программы, рыбка считается съеденной, если в момент атаки она оказалась в пасти акулы. Как же это проверить? Эту задачу можно решить разными способами, но все они будут базироваться на проверке каких-либо условий с использованием команд из группы Сенсоры. Построим нашу логику на базе команды Касается цвета <цвет>?
Интерактивность и слушатели событий Салон красоты для акул Чтобы всё сработало наверняка и акула съедала рыбку именно пастью, а не хвостом или другой частью своего тела, мы должны перекрасить зубы акулы. Перейдем в костюмы акулы. Выберем инструмент Заливка. Чуть выше откроем меню настройки цвета заливки. 111
112 РАЗДЕЛ 1. JUNIOR: Основы программирования Цвет, который мы настроим для зубов акулы, должен быть как можно более уникальным, чтобы не происходило ложного срабатывания слушателя события. Например, в окружающем антураже и в самой рыбке (учитывая все её костюмы) нет красного цвета, значит, можно использовать его. Важно! У цвета есть три параметра с числовыми значениями. Запомним, какие мы использовали (Цвет: 0; Насыщенность: 100; Яркость: 90) — они нам понадобятся чуть позже.
Интерактивность и слушатели событий Теперь осталось кликать на контур зубов акулы, чтобы они перекрасились. Кстати! Такая удобная заливка контура доступна благодаря тому, что акула нарисована в режиме векторной графики. Так мы можем выбирать отдельные элементы (примитивы) для перекрашивания. Перекрасить нужно все зубы у обоих костюмов акулы. Кастомные слушатели событий Вернёмся к нашей рыбке и добавим в слушатель события команду Если <условие>, то <тело условия> из группы Управление. 113
114 РАЗДЕЛ 1. JUNIOR: Основы программирования Из группы Сенсоры возьмём команду Касается цвета <цвет>? и добавим как проверяемое условие. В качестве цвета нам нужно задать цвет зубов акулы. Для этого кликнем в поле с цветом. У настраиваемого цвета есть числовые значения параметров. Самое время вспомнить параметры цвета зубов акулы, которые мы запоминали чуть раньше.
Интерактивность и слушатели событий Кстати! Можно было бы воспользоваться инструментом Пипетка, расположенным внизу окошка. Если кликнуть по нему, курсор мыши изменится на лупу, с помощью которой мы должны указать нужный цвет в области исполнения. Но в нашем случае этот метод не подойдет, так как цвет зубов акулы в области исполнения считывается неоднозначно: ближе к центру линии он ярче, ближе к краю — тусклее. Теперь, когда рыбка получила сообщение и проверила, что она в этот момент была в пасти (касалась красных зубов), значит, увы, её игра окончена. Она должна пропасть с экрана, а все её скрипты должны остановиться. Сначала уберём её с экрана. Для этого добавим команду Спрятаться из группы Внешний вид. После того как рыбка пропала с экрана, нужно остановить все остальные её скрипты. Для этого служит команда Стоп <тип скриптов> из группы Управление. 115
116 РАЗДЕЛ 1. JUNIOR: Основы программирования Нам не нужно останавливать вообще все скрипты. Если рыбка съедена, значит, только её скрипты и должны быть остановлены. При этом сам слушатель события мы написали так, что он не выполняется в пассивном режиме, так что он должен остановить другие скрипты спрайта. Слушатель события готов! Но теперь при запуске программы рыбка должна будет появиться. Для этого добавим команду Показаться из группы Внешний вид в начало скрипта, управляющего её движением по экрану.
Интерактивность и слушатели событий Для нашей игры остаётся немного изменить размеры рыбки и акулы. Для этого можно воспользоваться ручной настройкой в области управления объектами или добавить команды установки размеров в их скрипты инициализации. Чудесно! Нажимаем на зелёный флажок и «Большие челюсти» выходят в свет! Что мы теперь знаем и умеем? Мы поняли, как создавать интерактивные программы на при; мере управления объектами с клавиатуры, а также изучили два способа обработки нажатия клавиши — одноразовый и постоянный. Познакомились с событиями и их слушателями — готовыми ; (системными) и кастомными. Также мы научились отправлять и принимать системные со; общения (генерировать события), с помощью которых один скрипт управляет любыми другими. Познакомились с операторами условия полной и неполной ; форм. Скрипты, использующие операторы условия, являются хоро; шими примерами условных алгоритмов. В итоге создали вторую мини-игру «Большие челюсти». ; Время вопросов и экспериментов `К каким видам алгоритмов принадлежат составленные нами скрипты? 117
118 РАЗДЕЛ 1. JUNIOR: Основы программирования `Каким образом может быть организована интерактивность и где мы её встречаем? `В чём разница между командами Изменить <параметр> на <значение> и Установить <параметр> в <значение>? `Что такое событие и его слушатель? `В каких случаях события и их слушатели необходимо кастомизировать? `Можно ли объединить какие-либо из созданных нами слушателей события в один? `Остались ли в каких-то скриптах команды, которые можно было бы вынести в скрипт инициализации? `Как ещё можно реализовать атаку акулы и соответствующий этому слушатель события? Задания для прохождения шестого уровня и получения звания «Кодер» 1. Сделай так, чтобы при съедании каждой рыбки акула говорила: «ом-ном-ном». 2. Измени скрипт атаки акулы так, чтобы при зажатой клавише Пробел её челюсти оставались сомкнуты до тех пор, пока пользователь не перестанет удерживать клавишу Пробел. 3. Определи, какие из слушателей событий можно объединить в один, и сделай это. 4. Расширь функциональность игры: если акула касается иглобрюха или пытается съесть краба, ей становится плохо, и игра заканчивается. 5. Прояви фантазию: реализуй функциональность для случая, когда акула попытается съесть осьминога. 6. Добавь ещё одного персонажа, медузу (Jellyfish из библиотеки спрайтов). У неё есть несколько костюмов. 1. Стандартный. 2. Испуганный. 3. Раздраженный. 4. Спокойный. Пусть она плавает в море и случайным образом меняет свои состояния. В состояниях 1 и 4 она плавает медленно, её можно касаться и безопасно съесть. В состояниях 2 и 3 она ускоряется, и если её коснуться или попытаться съесть, то акуле станет плохо, и игра закончится.
Переменные Переменные УРОВЕНЬ 7: «Хранитель памяти» На этом уровне мы познакомимся с понятием переменной и узнаем, что она из себя представляет в компьютере. Также мы узнаем, как организована память компьютера. Далее мы освоим применение переменных в Scratch и создадим мини-игру «Летающий бегемотик», в которой увидим, какие возможности они открывают перед нами. Переменные Всем нам этот термин знаком из курса математики. Но что такое переменная по своей сути? На этот вопрос не каждый, даже взрослый, сможет сразу дать ответ. Например, с точки зрения той же математики, это символ (чаще всего буква), обозначающий какую-то неизвестную величину. Вспомним уравнения: x12 15. В этом несложном примере символом x обозначено неизвестное число, которое нужно найти, чтобы решить уравнение. Очевидно, что в данном случае x 3, так как при подстановке мы получим верное равенство: 312 15. Рассмотрим ещё одно уравнение: x2 9. Здесь для x подойдут уже два значения: x 3 и x 3. Действительно: 32 9 и (3)2 9. Можно сделать вывод, что переменная характеризуется некоторым набором значений. Даже само её название происходит от глагола «менять». Ведь так и есть, вместо x в уравнение могут быть подставлены самые разные значения, и они будут меняться в зависимости от самого уравнения и его составляющих. При этом, в зависимости от подставленного значения, меняется и само уравнение, становясь либо верным, либо неверным. Но всё переворачивается с ног на голову, когда речь заходит о переменных в компьютере и, в частности, в программировании. 119
120 РАЗДЕЛ 1. JUNIOR: Основы программирования Дело в том, что для математики, как это ни странно, переменная носит абстрактный характер. Другими словами, то значение, которое мы ставим вместо переменной, может обозначать что угодно: расстояние в километрах, количество людей в комнате, температуру воздуха на улице, даже другое уравнение и так далее. В компьютере же ничего абстрактного нет (ну почти). Любое число — это некоторый набор электрических сигналов, которые, так или иначе, хранятся в его памяти. Проиллюстрируем эти размышления на примере. Пусть у нас есть три ничем не отличающиеся друг от друга коробки. Чтобы не запутаться, подпишем их: одна из них будет предназначена для игрушек, другая для конфет и третья для учебников. Соответственно, в каждую из них мы будем класть предназначенные для неё предметы.
Переменные Если мы попытаемся положить в коробку с надписью «Игрушки» несколько конфет, то это приведёт к путанице, а значит, так делать нельзя. И вот какие выводы мы готовы сделать. 1. Коробка — это своеобразная переменная, то есть место для хранения различных объектов. 2. Надпись на коробке — это имя переменной, так как нам нужно знать, к какому конкретно месту для хранения мы хотим обратиться. 3. Объекты, помещаемые в коробку, — это значения переменной, то есть то, что в ней непосредственно хранится. Причём эти значения должны соответствовать назначению самой переменной. Теперь мы знаем, что переменная в общем случае — это место для хранения значений, которое имеет определённое имя и назначение. В компьютере любые данные хранятся в памяти, а значит, мы можем наконец дать полноценное определение: Переменная (в программировании) — именованная область памяти, предназначенная для хранения определённого значе6 ния. Память компьютера Мы существенно продвинулись в понимании понятия «переменная» с точки зрения программирования. Осталось лишь разобраться с тем, какое значение может храниться в ней. Так как переменная напрямую связана с памятью компьютера, рассмотрим, как эта память организована. 121
122 РАЗДЕЛ 1. JUNIOR: Основы программирования Все данные в компьютере представляются и хранятся в виде чисел, которые составляются только из нулей и единиц. Как уже упоминалось, компьютер — электронное устройство, а значит, он способен «понимать» только два значения (состояния): 0 — нет сигнала (электрического тока/импульса); 1 — есть сигнал. В связи с этим, как бы удивительно это ни выглядело, вся информация — картинки, фотографии, фильмы, музыка, песни, текст, числа — хранится в компьютере в виде последовательности нулей и единиц. Такую информацию ещё называют цифровой, то есть информация кодируется с помощью чисел и превращается в данные. Память компьютера, в свою очередь, разбита на отдельные участки — ячейки памяти, — которые обрабатывает в основном процессор. Если попробовать изобразить эту ячейку, то вот что мы увидим: ϭ Ϭ Ϭ ϭ ϭ ϭ Ϭ ϭ Такая ячейка называется байт, и её длина составляет восемь цифр. Причём каждое «место» в ней называется бит. Ячейка памяти — это один байт данных, состоящий из вось6 ми бит.
Переменные Это интересно! На самом деле только в современной информатике и вычислительной технике принято, что в одном байте хранится восемь бит данных. В истории развития компьютеров и другой вычислительной техники встречались различные реализации и на 6, и на 7, и на 48, и на другое количество бит. Всё дело в том, что байт — минимальная адресуемая единица хранения, то есть если в 8-битной системе какие-то данные занимают, скажем, всего 3 бита, то компьютер «положит» их в 8-битную ячейку и будет считать, что весь байт занят. Чтобы прочитать эти данные из памяти, понадобится, опять же, считывать байт целиком. Для аналогии представь себе шкаф с полками, на которых мы хотим разместить различные предметы: книги, коллекционные фигурки, технику. Если бы мы были компьютерами и приняли, что одна полка — это один байт, то есть минимальная единица хранения, то для каждого объекта мы бы заняли ровно одну полку. Например, если принтер займет всё пространство полки, то никаких проблем не возникнет. А вот если мы поставим одну книгу, пространства полки хватит ещё под 20 таких же книг, то увы, ячейка уже будет считаться занятой. 1 байт 8 бит не является каким-то закрепленным стандартом, просто это самое распространенное решение. Иногда для явного указания, что под одним байтом подразумевается 8-битная ячейка памяти, её называют «октет» (от лат. octet — «восемь»). Итак, какие же значения могут храниться в переменной, если она является одной или несколькими ячейками памяти? Переменная — не слишком сложный объект, так что она позволяет записывать в себя и хранить: 9число (целое или дробное); 9результат арифметического выражения (опять же число); 9символ; 9строку (набор символов); 9логическое значение (истина или ложь); 9результат проверки условия (тоже логическое значение); 9копию значения другой переменной; 9ссылку на другой объект. Важно! В одной переменной (области памяти) может храниться только одно конкретное значение. При попытке записать в неё новое значение старое будет удалено. 123
124 РАЗДЕЛ 1. JUNIOR: Основы программирования Переменные в Scratch В Scratch все переменные создаются и содержатся в одноименной группе команд Переменные. Здесь можно создать как одну переменную, так и целую структуру данных, состоящую из значений, называемую списком. Список довольно сложен для начального знакомства, особенно без знаний о переменных. К тому же он имеет свои особенные приёмы обработки и хранения данных. Поэтому мы его пока трогать не будем. По умолчанию в Scratch уже есть одна тестовая переменная с именем Моя переменная и команды для работы с ней. Поставим галочку в окошке рядом с ней.
Переменные Теперь мы можем видеть переменную в области исполнения и записанное в неё значение. Разберёмся по порядку с тем, какие команды нам доступны для работы с переменными. 1. Овальный объект с именем Моя переменная — это сама переменная, её мы можем использовать для того, чтобы обращаться к той области памяти, где хранится конкретное значение. Галочка слева отвечает за отображение имени переменной и её значения в области исполнения. 2. Задать <имя переменной> значение <значение> — записывает в выбранную переменную конкретное значение, в программировании этот процесс называется присваиванием. Так как переменная — это место в памяти, часто говорят: «присвоить значение переменной…» или «положить значение в переменную…». 3. Изменить <имя переменной> на <значение> — изменяет значение выбранной переменной на заданную величину (прибавляет или вычитает конкретное значение). 4. Показать переменную <имя переменной> — отображает имя и значение выбранной переменной в области исполнения. 5. Скрыть переменную <имя переменной> — скрывает имя и значение выбранной переменной в области исполнения. К тому же, как мы видим в области исполнения, изначально значением переменной является ноль. 125
126 РАЗДЕЛ 1. JUNIOR: Основы программирования Кстати! Если в переменную изначально записано какое-то значение, то говорят, что она инициализирована — это хороший тон в программировании, к тому же он позволяет избегать множества ошибок при работе с переменными. Все создаваемые переменные лучше инициализировать — Scratch это делает автоматически, записывая в них число 0. Летающий бегемотик Проиллюстрируем способы работы с переменными и их значениями на примере создания мини-игры по типу «кликер», целью которой будет не дать упасть бегемотику вниз экрана, держа его в воздухе путем многократного нажатия клавиши на клавиатуре. Для этого у нас есть симпатичный бегемотик с крылышками в Библиотеке спрайтов, в категории Животные под именем Hippo1. Добавим его в проект, предварительно удалив Царапку. Логика программы Мы будем управлять полётом бегемотика с помощью клавиши Пробел — на каждое нажатие этой клавиши бегемот будет взмахивать крылышками и подниматься выше. Когда мы не предпринимаем никаких действий, бегемот будет медленно падать вниз. Если он упадёт, мы проиграем. За положение бегемотика по высоте будет отвечать переменная height (высота). Именно её мы и будем изменять.
Переменные Для начала удалим переменную с именем Моя переменная (чтобы она не мешалась и мы увидели процесс создания новой переменной с нуля). Для этого кликнем по ней правой кнопкой мыши и выберем команду Удалить переменную <имя>. Теперь кликнем на кнопку Создать переменную. В открывшемся окне зададим имя переменной — height. При этом можно выбрать, будет ли эта переменная доступна Для всех спрайтов или Только для этого спрайта. Высота, на которой находится бегемотик, может интересовать пока что только самого бегемотика, поэтому выберем второй вариант. И нажмем ОК. Кстати! Если переменная доступна только в какой-то определенной области, например, только для одного спрайта, то к ней нельзя обратиться из других частей программы. Такую переменную называют локальной. Если же переменная доступна вообще из любой части программы, скрипта, разных объектов, то её называют глобальной. 127
128 РАЗДЕЛ 1. JUNIOR: Основы программирования Так как эта переменная отвечает за положение бегемотика по высоте (то есть по координате y), в начале программы мы должны задать её исходное значение и сделать так, чтобы бегемот считывал высоту своего местонахождения из неё. Добавим команду Когда зелёный флажок нажат из группы События. Далее обнулим переменную height, для этого добавим команду Задать <имя переменной> значение <значение> из группы Переменные. Все параметры оставим по умолчанию — это именно то, что нам нужно. Важно! Обнуление (инициализация) нужно для того, чтобы очистить переменную от других значений, которые могли остаться в ней после предыдущего запуска программы. Теперь сделаем так, чтобы бегемот всегда устанавливал своё положение по высоте в соответствии со значением переменной height. Добавим цикл Повторять всегда из группы Управление.
Переменные Внутрь добавим команду Установить y в <значение> из группы Движение. В качестве устанавливаемого значения нам нужна величина, записанная в переменную height. Выполним привязку переменной к логике скрипта: из группы Переменные перетащим саму переменную в поле этой команды. Отлично! Положение бегемотика по высоте (оси y) всегда будет принимать значение, записанное в переменную height. Чтобы как-то изменять высоту его полёта, теперь нам достаточно просто менять значение в этой переменной. Также мы можем всегда узнать (считать из переменной), на какой высоте (по оси y) находится бегемотик. Сделаем так, чтобы бегемотик постепенно падал. Для этого нужно постоянно уменьшать значение переменной height. Создадим для этого отдельный скрипт, стартующий по нажатию зелёного флажка, и добавим бесконечный цикл. 129
130 РАЗДЕЛ 1. JUNIOR: Основы программирования Внутри нам нужно изменять значение переменной height в отрицательную сторону. Для этого поместим в цикл команду Изменить height на <значение> из группы Переменные и в качестве значения зададим –2. Можно запустить и протестировать работу программы — бегемотик должен постепенно падать вниз. Далее добавим элемент интерактивности. При нажатии на клавишу Пробел бегемотик будет взмахивать крыльями (менять костюм) и подниматься выше, то есть значение переменной height будет изменяться в положительную сторону. Для этого нам понадобится слушатель события в отдельном скрипте. Нам не нужно, чтобы он работал в пассивном режиме, поэтому его начинаем с команды Когда клавиша пробел нажата из группы События. Далее добавляем команду Следующий костюм из группы Внешний вид.
Переменные И команду Изменить height на <значение> из группы Данные. В качестве параметра запишем 10. Теперь программу можно запустить и протестировать. Бегемотик будет медленно падать, а при многократном нажатии клавиши Пробел взлетать вверх. И сразу первый баг! Если достаточно много раз нажать на эту клавишу, то значение переменной height станет превосходящим размеры экрана (напомним, по y он ограничен до 180), и бегемотик зависнет сверху. Ликвидировать эту ошибку можно с помощью условия. Если поставить бегемотика вплотную крылышками к верхней части экрана, то показатель его положения по оси y равен 120. 131
132 РАЗДЕЛ 1. JUNIOR: Основы программирования Тогда в слушателе события каждый раз будем проверять, не превысило ли значение этой переменной 120. Если превысило, то нужно просто ничего не делать. Добавим к нашему скрипту условие Если <условие>, то <тело условия> из группы Управление, причём все команды должны попасть внутрь.
Переменные Далее в качестве условия проверим: Если height < 120. Добавим в ячейку условия соответствующее математическое сравнение из группы Операторы. В качестве первого параметра выступает переменная height из группы Переменные, в качестве второго вводим с клавиатуры определенное ранее число 120. Можно запустить нашу мини-игру и проверить, что теперь бегемотик не улетает за пределы экрана. Осталось понять, каково условие проигрыша, то есть чтоX считать за событие падения бегемотика. Для этого добавим фон, чтобы определить, какое положение бегемотика будет завершать игру. В Библиотеке фонов в категории На открытом воздухе есть, например, фон с именем Boardwalk. 133
134 РАЗДЕЛ 1. JUNIOR: Основы программирования Расположим бегемотика в области исполнения в том положении, которое мы будем считать завершающим игру. В области управления объектами посмотрим на его координаты по оси y. Тогда будем считать, что если бегемот опустился ниже –80 по координате y, то это проигрыш. Значит, в скрипте, отвечающем за «падение», нужно добавить проверку: Если height<–80.
Переменные И если это действительно так, то бегемот скажет, что он упал. После этого нужно остановить все скрипты программы (поскольку игра завершена). Для этого добавим команду Стоп все из группы Управление. 135
136 РАЗДЕЛ 1. JUNIOR: Основы программирования Наша новая мини-игра готова! Взглянем ещё раз на всю программу целиком.
Переменные И не дадим бегемотику упасть! Что мы теперь знаем и умеем? Мы изучили понятие переменной и узнали, чем отличается ; переменная в математике от переменной в программировании. Мы научились работать с новой группой команд Данные, ; а также создавать переменные и использовать их при управлении объектами. Создали мини-игру «Летающий бегемотик». ; Время вопросов и экспериментов `К каким видам алгоритмов можно отнести написанные нами скрипты? `Что такое переменная применительно к программированию? `В каком виде представляется информация в памяти компьютера? `Что такое ячейка памяти и из чего она состоит? `1 байт всегда содержит 8 бит? `Какие значения может хранить переменная? `Остались ли в нашей игре баги, о которых мы не сказали (например, попробуй зажать и удерживать пробел и посмотри на поведение бегемотика)? 137
138 РАЗДЕЛ 1. JUNIOR: Основы программирования Задания для прохождения седьмого уровня и получения звания «Хранитель памяти» 1. Усовершенствуй игру «Большие челюсти» из предыдущего урока — добавь счётчик съеденных рыбок. 2. Создай таймер обратного отсчёта на основе использования переменных, по истечении которого игра будет завершаться, если не все рыбки съедены. 3. Создай условную таблицу рекордов из трёх позиций, куда будет записываться наилучшее время прохождения игры (для этого понадобятся три переменные). Подпрограммы и параметры УРОВЕНЬ 8: «Гибкий, но несгибаемый» Теперь, когда мы изучили переменные, самое время вернуться к подпрограммам. На втором уровне мы уже создавали свой блок, взглянем на него ещё раз: Это обыкновенная процедура. Она не принимает никаких значений, не имеет конечного вычислимого результата и просто выполняет определённые действия. Тогда же мы говорили о том, что и процедуры, и функции могут принимать на входе какие-либо параметры. Ещё мы рисовали домик. Можно заметить, что состоял он по большей части из простых геометрических фигур. Отрисовка похожих фигур (например, прямоугольников) содержала одни и те же команды — отличались только точка начала и длины сторон. Чтобы научиться создавать подпрограммы с параметрами и работать с ними, реализуем блок, который позволит нам удобно отрисовывать простые фигуры.
Подпрограммы и параметры Нарисуй мне квадрат Начнём с простого и напишем процедуру с параметрами, которая будет отрисовывать квадрат. Что нам для этого нужно: 1) выбрать точку, с которой будем начинать чертить квадрат; 2) знать её координаты (x; y); 3) знать длину одной стороны. Логика программы Договоримся, что отрисовку квадрата будем начинать с его левого нижнего угла. Координаты точки начала (x и y) и желаемую длину стороны будем вводить в качестве параметров. Таким образом, наша подпрограмма будет принимать на вход три параметра. При этом она не будет иметь конечного вычисляемого результата, который мы будем использовать где-либо ещё. Создадим новый проект и подготовимся: 9удалим Царапку; 9добавим расширение Перо; 9добавим карандаш; 9изменим его размер до 50%; 9напишем скрипт инициализации. 139
140 РАЗДЕЛ 1. JUNIOR: Основы программирования Перейдём в группу Другие блоки и нажмём кнопку Создать блок. Составим фразу для нашей подпрограммы: Нарисовать квадрат из точки x: <значение> y: <значение> со стороной <значение> Там, где мы использовали <значение>, будут окошки для ввода чисел (то есть входные параметры). Сконструируем наш блок. Для начала запишем фразу «Нарисовать квадрат из точки x:». Далее нужно создать поле для ввода значения. Для этого кликаем по кнопке Добавить значение: число или текст. В наш блок добавится входной параметр.
Подпрограммы и параметры Входной параметр в подпрограмме — это переменная, которая принимает значение, полученное при вызове подпрограммы. Поэтому ей нужно имя. В этот параметр мы будем принимать значение координаты по оси x, следовательно, назовем её x-value (значение x). Далее кликаем по кнопке Добавить подпись и вписываем туда короткую подсказку об ожидании координаты по оси y «y:». По аналогии с первым параметром добавляем второй с именем y-value (значение y). Добавляем ещё одну подпись для длины стороны «со стороной». И соответствующий параметр, назовем его side-value (значение стороны). Кстати! В программировании процесс именования подпрограммы, продумывания её структуры и добавления входных параметров называется «определением» и говорят: «определим функцию/процедуру/подпрограмму». 141
142 РАЗДЕЛ 1. JUNIOR: Основы программирования Отлично! Мы закончили с определением нашей подпрограммы, можно смело добавлять её в проект. Нажимаем кнопку ОК и видим начало нашей подпрограммы в области кода. А вот так выглядит команда её вызова: Заметим, что в команде вызова окошки для параметров пустые — в них мы будем вписывать конкретные значения. При вызове подпрограммы каждое из значений попадёт в назначенную ему переменную: x-value, y-value, side-value. Это интересно! Ранее мы говорили о локальных и глобальных переменных. В случае, когда мы создаем подпрограммы с входными параметрами, сами параметры (переменные) всегда являются локальными и существуют только внутри подпрограммы. Ими можно пользоваться исключительно внутри подпрограммы, они не могут повлиять на «внешний мир». Почему? Вспомним, что компьютер при вызове подпрограммы делает паузу и переходит в подпрограмму. Входные параметры создаются в тот же момент, когда компьютер обратился к подпрограмме, и существуют в памяти ровно до тех пор, пока подпрограмма не завершится. Отсюда следует, что ни другие скрипты, ни глобальная программа вообще ничего не знают об этих переменных. Область подпрограммы для таких переменных называется областью видимости или замыканием. Говорят: «входные параметры находятся только в области видимости подпрограммы»; «входные параметры доступны только в замыкании подпрограммы». В профессиональных языках программирования часто предусмотрены механизмы для управления областями видимости тех или иных переменных и объектов и доступом к ним. Осталось посчитать, как правильно обработать поступившие в подпрограмму данные. Посмотрим на процесс отрисовки наглядно. Для начала отметим все точки, которые должно достигнуть перо.
Подпрограммы и параметры На этот раз мы оперируем неизвестными заранее числами. Точка А будет начальной (так как мы условились рисовать квадрат, начиная с левого нижнего угла). Её координаты содержатся в параметрах x-value и y-value. Реализуем это в подпрограмме: Отрисуем первую сторону квадрата от точки A к точке B. Это будет движение вверх по оси y, то есть в положительную сторону. Значит, чтобы достичь этой точки, мы должны оставить значение x-value таким же, а значение y-value увеличить на число из side-value. 143
144 РАЗДЕЛ 1. JUNIOR: Основы программирования Реализуем этот шаг в подпрограмме. Для выполнения операции сложения выберем соответствующий блок из группы Операторы. Следующим шагом требуется достигнуть точки C, находясь в B. Но наша подпрограмма ничего не знает о новом положении спрайта, она оперирует только входными параметрами. Значит, мы должны посчитать траекторию до точки C так, будто мы находимся в начальной точке A. Чтобы «доплыть» до точки C из точки A мы должны сначала сдвинуться вправо по оси x в положительном направлении, а затем вверх по оси y тоже в положительном — оба раза на величину из side-value.
Подпрограммы и параметры Сразу же добавим это в подпрограмму. Половину преодолели! Движемся дальше от точки C к точке D. Снова, не забывая, что мы делаем это относительно начальной точки. Чтобы попасть из точки A в точку D, нужно «проплыть» вдоль оси x вправо в положительном направлении на величину из side-value, а координату по оси y не изменять. 145
146 РАЗДЕЛ 1. JUNIOR: Основы программирования Реализуем это в подпрограмме. Остаётся вернуться в начальную точку: Чтобы наша подпрограмма была «чистой» (то есть не имела непредсказуемого поведения и не мешала другим командам и подпрограммам), в конец добавим команду Поднять перо.
Подпрограммы и параметры Отлично! Протестируем нашу подпрограмму. Для отладки выберем фон xy-grid из Библиотеки фонов. 147
148 РАЗДЕЛ 1. JUNIOR: Основы программирования На таком фоне наглядно видны некоторые точки, благодаря разделению области на крупные квадраты со стороной 100 пикселей. Нарисуем здесь вот такой квадрат: Его сторона равна 200 пикселей, а левая нижняя точка имеет координаты (100; 100). Составим скрипт с вызовом нашей подпрограммы и внесём в неё эти значения. Всё! Вот она, сила подпрограмм — иногда стоит написать один код чуть сложнее обычного, чтобы потом сильно облегчить себе работу.
Подпрограммы и параметры Запускаем и проверяем! И наслаждаемся успехом — карандаш всё сделал так, как мы и задумывали! Расширяем функциональность подпрограммы Но у нас есть куда расти! На первой картинке мы нарисовали квадрат более толстой линией. У нас же линия достаточно тонкая. Сделаем так, чтобы в вызове нашей подпрограммы можно было ввести ещё и размер пера. Для этого кликнем на определение подпрограммы правой кнопкой мыши и выберем команду Редактировать. Добавляем к нашей подпрограмме подпись «толщиной» и ещё один входной параметр с именем line-size (размер линии). 149
150 РАЗДЕЛ 1. JUNIOR: Основы программирования Нажмём ОК и проверим, что изменения появились в определении. Остаётся использовать новый параметр. Перед началом отрисовки линии добавим команду Установить размер пера <значение> из группы Перо. В качестве значения используем параметр line-size. Чтобы подпрограмма оставалась «чистой», в конце её вернём размер пера к значению по умолчанию — 1 пиксель.
Подпрограммы и параметры Теперь взглянем на скрипт с вызовом нашей подпрограммы. В нём появилось место под значение, которое будет принимать входной параметр line-size. Укажем его равным, например, 5 пикселей. Запустим программу и увидим полученный результат! 151
152 РАЗДЕЛ 1. JUNIOR: Основы программирования Так мы можем улучшать созданные нами подпрограммы. Однако не стоит увлекаться! Чем больше подпрограмма принимает входных параметров, тем менее гибкой для возможного использования она становится. Больше зависимостей = менее универсальный и гибкий код. Чем более гибкий и удобный для использования код способен написать программист, тем более он ценен и востребован в своей профессии! Что мы теперь знаем и умеем? Мы познакомились с входными параметрами подпрограммы и ; научились правильно ими пользоваться. Научились планировать действия, которые должна выполнять ; подпрограмма, и работать с ограниченным количеством величин. Узнали про область видимости и замыкание. ; Написали полноценную и достаточно гибкую подпрограмму ; для отрисовки квадрата любого размера (насколько это позволяет экран) с произвольной шириной линии. Время вопросов и экспериментов `С какой части речи должно начинаться название подпрограммы? `Что такое входной параметр подпрограммы? `В какой области видимости находятся входные параметры одной подпрограммы? `Что означает фраза: «Переменная находится в замыкании функции»? `Можно ли воспользоваться входными параметрами подпрограммы в другой подпрограмме или скрипте? `Какой будет подпрограмма, если у неё будет, например, десять входных параметров? `Имеет ли смысл подпрограмма без входных параметров? `Имеет ли смысл подпрограмма с одним входным параметром? `Что будет, если записать координаты начальной точки, выходящие за пределы экрана?
Подпрограммы и параметры `Как себя поведёт спрайт, если указать слишком большое значение для размера одной стороны квадрата? `Стоит ли добавить комментарии для нашей программы, в каком количестве и степени подробности описания? Задания для прохождения восьмого уровня и получения звания «Гибкий, но несгибаемый» 1. Составь скрипты с вызовом нашей подпрограммы, которые начертят следующие узоры: 153
154 РАЗДЕЛ 1. JUNIOR: Основы программирования
Ввод данных 2. Мы чертили квадрат, двигаясь к каждой точке относительно начальной, заданной координатами во входных параметрах. В группе Движение для каждого спрайта доступны переменные Положение x и Положение y, содержащие соответствующие координаты спрайта на текущий момент (для удобства можно включить их отображение в области исполнения). Измени подпрограмму так, чтобы спрайт двигался от одной точки к другой, используя эти переменные. 3. Измени подпрограмму так, чтобы в неё можно было ввести два значения для величин сторон (вертикальной и горизонтальной). Так она станет более гибкой — можно будет изображать не только квадрат, но и любой прямоугольник. Правильно примени новый входной параметр для отрисовки прямоугольника. 4. Напиши подпрограмму для отрисовки равностороннего треугольника. На вход она должна принимать координаты начальной точки и величину одной стороны. Как будут расположены вершины треугольника, реши самостоятельно. 5. Напиши подпрограмму для отрисовки правильного (равностороннего) многоугольника. На вход она должна принимать координаты начальной точки, величину одной стороны и количество углов. Как будут расположены вершины многоугольника, реши самостоятельно. Подсказка: для вычисления угла поворота спрайта в каждой точке тебе понадобится формула: n2 n · 180, где n — количество углов в правильном много- угольнике. Ввод данных УРОВЕНЬ 9: «Эксперт коммуникации» На этом уровне мы научимся получать данные от пользователя во время работы программы и обрабатывать их. Разберёмся, каким образом организуется запрос ввода с клавиатуры и куда попадают все введённые с клавиатуры значения. Для иллюстрации этого процесса мы напишем программу «Кот учёный», в которой сможем наконец поговорить с нашим главным героем Царапкой. Ввод данных Это новый для нас механизм, который позволит не просто расширить интерактивность и гибкость программ, но и сильнее «сблизить» нас с ними. По сути, мы сможем общаться со спрайтами, 155
156 РАЗДЕЛ 1. JUNIOR: Основы программирования и в зависимости от наших ответов будут выполняться те или иные действия. В Scratch за эту функциональность отвечает команда Спросить <запрос> и ждать из группы Сенсоры. Попробуем сделать так, чтобы Царапка приветствовал нас по имени. Для начала напишем простое приветствие. Далее добавим нашу новую команду Спросить <запрос> и ждать из группы Сенсоры. Текст запроса оставим по умолчанию. Запустим нашу программу и посмотрим, что происходит. После приветствия Царапка спрашивает наше имя, а внизу появляется специальное поле для ввода ответа, и исполнение скрипта ставится на паузу (вспоминаем про breakpoint). Запишем туда имя и нажмём кнопку с галочкой (либо клавишу Enter на клавиатуре).
Ввод данных И что в итоге? Пока мы не видим никаких изменений, Царапка никак не реагирует на то, что мы ввели. А главное: куда делось то, что мы ввели с клавиатуры? Сразу скажем: в никуда — ответ неправильный, таких метаморфоз компьютер сам не предпринимает. Кстати! Шутка или нет, но каждый в жизни хоть раз слышал или сам произносил примерно такую фразу при работе с компьютером: «Это не я, оно само!». Изучив внушительную часть основ программирования, мы уже должны понимать, что ничего в компьютере не может происходить самопроизвольно. Если программа отзывается странным поведением, то к этому могут привести либо действия пользователя, либо ошибка, допущенная программистом при разработке, либо вредоносная программа, работающая в фоновом режиме. На самом деле всё предельно просто! Мы уже знаем, что любые данные хранятся в памяти компьютера, а для взаимодействия с ней используются переменные, и этот случай — не исключение! Откроем группу Сенсоры и найдём используемую нами команду запроса данных. 157
158 РАЗДЕЛ 1. JUNIOR: Основы программирования Под ней есть специальная переменная с именем Ответ. Именно в неё и попадает всё, что мы вводим с клавиатуры в ответ на запрос от спрайта. Поставим рядом с этой переменной галочку для отображения её содержимого в области исполнения. Теперь мы видим, что сейчас в ней действительно хранится введённое нами имя «Виктор». Обработаем содержимое этой переменной. Пусть Царапка ответит нам: «Приятно познакомиться, Виктор!» и «Меня зовут Царапка, ты уже очень круто программируешь!». Понятно, что нам снова понадобятся команды Говорить <фраза> в течение <количество> секунд из группы Внешний вид.
Ввод данных Но теперь разберёмся с той фразой, которую мы хотим вывести на экран. Она состоит из строки (набора символов) «Приятно познакомиться, », значения переменной Ответ и символа «!», то есть мы хотим вывести одновременно три совершенно разных по своему типу значения, а окошко для вывода всего одно. Что же делать? Создать больше окошек! В этом нам поможет команда Объединить <значение> <значение> из группы Операторы. По умолчанию в ней записаны два слова (то есть две строки). Можно кликнуть по команде и увидеть, что её результат — новая строка, содержащая указанные слова. Для нас эта команда превращает одно окошко в два. Нам же понадобятся три: Приятно познакомиться, Виктор ! Добавим эту команду внутрь окошка вывода фразы. 159
160 РАЗДЕЛ 1. JUNIOR: Основы программирования В одно из её окошек добавим ещё одну такую же команду. Теперь окошек вполне хватает. 1. В первое окошко с клавиатуры запишем фразу «Приятно познакомиться, » (обязательно с пробелом в конце, чтобы отделить имя). 2. Во второе помещаем переменную Ответ. 3. В третье вводим с клавиатуры символ «!». И добавляем вывод второй фразы.
Ввод данных Теперь запустим нашу программу, введём имя и увидим реакцию Царапки! Дважды два — четыре! Организуем мини-квиз с помощью нового инструмента. Команды продолжим «цеплять» к основному скрипту. Логика программы После приветствия и запроса имени Царапка предложит нам ответить на вечный математический вопрос: «Сколько будет 2*2?». В зависимости от нашего ответа он скажет: «Правильно!» или «Неправильно!», Добавим ещё одну команду Спросить <запрос> и ждать из группы Сенсоры. В качестве запроса введём: «Сколько будет 2*2?». 161
162 РАЗДЕЛ 1. JUNIOR: Основы программирования Далее мы получим ответ и должны проверить его правильность, то есть применить полную форму условия, так как нам понадобится обрабатывать и правильный, и неправильный варианты. Добавим команду Если <условие>, то <тело условия>, иначе <альтернативное тело условия> из группы Управление. В качестве условия нужно проверить следующее: Если ответ 4. Соберём это выражение из оператора сравнения <значение> <значение>, переменной Ответ и числа 4. В случае истинности условия мы выведем сообщение «Правильно!». Для этого в теле условия добавим команду Говорить <фраза> в течение 2 секунд и в качестве сообщения запишем: «Правильно!».
Ввод данных В случае неправильного ответа (то есть ложности проверенного условия) мы выведем сообщение: «Неправильно!». Добавим аналогичную команду в альтернативном теле условия и запишем это сообщение. Можно запустить и протестировать нашу программу. Всё работает корректно и так, как мы задумали. Кстати! Можно заметить, что на протяжении всего нашего обучения мы периодически запускаем фрагменты скриптов, чтобы увидеть, на правильном ли мы пути. Это называется промежуточным тестированием. 163
164 РАЗДЕЛ 1. JUNIOR: Основы программирования А давай ты мне скажешь числа, а я их перемножу! Дадим Царапке возможность продемонстрировать его математические способности. Команды так же продолжим «цеплять» к основному скрипту. Логика программы Царапка предложит оценить его способность к перемножению чисел «в уме», запросит их, подумает и сообщит результат. Для этого нам понадобятся сторонние переменные, так как одновременно два различных значения в переменной Ответ храниться не могут. После условия добавим очередную команду Говорить <фраза> в течение 2 секунд и для вывода запишем сообщение: «Посмотри, как я умею перемножать числа в уме!» Далее Царапка запросит одно число. Добавим команду Спросить <запрос> и ждать из группы Сенсоры. В качестве запроса выведем: «Введи первое число!». После ввода с клавиатуры такое число попадёт в переменную Ответ. Так как далее мы сразу будем запрашивать второе число, нам понадобится отдельная переменная для сохранения первого ответа. Зайдём в группу Переменные. Помним, что по умолчанию там уже есть переменная с именем Моя переменная. Удалим её и нажмём кнопку Создать переменную.
Ввод данных В открывшемся окне дадим название этой переменной, например, a (помним, что лучше привыкать пользоваться латиницей). Числа, которыми будет оперировать Царапка, другим спрайтам не нужны, так что переменную можно сделать локальной. И нажмём ОК. В эту переменную мы должны записать значение переменной Ответ. Для этого добавим команду Задать <a> значение <значение> из группы Переменные. В качестве значения поместим переменную Ответ из группы Сенсоры. 165
166 РАЗДЕЛ 1. JUNIOR: Основы программирования Отлично! Теперь мы готовы запросить второе число. Добавим ещё одну команду Спросить <запрос> и ждать из группы Сенсоры. Сообщение будет следующим: «Введи второе число!». Введённое число снова попадёт в переменную Ответ, и в принципе мы уже можем начать обработку. Но для порядка создадим ещё одну переменную с именем b и присвоим ей значение Ответа. В итоге получится следующий фрагмент скрипта: Кстати! Совершенно необязательно было создавать переменную b, потому что после второго ответа нужное нам число лежит в переменной Ответ, и пока никакое другое значение не претендует на это место. Однако с двумя переменными код выглядит более понятным: мы запрашиваем два числа, a и b, и находим их произведение.
Ввод данных Помни, каждая переменная — область памяти компьютера, а значит, чем больше создано переменных, тем больше расход (небесконечной) памяти. В таких ситуациях стоит выбирать, чем можно пожертвовать… Но лучше не жертвовать ничем и продумывать структуру программ так, чтобы она оставалась и хорошо оптимизированной (грамотно расходовала память и время), и доступной для чтения. Теперь сымитируем размышления Царапки. Пускай он скажет: «Перемножаю…» в течение случайного количества секунд от 1 до 3. И сообщит результат в формате: Произведение <a> и <b> равно <значение>. Сколько нам понадобится окошек для вывода? 1) строка «Произведение »; 2) значение переменной a; 3) строка « и »; 4) значение переменной b; 5) строка « равно »; 6) вычисленное значение произведения. Итого шесть окошек! Начнём по порядку. Добавим команду Говорить <фраза> в течение <количество> секунд и увеличим количество полей до шести с помощью нескольких команд Объединить <значение> <значение> из группы Операторы. 167
168 РАЗДЕЛ 1. JUNIOR: Основы программирования Теперь начинаем последовательно добавлять все компоненты фразы. В первое окно вводим с клавиатуры фразу: «Произведение ». В следующее помещаем переменную a из группы Переменные. Далее снова вводим с клавиатуры строку: « и » (не забываем о пробелах). Затем помещаем вторую переменную b из группы Переменные. В следующее окошко записываем строку « равно » (и снова помним о пробелах). В последнем окошке мы должны вывести результат арифметического выражения a * b. Поместим туда соответствующую команду <значение> * <значение> из группы Операторы.
Ввод данных В качестве перемножаемых значений выступят переменные a и b. Это интересно! Хороший программист владеет различными терминами, в том числе математическими. Когда мы записываем выражение «a * b», в нём присутствуют целых четыре термина: 1) выражение — сама запись целиком; в программировании, по сути, любая строчка кода является выражением; 2) оператор — элемент, обозначающий какую-либо операцию; в нашем случае это значок «*», обозначающий умножение; 3) операция — действие, которое выполняет оператор (сложение, вычитание, умножение, деление, присваивание, вывод данных и так далее); 4) операнд — элемент, участвующий в операции; в нашем случае мы имеем два операнда: переменные a и b. Если в операции участвуют два операнда (например, в сложении или умножении), то её называют бинарной. Если только один, то такую операцию называют унарной (например, унарный минус, стоящий перед числом и делающий его отрицательным: 7). Прочитаем запись «a * b» с использованием изученных терминов: «в выражении "a * b" оператор "*" выполняет операцию умножения над операндами a и b». Готово! Теперь можно запустить программу и пообщаться с Царапкой! 169
170 РАЗДЕЛ 1. JUNIOR: Основы программирования Царапка подаёт голос В завершение добавим в наш скрипт возможность услышать, как Царапка мяукает. Новые команды также «цепляем» к основному скрипту.
Ввод данных Логика программы Царапка спросит: «Хочешь услышать мой голос?». Если пользователь введёт положительный ответ, то Царапка издаст звук, а если отрицательный, то просто попрощается. Добавим к нашему скрипту ещё одну команду Спросить <запрос> и ждать из группы Сенсоры. В запросе укажем: «Хочешь услышать мой голос?». Предположим, что положительным ответом будет строка «да», а отрицательным «нет». Значит, после ввода мы должны проверить условие: Если ответ да. В случае истинности Царапка издаст звук «мяу», в случае ложности — попрощается. Добавим полное условие из группы Управление. Создаём проверку с помощью команды <значение> <значение> группы Операторы, переменной Ответ и строки «да». 171
172 РАЗДЕЛ 1. JUNIOR: Основы программирования Кстати! Scratch не чувствителен к регистру (строчным или прописным буквам). Это означает, что условие будет истинным во всех случаях: «да», «Да», «ДА», «дА». В случае истинности воспроизводим звук. Для этого добавим команду Играть звук <наименование> до конца из ещё нетронутой нами ранее группы Звук. По умолчанию здесь указан звук Мяу, именно он нам и нужен. Что это за звук, можно всегда узнать на вкладке Звуки, расположенной рядом с Костюмами. В случае ложности условия выведем фразу: «Жду тебя снова в мире программирования!».
Ввод данных Теперь Царапка общается с нами не только с помощью текста, но и звука! «Да», «ага», «угу» или как ещё можно выразить согласие Мы договорились, что положительным ответом на последний вопрос Царапки будем считать строку «да». Но пользователь об этом не знает, и вообще его взаимодействие с программой может оказаться непредсказуемым. Наша задача как программистов — свести к минимуму возможные неправильные случаи обработки данных, полученных от пользователя. Начнём с простого и предположим, что положительным ответом будут строки «да» или «ага». Сейчас наше условие простое, так как содержит всего одну проверку. Сделаем его сложным, проверив буквально: «ответ ответ ага». да ИЛИ 173
174 РАЗДЕЛ 1. JUNIOR: Основы программирования Такое условие состоит из двух: «ответ да» и «ответ между которыми стоит логическая операция ИЛИ. ага», Это интересно! Всего существует три базовых логических операции: 1) логическое ИЛИ (дизъюнкция) — истинно тогда, когда истинно хотя бы одно из проверяемых условий; 2) логическое И (конъюнкция) — истинно тогда, когда истинны все проверяемые условия; 3) логическое НЕ (инверсия) — превращает истинное выражение в ложное, и наоборот. Все они представлены в Scratch в группе команд Операторы. Возьмём команду <выражение> или <выражение> из группы Операторы. В качестве первого выражения перетащим нашу проверку из условия. Второе выражение соберём аналогично (можно воспользоваться дублированием). Поместим сложное условие обратно в скрипт.
Ввод данных Можно запустить программу и проверить, что теперь Царапка понимает оба ответа и подает голос в обоих случаях. Но дальше — больше. Какими еще могут быть варианты ответа? «Угу», «давай», «хорошо»… Эту цепочку можно продолжать бесконечно и учесть все варианты невозможно… Но мы постараемся! Самым простым решением будет сборка монструозной конструкции: Но лучше так не делать ষ Как же тогда поступить? Список ответов Здесь нам и пригодятся списки, о которых мы упомянули вскользь, изучая переменные. Подробно со списками и особенностями работы с ними ты можешь познакомиться самостоятельно или повысив свой ранг с помощью нашего второго учебного пособия «Scratch. Прокачиваем навыки программирования». Сейчас возьмём минимум для понимания и разрешения нашей ситуации. Если говорить просто, список — это набор значений. В список можно поместить любые данные, но обычно программисты делают так, чтобы эти данные были однородны (список чисел, список строк, список списков и так далее) — так их намного проще подвергать обработке. Со списком можно производить ряд специфических действий. Одно из таких: проверка наличия в списке определенного значения. Это как раз то, что нам нужно. Вот что мы сделаем: 1) создадим список для записи вариантов положительного ответа; 2) наполним список различными вариантами (это будут строки); 3) в условии проверки ответа пользователя воспользуемся функциональностью списка. Первым делом перейдём в группу Переменные и нажмём кнопку Создать список. 175
176 РАЗДЕЛ 1. JUNIOR: Основы программирования В открывшемся окне увидим знакомый функционал. Создание списка ничем не отличается от создания переменной. Можно даже грубо сказать, что список — более сложная переменная. Назовём его positiveAnswers (положительные ответы) и нажмём ОК.
Ввод данных Это интересно! Для именования списка мы воспользовались стилем, который называется lowerCamelCase (нижний верблюжий регистр). Он получил своё название благодаря тому, что записанное таким образом имя объекта напоминает горбы верблюда. Приставка «lower» означает, что каждое слово имени будет написано в верблюжьем регистре, кроме первого. Соответственно, существует также и CamelCase, отличающийся тем, что каждое слово пишут с прописной буквы. Помимо этого, у программистов принят kebab-case (кебабный регистр), получивший своё название благодаря сходству с вертелом для кебаба (по-русски шаурмы или по-питерски шавермы). Каждое слово в этом стиле отделяется от другого с помощью дефиса. Ещё популярен snake_case (змеиный регистр), в котором слова разделяются знаком нижнего подчёркивания. С чем связана такая боязнь пробелов? Всё просто — языки программирования не поддерживают их для имён переменных, так как пробел служит в качестве разделителя. Если поставить пробел в имени переменной, то это приведет к ошибке и невозможности запуска программы. Scratch такие «грехи» прощает, но лучше сразу учиться правильно. Тут же у нас появляется большой набор возможностей для работы с этим списком. У самого объекта списка стоит галочка, и он отображается в области исполнения (пока что список пуст). 177
178 РАЗДЕЛ 1. JUNIOR: Основы программирования Мы договорились, что в списке будем хранить всевозможные положительные ответы. Для этого его надо заполнить, и в этот раз сделаем это вручную. Для начала заполнения достаточно кликнуть на значок «+» внизу списка. В него сразу добавится новое пустое значение. Мы наполняем наш список строками. Введём в качестве значения первую строку «да».
Ввод данных По аналогии добавим в список и другие возможные положительные ответы. Кстати! Для программного добавления элементов в конец списка служит команда Добавить <значение> к <список> из группы Переменные. Всё готово. Вернёмся к условию проверки ответа в основном скрипте и уберём оттуда нашу проверку. 179
180 РАЗДЕЛ 1. JUNIOR: Основы программирования Вместо неё добавим команду <positiveAnswers> содержит <значение>? из группы Переменные. В качестве проверяемого значения мы должны указать переменную Ответ. Буквально такая проверка будет значить: содержится ли то, что ответил пользователь, в списке положительных ответов? Для красоты отображение списка в области исполнения можно отключить. Вот и всё! Теперь Царапка лучше понимает ответы пользователя. Что мы теперь знаем и умеем? Мы изучили, каким образом осуществляется ввод данных. ; Узнали, где сохраняются значения, вводимые с клавиатуры в ; ответ на их запрос.
Ввод данных Познакомились со способом хранения и обработки нескольких ; значений, вводимых с клавиатуры поочерёдно. Поняли, что для вывода данных разного типа нужно исполь; зовать различные поля (окошки). Немного поработали со звуком и списком. ; Создали интеллектуальную программу «Кот учёный», благода; ря которой смогли пообщаться с Царапкой. Время вопросов и экспериментов `В какую переменную попадают данные, введённые с клавиатуры? `Что происходит с содержимым этой переменной, когда туда попадает новое значение, введённое с клавиатуры? `Какое имя окажется в переменной Ответ, если два раза подряд выполнить запрос ввода и ответить на первый: «Виктор», а на второй: «Евгения»? `Как сохранить несколько значений, которые последовательно вводятся с клавиатуры? `В каких случаях требуется увеличивать количество окошек для вывода информации на экран? `С помощью какой команды можно это сделать? `Какие участки кода стоит прокомментировать? `Что будет, если в ответ на вопрос Царапки «Сколько будет 2*2?» ввести строку «четыре»? `С помощью какой структуры можно создать хранилище для проверки ответов пользователя? `Какие участки кода можно сделать более гибкими и универсальными? Задания для прохождения девятого уровня и получения звания «Эксперт коммуникации» 1. Вынеси отдельные части скрипта в подпрограммы. A. Приветствие. B. Вопрос про «2*2?» и обработку ответа. C. Запрос и суммирование двух чисел. D. Запрос и обработку момента с голосом Царапки. В основном скрипте должны будут остаться только вызовы подпрограмм. 181
182 РАЗДЕЛ 1. JUNIOR: Основы программирования 2. Расширь функциональность подпрограммы B: пусть два числа в примере генерируются случайным образом. Не забудь изменить логику проверки ответа — правильное значение теперь будет каждый раз разным, и его нужно дополнительно посчитать (подсказка: для этого сгенерируй случайные числа и сохрани их в отдельные переменные, а затем воспользуйся ими для формирования примера и проверки). 3. Расширь функциональность подпрограммы C: пусть Царапка спрашивает, какое действие с числами мы хотим совершить: «+», «–», «*», «/» (сложение, вычитание, умножение или деление), и в зависимости от ответа выводит на экран соответствующий результат. 4. Создай проект «Угадай-ка!», в котором Царапка будет загадывать случайное число, а пользователь будет пытаться его отгадать. При неправильном ответе Царапка должен подсказывать, каково загаданное число — больше или меньше ответа. Процесс будет продолжаться, пока пользователь не отгадает число. 5. Усовершенствуй программу «Угадай-ка!» — добавь ограничение по количеству попыток для отгадки и дополнительно сообщай пользователю, сколько попыток у него осталось. Если попытки кончились, а пользователь так и не отгадал, Царапка должен сообщить, какое число было загадано, и предложить попробовать снова. При положительном ответе программа должна начаться заново с новым загаданным числом; при отрицательном Царапка попрощается. Псевдокод УРОВЕНЬ 10: «Junior=программист» На финальном уровне в качестве итоговой работы мы создадим самый настоящий Математический тренажёр, призванный улучшить умения устного счёта и тем самым систематизируем знания, полученные в данном разделе. Мы не будем пошагово рассматривать, как создать такую программу. Ты уже готов к своему первому самостоятельному проекту! Чтобы тебе помочь, разберёмся в логике построения такой программы и составим для неё план, написанный с использованием псевдокода — языка (чаще всего естественного), следующего общим правилам составления программ, но игнорирующего специфический для каждого языка программирования синтаксис.
Псевдокод Сам тренажёр ты напишешь собственноручно. Для проверки в Приложении к учебному пособию приведён готовый скрипт для этой программы. Однако настоятельно рекомендуем попробовать всё сделать своими руками (и мозгами), ведь мы уже столькому научились! Свериться с ответом можно или когда всё получится, или в самом крайнем «тупиковом» случае. Почувствуем себя настоящими программистами, для которых заказчик формирует техническое задание. Оно будет состоять из следующих пунктов. 1. Постановка задачи — какую программу мы хотим получить и какова её функциональность. 2. Исходные данные — какие переменные и для чего нам понадобятся. 3. Псевдокод — описание логики действий, выполняемых в программе. Постановка задачи Необходимо написать математический тренажёр, в котором будут генерироваться десять случайных примеров на сложение двух чисел. Пользователь должен вводить ответ на каждый новый пример. После чего его личный результат по количеству правильных ответов будет выводиться согласно следующей шкале: 1) от 0 до 2: «Плоховато, попробуй ещё раз!»; 2) от 3 до 5: «Нормально, но ты можешь и лучше!»; 3) от 6 до 8: «Хорошо! Ты молодец!»; 4) от 9 до 10: «Отлично! Ты великий математик!». Исходные данные Нам понадобятся следующие переменные: a — в ней будет генерироваться первое слагаемое случайным образом; b — в ней будет генерироваться второе слагаемое случайным образом; sum (сумма) — здесь будет подсчитываться правильная сумма a + b, служащая для проверки ответа пользователя; Ответ — стандартная переменная, в которой будет храниться ответ пользователя на каждый предлагаемый пример; count (счёт) — эта переменная будет считать количество правильных ответов, которые ввёл пользователь. 183
184 РАЗДЕЛ 1. JUNIOR: Основы программирования Псевдокод Теперь напишем псевдокод с использованием естественного языка для нашей программы и снабдим каждую строку дополнительными комментариями. Отступы слева говорят о том, что этот блок кода должен содержаться внутри какой-либо алгоритмической конструкции (цикла или условия). Псевдокод Комментарии Начало Любой скрипт должен начинаться по какому6то событию, например, при нажатии зелёного флажка count = 0 Обнуление количества правильных ответов (инициализируем пере6 менную count) Повторить 10 раз: Цикл, повторяющийся 10 раз, так как нужно сгенерировать 10 раз6 личных примеров, 10 раз запро6 сить ответ и проверить его пра6 вильность a = Случайное от 1 до 10 Генерация случайного числа от 1 до 10 и присваивание его пере6 менной a b = Случайное от 1 до 10 Генерация случайного числа от 1 до 10 и присваивание его пере6 менной b Спросить «a, ̵+̵, b, ̵=?̵» и ждать Вывод на экран примера, состо6 ящего из четырёх различных по своему типу значений, и ожидание ввода ответа пользователем sum = a + b Подсчёт суммы a + b и присваи6 вание результата переменной sum Если sum = Ответ, то: Проверка совпадения правильной суммы и ответа пользователя count + 1 При истинности условия увеличе6 ние значения переменной count на единицу Если count < 3, то: Проверка количества правильных ответов после завершения цикла. Здесь осуществляется проверка попадания в диапазон от 0 до 2 «Плоховато, попробуй ещё раз!» При истинности условия вывод на экран соответствующей строки
Псевдокод Окончание табл. Псевдокод Иначе: При ложности условия… Если count < 6, то: «Нормально, но ты можешь и лучше!» Иначе: Если count < 9, то: «Хорошо! Ты молодец!» Иначе: «Отлично! Ты великий математик!» Конец Комментарии …проверка попадания в диапазон от 3 до 5 При истинности условия вывод на экран соответствующей строки При ложности условия… …проверка попадания в диапазон от 6 до 8 При истинности условия вывод на экран соответствующей строки При ложности условия… …вывод на экран соответствую6 щей строки, так как последняя проверка не требуется — остался единственный вариант Конец скрипта Что мы теперь знаем и умеем? Мы познакомились со структурой технического задания и по; чувствовали себя в роли настоящих программистов. Узнали, что такое псевдокод и научились создавать програм; му, ориентируясь на него. Обобщили и систематизировали все знания, полученные нами ; в этом разделе. Осталось выполнить задания, и мы сможем смело примерять ; звание junior-программиста! Время вопросов и экспериментов `Какие составляющие могут быть в техническом задании для программиста? `Какие разделы можно ещё добавить в техническое задание? `Что должен содержать раздел «Постановка задачи»? `Что должен содержать раздел «Исходные данные»? `Может ли программист обсуждать и задавать вопросы заказчику по техническому заданию? 185
186 РАЗДЕЛ 1. JUNIOR: Основы программирования `Может ли программист вносить свои предложения по техническому заданию? `Может ли программист вводить функциональности, не содержащиеся в техническом задании, но, по его скромному мнению, улучшающие конечный продукт, без обсуждения с заказчиком? `Для чего нужен псевдокод? `Всегда ли стоит прибегать к использованию псевдокода? `Какие переменные нужно спрятать, а какие можно оставить для отображения на экране? Задания для прохождения десятого уровня и получения ранга Junior=программист 1. Усложни тренажёр, увеличив диапазон случайных чисел для генерации слагаемых. В конце дополнительно оцени скорость счёта пользователя по времени его работы с тренажёром (в этом помогут команды для работы с таймером из группы Сенсоры). 2. Доработай программу: сделай так, чтобы Царапка спрашивал, хочет ли пользователь попробовать заново в тех случаях, когда он не набрал максимальное количество очков, и запускал тренажёр заново в случае положительного ответа. 3. Расширь функциональность программы: пусть она станет более приветливой, спрашивает имя и предлагает выбрать, какой навык мы будем тренировать: сложение чисел, умножение, вычитание или деление, и в зависимости от выбора пользователя начнёт генерировать соответствующие примеры. 4. Создай проект «Викторина», в котором Царапка (или любой другой персонаж) будет задавать пользователю вопросы на определенную тему. Воспользуйся расширением Текст в речь, чтобы вопросы озвучивались. Сформируй хранилище правильных ответов (с помощью списка). За каждый правильный ответ пользователь будет получать одно очко. Разработай систему званий для пользователя в зависимости от количества набранных очков. 5. Усовершенствуй проект «Викторина»: пусть пользователь в начале выбирает одну из четырёх тем для вопросов. Сами вопросы распредели по уровню сложности: лёгкие, средние, трудные. За правильный ответ на лёгкий вопрос пользователь получает 1 очко; на средний — 2 очка; на трудный — 3 очка; за неправильный ответ на лёгкий вопрос ничего не теряет; на средний теряет 1 очко; на трудный теряет 2 очка. Дополни систему званий при необходимости.
РАЗДЕЛ 2. JUNIOR+: Создание игр Во второй части нашего путешествия мы создадим действительно серьёзные игры, которые имели бешеную популярность в своё время и остаются интересны по сей день, вдохновляя всё больше людей вступать на тропу геймдева1. Ты сможешь добавить их в своё портфолио и получить переходный ранг junior. Вот какие игры нам предстоит реализовать: ™Arkanoid — легендарная игра, давшая название целому жанру игр-арканоидов. Сегодня её реализация, на первый взгляд, довольно проста, поэтому она хороша как первый шаг в мир разработки! ™Змейка — игра, которая была популярна у наших родителей и в которую продолжают активно играть новые поколения, устанавливая всё новые и новые рекорды по длине главного игрового персонажа — змеи! ™Pong — самая первая массовая игра, предназначенная как для игры вдвоём, так и против компьютера. Создавая её, мы узнаем, как научить компьютер «видеть» объекты, анализировать события и принимать решения, подобно человеку! Для каждой из игр мы: 9изучим её историю; 9обсудим игровые объекты и будущую функциональность (пре-альфа-версия); 9реализуем альфа-версию; 9произведём доработку до бета-версии; 9предложим реализовать идеи расширения функциональности игры для релиза. Стадии разработки программного продукта Программный продукт (приложение, игра, операционная система и так далее) проходит несколько стадий разработки: 1 Ге ймд е в (от англ. game development — разработка игр) — IT6сфера разра6 ботки игровых решений для ПК, игровых консолей, мобильных платформ.
188 РАЗДЕЛ 2. Junior+: Создание игр y планирование — зарождение идеи, теоретическое описание функциональности, набор команды разработки, резервирование названия для продукта; y пре-альфа-версия — начальная стадия (прототип), в ходе которой команда разработки (программисты, дизайнеры, художники, продюсеры, инвесторы и другие люди) реализует программный продукт с нуля до альфа-версии; y альфа-версия — стадия, на которой программный продукт готов к внутреннему тестированию; обычно альфа-версию продукта отдают специалистам по тестированию (тестировщикам), задача которых опробовать функциональность продукта, отыскать баги и другие несовершенства; y бета-версия — на этой стадии программный продукт имеет основную реализованную функциональность и готов к общественному тестированию; для бета-теста приглашаются либо все желающие (открытое тестирование), либо ограниченный круг лиц (закрытое тестирование); y предварительная версия — стадия, на которой программный продукт прошёл множество циклов тестирования, получил исправления критических ошибок, вполне стабилен, но всё ещё существует возможность отлова ошибок; y релиз — завершающая стадия, на которой продукт получает статус стабильной версии и «выходит в свет»; при этом программный продукт может распространяться на коммерческой основе (за деньги) или находиться в свободном доступе (бесплатно). Помимо этого, программный продукт обычно получает поддержку (она может длиться разное время). Команда поддержки собирает отзывы пользователей, сообщения об ошибках (баг-репорты), помогает им в решении проблем, выпускает пакеты исправлений (патчи) и занимается обновлением функциональности, дизайна и других составляющих. Если продукт устарел технологически или оказался невостребованным, его производитель может заявить о прекращении поддержки. Продукт остаётся существовать, но уже не получает никаких исправлений, обновлений, а обратиться по нему с вопросами остаётся только к сети Интернет.
Arkanoid Это интересно! Программные продукты могут разрабатываться большими и малыми коммерческими компаниями или независимыми разработчиками (одним или несколькими) без финансовой поддержки какой-либо крупной или малой компании. В последнее время вторая область всё чаще возникает в новостях игрового мира. Порою талантливый программист, свободный в своём творчестве от корпоративных правил, способен создать самобытный и уникальный в своём роде продукт. Такие программные продукты вынесли в отдельный жанр инди1. Так что мы станем своего рода инди-разработчиками. Кто знает, может, именно твоя игра в будущем пополнит аллею славы геймдева?.. 1 Ну что ж, вперёд! Навстречу мечте о создании собственных по-настоящему востребованных и увлекательных игр! Arkanoid История игры Arkanoid Эта знаменитая видеоигра была создана в 1986 году японской компанией Taito. В ней игроку предлагалось взять управление платформой-ракеткой, расположенной в нижней части экрана. Также на игровом поле присутствовали разноцветные блоки и летающий шарик. Цель игры: разбить все блоки, не дав шарику упасть вниз. У ракетки есть несколько «жизней», определяющих количество допустимых падений мячика до окончательного проигрыша. Также в игре присутствуют различные бонусы (положительные и отрицательные), которые выпадают из блоков. Они могут увеличивать или уменьшать размер ракетки, размножать мячик, добавлять к ракетке лазер для стрельбы по блокам, добавлять и отнимать запасные «жизни» и многое другое. Сами блоки тоже бывают разными — самые простые разрушаются после первого попадания в них мячика, но есть и те, что покрепче, — они требуют нескольких попаданий. 1 Приставка «инди6» появилась от английского слова independent — независи6 мый. 189
190 РАЗДЕЛ 2. Junior+: Создание игр Это интересно! Игра Arkanoid была создана на основе уже существующей игры Breakout (1976 г.) японской компании Atari. Причём изначально и Breakout, и Arkanoid были игровыми автоматами. Однако именно название Arkanoid стало нарицательным для целого семейства подобных игр. Такие игры сегодня выделяют в отдельный жанр арканоидов. Планирование В игре присутствуют три главных взаимодействующих объекта: 1) платформа-ракетка; 2) шарик; 3) блок (и его копии). Объект: платформа-ракетка Подвижный объект, представляющий из себя, по сути, любой прямоугольник, расположенный в нижней части экрана горизонтально. Управляется пользователем, двигаясь влево и вправо в пределах границ экрана. Спрайт: Paddle.
Arkanoid Функциональность q В начале игры располагается посередине экрана в нижней части. q После начала игры управление передаётся игроку. q Движение платформы влево и вправо обеспечивается нажатием клавиш-стрелок на клавиатуре и происходит в пределах экрана от –200 до 200 по оси x. q При попадании шарика в платформу тот отскакивает от ракетки под физически правильным углом. q Отскок обеспечивается аналогом кастомного события, расположенным в шарике. Объект: шарик Подвижный объект, представляющий из себя, по сути, круг. Управляется программой, летает по игровой области, взаимодействует с блоками, краями игровой области и платформойракеткой. Спрайт: Ball. Функциональность q В начале игры располагается над платформой-ракеткой. q После начала начинает движение в направлении 45 (вправо вверх). q При соприкосновении с краем экрана отталкивается под физически правильным углом. q При попадании в платформу или блок отскакивает от них в правильном направлении, согласно формуле: 180 – текущее направление. q При попадании в область ниже платформы-ракетки засчитывается проигрыш. Объект: блок Неподвижный объект прямоугольной формы. Управляется программой. Реагирует на соприкосновение с шариком. 191
192 РАЗДЕЛ 2. Junior+: Создание игр Спрайт: Button3 (переименованный в Block). Функциональность q В начале игры появляется на экране на своём месте, определяемом координатами (x, y). q Создаёт свои собственные копии, формируя «стену» из блоков (так мы избегаем рутины по добавлению отдельных объектов и их программированию). q При соприкосновении с шариком генерирует кастомное событие «bounce» и исчезает. Arkanoid: альфа=версия Пре-альфа: платформа-ракетка Расположим ракетку в нижней части области анимации посередине и выявим наилучшее её расположение, глядя на текущие координаты.
Arkanoid Оптимальным начальным положением для неё получается: (0; –150). Основной скрипт начнём с установки ракетки в этом положении. Запуск игры будет осуществляться по нажатию зелёного флажка, но старт игровому процессу будет давать сам игрок, нажимая клавишу Пробел. Для этого добавим команду Ждать до <условие> и в качестве условия установим команду Клавиша пробел нажата из группы Сенсоры. Так скрипт не продолжится, пока игрок не нажмёт Пробел. Далее нужно организовать управление ракеткой с помощью клавишей-стрелочек. Похожую функциональность мы организовывали в мини-игре «Большие челюсти». Нам понадобится бесконечный цикл, выполняющий роль слушателя событий нажатия клавиш-стрелок влево и вправо, с помощью проверки двух условий. 193
194 РАЗДЕЛ 2. Junior+: Создание игр При нажатии клавиши-стрелки вправо нужно изменить положение по оси x в положительную сторону, например, на 10. Для этого в тело первого условия добавим команду Изменить x на 10 из группы Движение. Аналогичную команду реализуем во втором условии, только координата x будет меняться в отрицательную сторону на –10. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Если протестировать управление ракеткой, то выяснится, что она выходит за пределы игровой области. Чтобы этого не происходило, воспользуемся командой Если касается края, оттолкнуться из группы Движение. Пусть эта проверка происходит только тогда, когда ракетка двигается, поэтому добавим её в тело каждого условия.
Arkanoid НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Первичная функциональность ракетки готова! Пре-альфа: шарик Так как шарик должен выполнять несколько различных действий одновременно, для него мы напишем три различных скрипта: 1) поведение шарика на игровом поле; 2) аналог слушателя события для отскока от ракетки и блоков; 3) проверка падения шарика ниже ракетки (проигрыш). 195
196 РАЗДЕЛ 2. Junior+: Создание игр Поведение шарика на игровом поле Первый скрипт будет запускаться вместе с остальными, поэтому его начинаем с команды Когда зелёный флажок нажат. Так как шарик в своём первоначальном виде слишком большой, его размер нужно уменьшить, например, в два раза, то есть установить равным 50%. Далее нужно поместить шарик над платформой-ракеткой. Её центр находится в точке с координатами (0; –150), а шарик должен быть чуть выше, поэтому для него подойдёт такое положение: (0; –130). Перед стартом остаётся задать направление, в котором шарик начнёт своё движение. Ранее мы договорились, что изначально он будет двигаться в направлении 45 (вправо вверх).
Arkanoid Далее нужно дождаться старта игры, то есть нажатия клавиши Пробел игроком. После старта шарик должен начать непрерывно двигаться в выбранном направлении, а также отскакивать от краёв экрана. Обработку столкновения с остальными объектами реализуем позже. Так как шарик не останавливается в своём движении, нам понадобится бесконечный цикл. За движение в выбранном направлении отвечает команда Идти <количество> шагов. Отскок от «стенок» обеспечит команда Если касается края, оттолкнуться. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ 197
198 РАЗДЕЛ 2. Junior+: Создание игр Аналог слушателя события для отскока от ракетки После начала игрового процесса шарик должен постоянно «прослушивать» событие соприкосновения с ракеткой. Здесь мы не будем генерировать и слушать события, но напишем для шарика их аналог с помощью бесконечного цикла. При касании ракетки шарику достаточно менять направление движения. Задача слегка осложняется тем, что шарик может падать на платформу-ракетку с разных сторон. Поэтому сначала рассмотрим варианты «падения» шарика на ракетку. Выведем формулу, согласно которой мы сможем получить физически верный отскок шарика. В первом случае: 180 – 135 45. Во втором: 180 – (–135) 180  135 315, но такого значения не существует, поэтому необходимо понять, куда всё-таки направится шарик. Так как мы добавляем положительное число, это соответствует повороту по часовой стрелке. Значит, мы попадаем в левую (отрицательную) половину окружности направлений. Тогда: 180  135 180  (90  45), то есть мы поворачиваемся на прямой угол по часовой стрелке от положения 180, затем ещё на половину и попадаем сначала в –90, а затем в –45. Это то, что нам и нужно. В общем случае получается, чтобы шарик отскакивал в правильном направлении, мы должны от 180 отнять значение текущего направления. Таким образом, получаем формулу: Направление отскока 180 – текущее направление шарика Реализуем нашу задумку. Так как игра начинается после нажатия клавиши Пробел, добавим соответствующий слушатель события.
Arkanoid Шарик должен постоянно проверять, не коснулся ли он ракетки. Реализуем это в бесконечном цикле. Всё, что нужно сделать шарику в случае истинности данного условия, это изменить направление движения согласно формуле. Поэтому добавляем в тело условия команду Повернуться в направлении <значение>. В параметре команды реализуем выведенную формулу: добавим туда оператор вычитания <значение> — <значение>. 199
200 РАЗДЕЛ 2. Junior+: Создание игр В левом окошке с клавиатуры запишем число 180, а в правое поместим специальную переменную Направление из группы Движение (в ней всегда содержится значение текущего направления спрайта). НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ
Arkanoid Проигрыш Если шарик пролетит мимо ракетки (то есть окажется ниже её), то это будет ситуация проигрыша. Проверить это можно с помощью координаты y — именно она отвечает за положение шарика по вертикали. Центр ракетки расположен по координате y: –150. Значит, если центр шарика принимает по y значение, меньшее –150, то мы признаем поражение. Однако при таких проверках допустимы незначительные погрешности. Учтём погрешность в 5 пикселей в условии проигрыша: y < –155. Новый скрипт мы начинаем с команд Когда зелёный флажок нажат и ожидания нажатия клавиши Пробел. После того как дан старт, мы должны начать постоянную проверку обозначенного условия. 201
202 РАЗДЕЛ 2. Junior+: Создание игр Формируем само условие для проверки: положение y < –155. В случае истинности этого условия мы просто остановим игру. Для этого в тело условия помещаем команду Стоп все из группы Управление. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ
Arkanoid Пре-альфа: блок Для блока мы тоже напишем три скрипта: 1) управление первым блоком-родителем; 2) создание клонов и постройка «стены»; 3) управление клонами. Первый блок-родитель Так как все блоки будут исчезать с экрана, до старта игры их нужно показать (включая первый). Изначально блок слишком велик по размеру. Уменьшим его вдвое, а также определим для него место в левой верхней части игровой области: (–200; 130). Далее нам необходимо задать количество нужных нам клонов. Каждый клон будет клонировать сам себя и сам же находить своё место. Поэтому нам понадобится переменная amount (количество), которая остановит этот фактически бесконечный процесс. 203
204 РАЗДЕЛ 2. Junior+: Создание игр Кстати! Этот процесс можно назвать рекурсивным. Рекурсия возникает тогда, когда в программе появляется самоподобие. В нашем случае блок создаёт собственный клон, который, в свою очередь, создаёт другие клоны себя самого. Получается, что каждый клон подобен самому себе, а все они подобны исходному блоку. Остановить этот процесс способно только прерывание с помощью переменной amount. Более подробно с рекурсией в программировании ты можешь ознакомиться самостоятельно или повысив свой ранг с помощью нашего второго учебного пособия «Scratch. Прокачиваем навыки программирования». Создаём переменную amount и выключаем её отображение. При нынешнем размере и положении нашего блока в ряд их сможет поместиться девять штук. Пусть таких рядов будет четыре. Итого: 36 блоков. А значит, первоначальное значение для amount зададим равным 35, так как один блок-родитель из 36 уже есть. Кстати! Эту переменную лучше сделать глобальной, так как её значением можно воспользоваться для определения выигрыша. При этом, если мы захотим изменить количество блоков, будет достаточно поменять только её начальное значение. После этого блок должен создать своего клона, поведение которого мы запрограммируем чуть позже.
Arkanoid Добавляем в скрипт команду Создать клон самого себя из группы Управление. Далее остаётся запрограммировать поведение блока-родителя в игре. Здесь всё просто: при соприкосновении с шариком он должен исчезнуть с экрана. При этом надобность в этом скрипте отпадает, а значит, можно его остановить. Проверять это необходимо постоянно. Клонирование Поведение клона заключено в двух этапах: 1) создание ещё нескольких клонов, пока не обнулится значение переменной amount; при этом каждый клон должен появляться на своём месте — это мы обеспечим проверками 205
206 РАЗДЕЛ 2. Junior+: Создание игр положения по координатам: будем сдвигать каждый новый клон по оси x вправо, а когда место закончится, обнулим положение по оси x, сдвинем клон вниз по оси y и продолжим; 2) основное поведение: при соприкосновении с шариком исчезать с экрана. Для программирования клонов нам понадобится новый слушатель события Когда я начинаю как клон из группы Управление. Клон блока будет выполнять какие-либо действия только в том случае, если ещё не все клоны созданы, то есть переменная amount не достигла нуля. Для этого создаём проверку: Если amount ! 0, то ... Далее нам понадобится проверять, достигли ли мы конца ряда (предельного положения по оси x): y в случае истинности будем создавать очередного клона, предварительно обнулив x и сместившись ниже по y; y в случае ложности будем просто создавать нового клона со сдвигом по x. Для этого добавляем в тело условия ещё одно условие полной формы.
Arkanoid Если переместить блок вправо до границы экрана, то можно увидеть, что после значения координаты x: 160 их больше вставить не удастся, то есть пора переходить на следующий ряд ниже, в его начало. Тогда в условии проверим, достигнут ли конец ряда: если положение x ! 160. Если это условие оказалось истинно, значит, достигнут конец ряда. Тогда мы устанавливаем положение по x: –200 (возвращаемся в начало ряда), а y изменяем на –40 (сдвигаемся ниже). 207
208 РАЗДЕЛ 2. Junior+: Создание игр В случае ложности условия конец ряда ещё не достигнут, а значит, клон должен просто сдвинуться по оси x на 50. После того как клон занял своё место, необходимо уменьшить переменную amount на единицу, чтобы засчитать его существование.
Arkanoid И создать следующий клон. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Игровые блоки (клоны) Осталось для созданных блоков-клонов задать поведение в игре. Ну а им, собственно, нужно только находиться на своём месте и при соприкосновении с шариком исчезать. Для клонов вместо команды Спрятаться мы используем Удалить клон из группы Управление. Клонов лучше не просто прятать, а удалять, чтобы они не нагружали память. 209
210 РАЗДЕЛ 2. Junior+: Создание игр Отскок шарика от блока Остался последний шаг: шарик пока не отскакивает от блоков. Кажется, что исправить это очень легко, если вернуться к скрипту-аналогу слушателя события соприкосновения шарика с ракеткой и добавить в условие проверку: Если касается ракетки ИЛИ касается блока, то ... Но это сработает только для блока-родителя, потому что его клоны — не он сам. Поэтому клон блока при касании его шариком, перед тем как исчезнуть, сгенерирует кастомное событие «bounce» (отскочи).
Arkanoid В шарик добавим слушатель этого события. При его возникновении нужно просто поменять направление движения по той же формуле. Ура! Альфа-версия игры Arkanoid готова! Можно смело начинать тестирование! 211
212 РАЗДЕЛ 2. Junior+: Создание игр Arkanoid: бета=версия Очевидные улучшения, которые необходимы игре на данной стадии: 1) подсчёт набранных очков; 2) выигрыш при уничтожении всех блоков; 3) основной фон, фоны для выигрыша «You win!» и проигрыша «Game Over». Подсчёт набранных очков Создадим для этого переменную Score (очки), которую будем увеличивать на единицу каждый раз, когда шарик уничтожает блок. По умолчанию она отображается на экране — так можно и оставить, разве что сдвинуть её в верхний левый угол и выбрать Крупный вид, кликнув по ней правой кнопкой мыши. В начале игры счёт должен быть обнулён. Сделать это можно в программе для платформы-ракетки. Добавим команду обнуления переменной Score в начало её основного скрипта.
Arkanoid Увеличивать эту переменную на единицу мы должны каждый раз, когда исчезает один блок. Поэтому переходим в программу для него. Здесь есть два скрипта, в которых блок исчезает: для родителя и для его клонов. Добавляем в каждый из них команду Изменить Score на 1 перед исчезновением. Выигрыш Так как в нашей игре всего 36 блоков, выигрыш должен наступать при достижении переменной Score значения 36. Такая проверка должна происходить постоянно, поэтому её будет удобно добавить в программу для платформы-ракетки. 213
214 РАЗДЕЛ 2. Junior+: Создание игр Создадим для этого дополнительный скрипт и запишем в него эту проверку. При истинности условия пока что просто остановим игру командой Стоп все. Фоны Теперь добавим три различных фона для основного режима игры, выигрыша и проигрыша. Создадим три пустых фона. Для этого активируем Сцену и переходим на вкладку Фоны, затем внизу слева трижды выполняем команду Нарисовать.
Arkanoid Каждому из фонов дадим имя: 1) Main — основной фон; 2) Win — для выигрыша; 3) Game Over — для проигрыша. С помощью инструментов рисования добьёмся простейшей реализации обратной связи для пользователя об этапе, на котором он находится. Сделать это можно как угодно. Вот наша реализация с помощью простого прямоугольника, градиентной заливки и текста… Фон Main (простая градиентная заливка) Фон Win 215
216 РАЗДЕЛ 2. Junior+: Создание игр Фон Game Over В начале игры должен отображаться основной фон Main. Переключение фонов осуществляется с помощью команды Переключить фон на <имя> из группы Внешний вид. Добавим переход к фону Main в самом начале основного скрипта для платформы-ракетки. В этом же спрайте у нас есть скрипт проверки выигрыша. Перед командой Стоп все добавляем переход к фону Win.
Arkanoid Проверка проигрыша осуществляется в программе для шарика в отдельном скрипте. Перед командой Стоп все добавляем переход к фону Game Over. Ого, это что, уже бета-версия игры Arkanoid? Разработка идёт полным ходом! Пора начинать открытое тестирование, то есть звать друзей, родителей и всех желающих (и даже нежелающих) поиграть в бета-версию. Цель этого этапа: отловить возможные баги и недоработки, составить баг-репорт, исправить их, а затем приступить к предрелизной подготовке. Мы протестировали игру и составили свой баг-репорт, а также проанализировали возможные предрелизные улучшения. Баг-репорт При попадании шарика в последний созданный блок (при текуš щей реализации это правый нижний) засчитывается два очка, так как в этом месте стоит один лишний клон поверх другого. Блок-родитель в конце игры остаётся в игровой зоне, если не š был уничтожен попаданием шарика. Можно заметить, что при попадании шарика в блок слева или š справа он отскакивает неверно. Рассмотрим одну из таких ситуаций: 217
218 РАЗДЕЛ 2. Junior+: Создание игр Если применить нашу формулу, то шарик полетит в направлении 45: А должен изменить направление на –135: Предложение: покрасить левую и правую стороны прямоугольника в другой цвет, чтобы можно было определить, с какой стороны шарик попадает в блок. Проведи бета-тест ответственно и выяви все возможные баги и критические ошибки, ведь впереди предрелизная подготовка! Предрелизная подготовка Доработка № 1: добавить элемент случайности — сейчас шарик постоянно отскакивает от всех объектов под углом 45 градусов. Можно сделать так, чтобы этот угол был ограниченно случайным. Для сохранения физики полёта нужно генерировать случайные величины из небольшого диапазона, близкого к 45. Доработка № 2: добавить звуковые эффекты при попадании шарика в блок, при отскоке шарика от ракетки и музыку для выигрыша и проигрыша. Доработка № 3: добавить разным рядам блоков (или просто отдельным блокам) процент прочности, чтобы они разбивались не сразу, а только после нескольких попаданий; например, самый нижний ряд разбивается с первого попадания, ряд повыше — со второго и так далее. Доработка № 4: добавить блокам анимацию снижения прочности (на основе смены костюмов) и исчезновения (на основе эффектов внешнего вида). Доработка № 5: добавить несколько «жизней» и отображать их количество в игровой области; если шарик пролетел мимо, то «жизнь» отнимается, но игру можно продолжить; когда «жизней» не останется, наступит проигрыш.
Змейка Доработка № 6: добавить в игру новые уровни с иными расположениями блоков и их видами (по прочности и внешнему виду). Доработка № 7: добавить бонусы, случайно выпадающие из некоторых блоков; если они падают на ракетку (иными словами, игрок «подбирает» падающий бонус), то они меняют игровую ситуацию1; здесь понадобится вводить новые переменные для замены константных (неизменяемых) значений в скриптах, чтобы можно было ими гибко управлять (например, скоростью движения шарика или ракетки). Это не все возможные доработки перед предстоящим релизом — подумай, как ещё можно улучшить твою игру? Как только всё будет готово, можешь смело выпускать свою первую инди-игру в релиз! ͦ Змейка Первая игра уже создана, но нужно оставаться в креативном потоке — время заняться вторым проектом! В этой главе мы реализуем знаменитую Змейку! История игры Змейка Всемирно известная игра Змейка изначально тоже была выпущена в виде игрового автомата американской компанией Gremlin Industries и называлась Hustle (толкотня, суета). Игрок брал под своё управление условное существо, впоследствии названное змейкой, которое перемещалось по ограниченному стенками экрану и собирало «еду» в виде квадратиков. С каждым съеденным квадратиком змейка увеличивалась в длине. На таком игровом автомате можно было играть вдвоём, соревнуясь друг с другом в наборе очков за съеденные квадратики. Цель игры: собирать «еду» и стараться не угодить головой в стенку или собственный хвост. Игрок задаёт только направление движения «головы» змейки. Скорость её передвижения остаётся постоянной. При съедании очередного квадратика «еды», помимо увеличения длины змейки, добавляются очки (в версии игрового автомата Hustle каждый такой квадратик давал разное количество очков). 1 Подробнее о возможных бонусах (положительных и отрицательных) смотри в истории игры. 219
220 РАЗДЕЛ 2. Junior+: Создание игр Игра ограничена только временем, по истечении которого она заканчивается и производится итоговый подсчёт очков и запись в таблицу рекордов.
Змейка «Жизней» у змейки не предусмотрено, поэтому при столкновении со стенкой или собственным хвостом засчитывается проигрыш. Впоследствии вышло очень много разных версий этой игры: изменялись внешний вид самой змейки, размеры игрового поля, добавлялись нестандартные бонусы, например, увеличивающие или уменьшающие скорость движения змейки, менялись платформы — змейка была реализована на множестве различных компьютеров, — а в 2005 году финская компания–производитель мобильных телефонов выпустила Змейку 3D для модели Nokia N70. 1 1 Это интересно! Змейка по сей день остаётся очень популярной! В 2016 году американский разработчик Стив Хаус (Steve Hawse) выпустил игру Slither.io1, которая набрала огромную популярность, благодаря «вирусному» распространению. На момент выхода игры у Стива не осталось денег на маркетинг, поэтому он решил поступить иначе: новые костюмы для змейки можно было получить, поделившись постом об этой игре в социальной сети. Просмотр одной такой рекламки приносил всего один цент, но быстро набирающаяся популярность (460 миллионов просмотров в день) так же быстро принесла результат. Меньше чем через полгода, по разным оценкам, Стив стал зарабатывать на ней порядка ста тысяч долларов в день! http://slither.io/ — официальный сайт игры, на котором можно в режиме онлайн поиграть в эту игру с другими пользователями прямо из интернет6 браузера. 221
222 РАЗДЕЛ 2. Junior+: Создание игр Планирование В игре три главных взаимодействующих объекта: 1) хвост змейки (один сегмент); 2) голова змейки; 3) еда. Объект: хвост змейки Подвижный объект, представляющий из себя квадрат. Управляется программой, перемещаясь за головой змейки и увеличивая количество своих собственных копий при каждом поедании «еды». Спрайт: квадрат 7î7 пикселей с именем Tail (хвост), изображается вручную с помощью редактора костюмов. Функциональность q В начале игры не отображается на экране. q После начала создаёт свои собственные копии, которые остаются в игровой области на определённое количество секунд (чем больше змейка съест квадратиков с едой, тем дольше клон хвоста будет оставаться на экране, создавая иллюзию роста длины). Это время будет определять переменная tailClone. q Удаляет свой клон по истечении времени его нахождения на экране. Объект: голова змейки Подвижный объект, представляющий из себя квадрат с «глазами» для понимания игроком его текущего направления. Управляется пользователем, осуществляя движение по экрану в одну из сторон: вправо, вверх, влево и вниз в пределах его границ. Спрайт: увеличенная копия хвоста (квадрат 8×8 пикселей) с дорисованными «глазками» и чуть более тёмным цветом, с именем Head (голова).
Змейка Функциональность q В начале игры располагается в центре экрана (x: 0; y: 0). q После старта управление передаётся игроку. q Перемещение головы задаётся программно. q Направление движения головы определяется пользователем с помощью нажатия клавиш-стрелок на клавиатуре. q При касании края экрана или хвоста засчитывается проигрыш, и игра заканчивается. Объект: еда Подвижный объект прямоугольной формы. Управляется программой. При соприкосновении с головой змейки увеличивает её размеры и случайным образом меняет своё положение. Спрайт: копия хвоста (квадрат 7×7 пикселей) белого цвета, с иконкой жучка и именем Food (еда). Функциональность q В начале появляется на экране в случайном месте игровой области, определяемом координатами (x; y). q При соприкосновении с головой змейки увеличивает время отображения клонов хвоста на экране, а затем случайным образом меняет своё положение на экране. Змейка: альфа=версия Пре-альфа: хвост змейки Сначала мы должны нарисовать спрайт для хвоста. Сделать это довольно просто, но есть и некоторые нюансы, на которые стоит обратить внимание. 223
224 РАЗДЕЛ 2. Junior+: Создание игр Для начала изображения нового спрайта в области управления объектами выбираем команду Нарисовать. Откроется вкладка Костюмы, в которой нам доступен уже знакомый графический редактор. Заметим, что изначально редактор открывается в векторном режиме, то есть рисование в нём происходит с помощью изображения графических примитивов. Это значит, что если мы будем масштабировать изображение (растягивать или уменьшать), то оно не будет терять своё качество, так как мы всего лишь меняем положение (координаты) опорных точек примитива, а компьютер перерисовывает линии заново. Приступим к рисованию. На панели инструментов выберем Прямоугольник (см. рисунок слева). Определим цвет заливки (он может быть любым) с опорой на то, что голова будет чуть темнее; контур отключим. Все элементы нашей змейки — квадраты (правильные прямоугольники). Для изображения ровного квадрата мы должны
Змейка зажать клавишу Shift и растягивать его на холсте, удерживая левую кнопку мыши. При этом каждая из сторон должна занять по 7 пикселей (ориентируемся по квадратикам на холсте). Для удобства можно воспользоваться средствами масштабирования холста в правом нижнем углу. Важно! Центр квадрата должен совпадать с центром холста! Обратим внимание на подпись к созданному костюму. В ней указан размер костюма в пикселях. Пока что 28î28 то, что нам нужно. Если не получилось сразу, то размеры квадрата можно изменить, потянув за круглые точки вокруг него. Центр костюма должен совпадать с центром квадрата, если это не так, перетащи квадрат так, чтобы его центр совпадал с центром холста. Теперь в области управления объектами дадим новое имя спрайту, назовём его Tail. 225
226 РАЗДЕЛ 2. Junior+: Создание игр Всё готово для написания программы! Для хвоста мы напишем два скрипта: 1) инициализация при запуске игры и создание собственных клонов; 2) управление поведением клонов с помощью переменной tailClone. Основное поведение Первый скрипт будет запускаться по нажатию на зелёный флажок. Изначально пользователь видит только голову змейки без хвоста (он ещё не вырос), поэтому первым делом после запуска программы мы должны спрятать его с экрана. Все остальные действия должны начать выполняться только после того, как пользователь даст старт игре. Реализуем это подобно тому, как делали в Arkanoid. После старта хвост будет создавать свои собственные клоны один раз в полсекунды. Именно этот временной интервал определяет скорость движения змейки по экрану — один «шаг» за полсекунды. Этот процесс происходит на протяжении всей игры, так что добавляем бесконечный цикл.
Змейка На каждой его итерации мы будем создавать клоны с задержкой в 0.5 секунды. Клоны наступают Далее запрограммируем поведение клонов: они должны появляться в том же месте, где и голова змейки, и задерживаться там на определённое время, после чего удаляться. Время задержки определяет длину змейки — чем она длиннее, тем дольше задержка. Значит, оно будет меняться в ходе игры, и нам понадобится хранить его в переменной. Создадим для этих целей переменную tailClone (клон хвоста). Она должна быть глобальной, так как изменять её значение мы будем из спрайта еды. Отображать на экране эту переменную не нужно. Начнём создавать второй скрипт, который будет управлять поведением клона. Соответственно, первой командой станет Когда я начинаю как клон из группы Управление. 227
228 РАЗДЕЛ 2. Junior+: Создание игр Данный скрипт будет пошагово выполняться для каждого созданного клона. В самом начале мы должны определить место его появления — оно соответствует положению головы змеи. Но такой спрайт мы пока не создали, так что сделаем под него заготовку, которую доработаем позднее. В области управления объектами кликнем правой кнопкой мыши по спрайту Tail и в контекстном меню выберем пункт Дублировать. Новому спрайту дадим имя Head. С этим спрайтом мы продолжим работать чуть позже, а пока возвращаемся к Tail. Добавляем команду Перейти на Head из группы Движение.
Змейка Минимально клон должен существовать по времени столько же, сколько голова змейки будет стоять на одном месте. После этого клон должен появиться на экране. Когда клон появился на экране, он должен задержаться на нём на определённое количество секунд. Изначально это количество равно нулю, но с поеданием каждого нового квадратика еды клон должен всё дольше и дольше находиться на экране. Мы определили, что это время будет задавать переменная tailClone. Поэтому добавляем ещё одну команду Ждать <количество> секунд и в качестве количественного параметра помещаем переменную tailClone. 229
230 РАЗДЕЛ 2. Junior+: Создание игр После того как клон «отжил» своё время на экране, его нужно удалить. Осталась одна маленькая недоработка — при перезапуске игры значение переменной tailClone должно обнуляться. Исправим это, добавив соответствующую команду в начало скрипта инициализации для Tail. На этом мы закончили создание хвоста и фактически основной «скрытой от глаз игрока» функциональности игры.
Змейка Пре-альфа: голова змейки Для головы змейки мы также напишем два скрипта: 1) интерактивное управление направлением движения с помощью клавиш-стрелок; 2) движение по экрану и проигрыш при столкновении с его краем или собственным хвостом. Доработаем спрайт Head Сейчас голова змейки — абсолютная копия хвоста, включая скрипты. Сначала удалим их все. Затем перейдём на вкладку Костюмы, изменим размер квадрата на 8î8 пикселей, цвет заливки квадрата на чуть более тёмный и дорисуем глаза, чтобы понимать, в какую сторону «ползёт» змейка. В этом нам поможет инструмент Круг. Глаза должны получиться идеально круглыми, поэтому при рисовании зажимаем клавишу Shift. Так как по умолчанию все костюмы направлены вправо, глаза изображаем с правой стороны. Глаз получится более симпатичным, если изобразить его с помощью трёх кругов. Чтобы не гадать с размерами, нарисованный глаз просто скопируем: для этого зажмём клавишу Shift и кликнем на каждый нарисованный круг, а затем скопируем и вставим его с помощью соответствующих команд. Должна получиться вот такая симпатяжка. 231
232 РАЗДЕЛ 2. Junior+: Создание игр Важно! Центр квадрата должен совпадать с центром холста! Интерактивное управление Управление с помощью клавиш-стрелочек мы уже реализовывали, поэтому такой скрипт мы составим без труда. Отличие лишь в том, что двигаться змейка будет сама, поэтому клавишами-стрелками мы лишь меняем направление её «взгляда».
Змейка Не хватает только команды Показаться и ожидания старта по нажатию клавиши Пробел. Добавим их в начало скрипта до цикла. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Запрограммированный ползать летать не сможет Второй скрипт гораздо интереснее. Первым делом мы зададим начальное положение, а затем реализуем автоматическое перемещение головы змейки по игровому полю. После нажатия по зелёному флажку нужно определить стартовое положение змейки. Пусть это будет центр игровой области, то есть точка с координатами (0; 0). Затем ожидаем старт игры от пользователя. 233
234 РАЗДЕЛ 2. Junior+: Создание игр Теперь змейка должна начать постоянно двигаться в направлении своего «взгляда» и остановиться при касании края экрана или своего хвоста. А значит, снова время бесконечного цикла! Остальная часть скрипта будет находиться внутри тела цикла. Добавляем команду Идти <количество> шагов. В качестве параметра укажем значение 30 пикселей — это оптимально для размеров нашего игрового поля. Теперь реализуем проверку на проигрыш: он наступает при касании головой края экрана ИЛИ хвоста. Соответственно, для проверки выполнения хотя бы одного из двух условий мы применяем логическую операцию ИЛИ — она истинна в случае истинности хотя бы одного проверяемого условия.
Змейка Для проверки касания края экрана или хвоста Tail добавляем команды из группы Сенсоры. В случае истинности такого условия мы должны оповестить игрока о проигрыше и остановить всю игру. Остаётся задать скорость движения змейки по экрану, а она, в свою очередь, зависит от того, какой мы установим задержку исполнения этого скрипта. Для хвоста мы определили задержку, равную 0.5 секунд. Здесь будет то же самое. Добавляем команду Ждать 0.5 секунд сразу после условия — она станет последней в цикле. 235
236 РАЗДЕЛ 2. Junior+: Создание игр НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Пре-альфа: еда Для еды достаточно одного скрипта: появление в случайном месте, ожидание касания головы змейки, увеличение длины хвоста змейки (то есть времени задержки в переменной tailClone). Рисуем еду для змейки Этот спрайт мы создадим также на основе Tail. Поэтому снова дублируем его, удаляем все скрипты, меняем имя на Food. Размер квадратика еды должен составлять 7î7 пикселей, цвет заливки — белый, а также нарисуем поверх него, например, жучка. Важно! Центр квадрата и жучка должны совпадать с центром холста!
Змейка Доползём — поедим Скрипт для еды мы начинаем уже знакомым образом. После старта спрайт еды должен появиться на экране. Основная логика его поведения будет располагаться в бесконечном цикле. А теперь самое интересное. Вспомним, что голова змейки перемещается с каждым своим «шагом» на 30 пикселей. В то же время экран по оси x ограничен от 240 до 240, а по оси y от 180 до 180. Новое положение для квадратика-еды должно задаваться случайно. Но мы сделаем эту псевдослучайность псевдоуправляемой. Дело в том, что игра будет совсем некрасиво выглядеть, если голова змейки не будет совпадать с едой при их соприкосновении. То есть будет лучше, если они будут всегда выстраиваться на одной линии движения. Тогда по обеим осям x и y еда должна занимать положения, координаты которых кратны 30 (то есть делятся на 30 без остатка; так еда будет занимать только те положения, которые способна занимать голова змейки). 237
РАЗДЕЛ 2. Junior+: Создание игр 238 Задать такие положения можно следующими формулами: x (случайное от 7 до 7) * 30, что соответствует положениям: 210, 180, 150, ..., 180, 210 y (случайное от 5 до 5) * 30, что соответствует положениям: 150, 120, 90, ..., 120, 150 Мы специально не берём крайние положения по x (–240, 240) и y (–180, 180), чтобы не создавать безвыходной ситуации: еда на краю игровой области, значит, змейка неизбежно столкнётся со стеной и засчитается проигрыш. Добавляем внутрь цикла команду Перейти в x: <значение>, y: <значение> из группы Движение. Для реализации формул нам понадобятся операторы умножения <значение> * <значение>. В качестве операндов слева добавляем команды генерации случайных чисел и вписываем соответствующие формулам значения; операнды справа — это число 30. После того как еда появилась на экране, всё, чем она должна заниматься, — это терпеливо ждать, пока голова змейки её коснётся и тем самым съест.
Змейка Как только спрайт Food будет съеден, мы должны удлинить змейку. Как уже не раз было сказано, это удлинение достигается за счёт увеличения времени нахождения клонов хвоста на экране. Значит, нам достаточно увеличить значение переменной tailClone на 0.5 секунд (таков и «шаг» змейки). Ура! Альфа-версия Змейки готова! Теперь можно соревноваться с друзьями — кто продержится длиннее? ͦ 239
240 РАЗДЕЛ 2. Junior+: Создание игр Змейка: бета=версия Улучшения, которые можно добавить в игре на данной стадии: 1) подсчёт набранных очков Score; 2) исправим ошибку возникновения квадратика-еды внутри хвоста змейки; 3) добавим еду-бонус: с вероятностью в 10% вместо жучка будет появляться бабочка, которая ускорит змейку на некоторое время и при этом удлинит её хвост. Подсчёт набранных очков Создадим переменную Score в крупном виде и расположим её в игровой области в удобном месте. В начале игры счёт должен быть обнулён. Сделать это можно в начале основного скрипта для головы змейки Head.
Змейка Увеличивать эту переменную на единицу мы должны каждый раз, когда съедается квадратик Food. Поэтому переходим в программу для него. Еда считается съеденной, когда она коснулась головы змейки. Значит, в тот же момент мы и будем увеличивать Score на единицу. 241
242 РАЗДЕЛ 2. Junior+: Создание игр НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Отладка Можно заметить, что периодически в игре возникает ситуация появления еды внутри хвоста змейки. В этот момент кажется, что очередной квадратик с едой не появился, но на самом деле он находится под хвостом. Разрешить эту проблему довольно просто: достаточно сделать проверку соприкосновения еды Food с хвостом Tail перед тем, как еда начнёт ожидать, пока змейка её съест.
Змейка В спрайте Food организуем проверку условия: Если не касается Tail, то ..., и навесим её на часть скрипта. Если это условие не будет истинным, то все команды внутри него не будут выполнены, а значит, цикл пойдёт на новый круг, и квадратик-еда просто изменит своё положение — мы этого даже не заметим. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Бонус Теперь добавим новую функциональность для спрайта Food. Периодически (в десяти случаях из ста) он будет менять свой костюм и при съедании змейкой давать ей временный бонус скорости, но при этом усложнять игру увеличением длины хвоста. Для этого нам нужно существенно переработать спрайт Food и немного изменить скрипты у Head. Изменять спрайт Food начнём с того, что нарисуем для него второй костюм. Назовём его Butterfly (бабочка), а костюм с жучком переименуем на Bug (жук). Важно! Центр квадрата и бабочки должны совпадать с центром холста! Далее реализуем переход к этому костюму случайным образом в 10% случаев. Сделать это можно с помощью случайных чисел. Если сгенерировать число в отрезке от 1 до 100 и проверить, является ли оно меньшим 11-ти (то есть попадает ли оно в диапазон от 1 до 10), то в случае истинности создать на экране бонус; если нет, то работать в обычном режиме. Отложим в сторону всё наполнение тела бесконечного цикла в скрипте для Food и поместим туда условие полной формы. 243
244 РАЗДЕЛ 2. Junior+: Создание игр Условие для проверки будет следующим: Если случайное число от 1 до 100  11, то ... В случае истинности условия мы должны «превратить» жучка в бабочку. Для этого достаточно изменить костюм на Butterfly.
Змейка Теперь возвращаем отложенную часть скрипта в тело условия. Чтобы бонус сработал, мы должны сообщить змейке, что она должна увеличить скорость. Добавим генерацию кастомного события «SpeedBonus» (бонус скорости) сразу после того, как бабочка «дождалась» касания головы змейки. 245
246 РАЗДЕЛ 2. Junior+: Создание игр В случае ложности условия сменим костюм на Bug и выполним все те же самые действия, за исключением генерации кастомного события «SpeedBonus». Как мы помним, скорость перемещения змейки — это задержка на 0.5 секунд. Для того чтобы динамически влиять на это значение, мы должны создать глобальную переменную speed.
Змейка Теперь перейдём к спрайту Head. Для начала в скрипте, отвечающем за автоматическое движение змейки, мы должны задать начальное значение переменной speed, равное 0.5, а также вместо введённого с клавиатуры параметра в команде Ждать 0.5 секунд поместить эту переменную. 247
248 РАЗДЕЛ 2. Junior+: Создание игр Теперь здесь же нужно создать новый скрипт — слушатель события SpeedBonus. Всё, что нужно сделать, — это уменьшить значение переменной speed на некоторое время (например, на 7 секунд), после чего вернуть его обратно. Следующий скрипт увеличит скорость движения змейки в 2 раза на 7 секунд. Но это ещё не всё. С задержкой движения головы змейки также связан и её хвост Tail. В обоих его скриптах в командах Ждать 0.5 секунд мы должны вместо константы 0.5 использовать переменную speed. Готово! Теперь бонус будет работать корректно. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ
Змейка Восхитительно! Мы подготовили бета-версию игры Змейка! Теперь можно предложить побить рекорды по длине змейки всем желающим! Баг-репорт Из-за величины головы змейки иногда она преждевременно š съедает жучка или бабочку, ещё не успев оказаться поверх спрайта еды. Расстояние между головой змейки и первым квадратом её хвоš ста достаточно мало. Проведи бета-тест ответственно и выяви все возможные баги и критические ошибки, ведь впереди предрелизная подготовка! Предрелизная подготовка Доработка № 1: изменить игровой фон, добавить звуки при поедании и появлении еды, при столкновении змейки с хвостом или краем игровой области. Доработка № 2: добавить ситуацию выигрыша, чтобы игра не длилась бесконечно; можно сделать несколько уровней: например, если змейка достигла длины хвоста в 10 квадратиков, то происходит переход на второй уровень, где всё начинается заново, но змейка движется быстрее; от уровня к уровню становится всё сложнее уследить за ней. Доработка № 3: добавить в игровой процесс новые интересные бонусы, например, мышку, которая удлиняет хвост змейки сразу на три квадратика. Доработка № 4: добавить анимацию еде — бабочка может махать крыльями, а жучок шевелить ножками, при этом можно каждый раз поворачивать их в разные стороны. Доработка № 5: реализовать «бесконечное» игровое поле, чтобы игра не заканчивалась при столкновении змейки со стеной, а наоборот — змейка будет просто появляться с противоположной стороны; для этого нужно будет поработать с координатами и местоположением головы змейки в определённые моменты. Доработка № 6*: добавить таблицу рекордов — когда игра заканчивается, игроку предлагается ввести своё имя или никнейм, после чего оно добавляется в список bestNames (лучшие имена), а количество набранных очков в список bestScores (лучшие количества очков) с таким же индексом. Доработка № 7*: реализовать сортировку обоих списков по убыванию — на первом месте самое большое количество очков, 249
250 РАЗДЕЛ 2. Junior+: Создание игр на последнем — самое маленькое; при этом список с именами должен выстроиться в соответствующем порядке очков. * — доработки с этим значком можно выполнить, самостоятельно изучив методы работы со списками или повысив свой ранг с помощью нашего второго учебного пособия «Scratch. Прокачиваем навыки программирования». Это не все возможные доработки перед предстоящим релизом — подумай, как ещё можно улучшить твою игру? Как только всё будет готово, можно заняться выпуском второй инди-игры в релиз! ͦ Pong Наша студия уже выпустила в релиз целых две игры! Ты совсем близко к званию настоящего инди-разработчика! Но настоящие программисты кодят непрерывно (иногда даже жертвуя сном), поэтому мы продолжаем! Знакомьтесь, Pong! Ping Pong! История игры Pong Этой игре было суждено стать первой в мире коммерчески успешной. Вряд ли программист Аллан Алкорн наперёд мог предугадать столь высокую популярность своего детища, ведь создавал он эту игру исключительно для тренировки своих навыков. Молодому 24-летнему программисту было дано задание от основателя известной игровой корпорации Atari Нолана Бушнелла, который был вдохновлён приставкой Magnavox Odyssey, сделать похожую игру, но только разнообразить её геймплей и добавить звуковые эффекты (тогда это было очень трудно), так как от графики новых откровений ожидать пока не приходилось. В 1972 году появился игровой автомат Pong, названный так из-за звука, который имитировал удар мячика о ракетку.
Pong Цель игры: «Чтобы набрать очки, старайтесь не упускать мячик», — вот главное и единственное правило, сформулированное самими создателями. Игрок управляет прямоугольной «ракеткой» (как в Arkanoid), которая передвигается по вертикали в одной из сторон экрана: слева или справа. По чёрному полю из стороны в сторону летает мячик. Задача игрока — не пропустить мячик в свои «ворота». Игра чем-то напоминает настольный теннис (пинг-понг). Автомат поддерживал как одиночную, так и парную игру с реальным соперником. Время матча было ограничено, чтобы игроки не оставались играть бесконечно. Плюс для старта новой игры надо было закинуть ещё одну монетку — уже тогда монетизация игрового опыта начала завязываться на желании игрока продолжить игру. Новшествами, которые привнёс Алкорн, было в том числе определение частей ракетки, от которых отскакивает мячик, так что его траектория полёта постоянно изменялась; частые попадания мячика в обе ракетки приводили к увеличению скорости его движения. Во время игры вёлся подсчёт очков, которые и определяли победителя. Это интересно! В сентябре 1972 года был готов первый вариант этого игрового автомата. Для его тестирования Бушнелл договорился с кафе по соседству об установке такого автомата. Уже на следующий день хозяин позвонил в Atari и сообщил о неисправности. Прибывший на место Алкорн обнаружил, что в автомате произошло короткое замыкание из-за наполненного сверх всякой меры монетоприёмника. 251
252 РАЗДЕЛ 2. Junior+: Создание игр Pong в своём семейном кругу: Нолан Бушнелл (в центре), Тед Дабни (слева), Аллан Алкорн (крайний справа) Кстати! Сороковым по счёту сотрудником компании Atari был 19-летний Стив Джобс (тот самый, кто подарил миру iPhone и iPad), нанятый Алланом Алкорном на должность техника в феврале 1974 года. Планирование В игре пять взаимодействующих объектов: 1) ракетка игрока; 4) ворота игрока; 2) ракетка компьютера; 5) ворота компьютера. 3) мячик; Объект: ракетка игрока Подвижный объект, представляющий собой белый прямоугольник с ярко-синим контуром и размерами 2î12 пикселей. Управляется пользователем с помощью клавиш-стрелок, перемещаясь вверх и вниз по левой части экрана в пределах его границ. Спрайт: изображается вручную с помощью редактора костюмов.
Pong Функциональность q В начале игры располагается в левой части экрана. q После старта управление передаётся игроку. q Движение ракетки осуществляется при нажатии клавиш-стрелок вверх и вниз. q При попадании мячика в ракетку тот отскакивает от неё в сторону противника, причём конкретное направление задаётся случайно для увеличения сложности и повышения динамики игрового процесса. Объект: ракетка компьютера Подвижный объект, представляющий собой белый прямоугольник с контуром ярко-красного цвета и размерами 2î12 пикселей. Управляется программно, осуществляя движение по правой части экрана вверх и вниз в пределах его границ, стараясь не пропустить шарик. Спрайт: копия ракетки игрока с другим цветом контура. Функциональность q В начале игры располагается в правой части экрана. q После начала управление осуществляет программа. q Вычисляет текущее положение мячика, исходя из чего выбирает направление своего движения, стараясь предугадать траекторию полёта мяча и успеть его отбить. q При попадании в ракетку мяч отскакивает от неё в сторону игрока, конкретное направление для него выбирается так же, как и для ракетки игрока. Объект: мячик Подвижный объект круглой формы белого цвета с зелёным контуром и размерами 8î8 пикселей. В начале игры располагается посередине экрана, управляется программой. При соприкосновении с ракетками отскакивает от них в противоположную сторону. При соприкосновении с воротами игрока засчитывает очко 253
254 РАЗДЕЛ 2. Junior+: Создание игр компьютеру и наоборот; после чего возвращается в центр экрана и начинается следующий раунд. Спрайт: изображается вручную с помощью редактора костюмов. Функциональность q В начале игры появляется в середине экрана (x: 0; y: 0). q После старта игры начинает движение в случайно выбранном направлении. q При соприкосновении с ракетками отскакивает в противоположную сторону. q При соприкосновении с воротами игрока засчитывает очко компьютеру и переходит в середину экрана. q Аналогично засчитывает очко игроку при соприкосновении с воротами компьютера и переходит в середину экрана. q При касании верхнего или нижнего края игровой области отскакивает от неё в физически верном направлении. Объект: ворота игрока Неподвижный прозрачный объект, представляющий из себя прямую линию, растянутую по вертикали на всю игровую область. Спрайт: изображается вручную с помощью редактора костюмов. Функциональность q В начале игры появляется в левой части экрана, за ракеткой игрока. q Имеет прозрачность, равную 100%. q Выполняет служебную скрытую функцию фиксации пропуска мяча игроком.
Pong Объект: ворота компьютера Точно такой же неподвижный прозрачный объект, как и ворота игрока. Спрайт: копия ворот игрока. Функциональность q В начале игры появляется в правой части экрана, за ракеткой компьютера. q Имеет прозрачность, равную 100%. q Выполняет служебную скрытую функцию фиксации пропуска мяча компьютером. Pong: альфа=версия Пре-альфа: игровое поле «Театр начинается с вешалки», — сказал когда-то великий российский режиссёр Константин Сергеевич Станиславский. Наша игра начнётся с игрового поля, то есть с оригинального фона. В этот раз мы будем стараться соответствовать классическому виду игры. И так как все игровые объекты у нас белого цвета, начнём мы именно с изменения фона. В области управления объектами для Сцены выберем команду Нарисовать. 255
256 РАЗДЕЛ 2. Junior+: Создание игр Откроется графический редактор. Возьмём инструмент Прямоугольник с заливкой чёрного цвета и растянем его на всю видимую часть холста. Для разделения игрового пространства на две части нарисуем посередине белую линию с толщиной контура, равной 10. Первый белый фон можно удалить, нажав на значок корзины возле него.
Pong Пре-альфа: ракетка игрока Нарисуем спрайт ракетки, для этого в области управления объектами выбираем команду Нарисовать. При изображении прямоугольника будем ориентироваться на фоновые квадратики-пиксели. Его оптимальные размеры: 12 пикселей в длину и 2 пикселя в ширину. Также выберем ярко-синий цвет для контура. Важно! Центр прямоугольника должен совпадать с центром холста! В области управления объектами сразу создадим его дубликат, который впоследствии станет ракеткой компьютера. 257
258 РАЗДЕЛ 2. Junior+: Создание игр Начальные настройки Дадим спрайту ракетки игрока имя Player (игрок) и запретим любые повороты. Точно так же поступим и со второй ракеткой, но её имя будет Computer (компьютер). Заодно изменим её контур на ярко-красный в редакторе костюмов.
Pong Теперь мы готовы написать программу для ракетки игрока! В ней будет всего лишь один скрипт, определяющий её местоположение и обеспечивающий управление с помощью клавиш-стрелок. Управление ракеткой игрока (Player) Для начала определим положение для ракетки. Она должна находиться в левой части экрана, но не у самого края. Мы помним, что по оси x его левая граница равна –240, значит, пусть начальное положение ракетки будет (x: –200; y: 0). Далее создадим уже привычную для нас конструкцию управления с помощью клавиш-стрелочек. На этот раз мы используем всего две клавиши: вверх и вниз, а перемещение осуществляется по оси y. При этом не забываем о том, чтобы ракетка не могла «убежать» за границы экрана. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Программа для управления ракеткой игрока готова! 259
РАЗДЕЛ 2. Junior+: Создание игр 260 Пре-альфа: ракетка компьютера Теперь мы запрограммируем поведение ракетки компьютера. На самом деле её программа логически не отличается от управления ракеткой игрока. Её начальное положение устанавливается с противоположной стороны (x: 200; y: 0), а само движение происходит не по нажатию клавиш, а несколько иначе. Могут ли машины мыслить?1 Для начала соберём скрипт, похожий на тот, что мы написали для ракетки игрока, но пока не будем указывать условия для передвижения. 1 Таким вопросом задавался в своей яркой научной статье «Вычислительные машины и разум» учёный Алан Мэттисон Тьюринг; можно сказать, именно он заложил основы исследования и создания алгоритмов искусственного интеллекта, так что настоятельно рекомендуем ознакомиться с этим выдаю6 щимся трудом, тем более его перевод на русский язык существует в виде научно6популярного издания и читается на одном дыхании.
Pong Разберёмся с тем, как ракетка компьютера должна определять положение мяча. Дело в том, что мы, как игроки, определяем положение мячика визуально (видим глазами). У компьютера глаз, увы, нет, поэтому он должен опираться на какие-то сугубо математические параметры. Как же ракетка Computer должна «понять», двигаться ей вниз или вверх? Рассмотрим следующие рисунки, изображающие возможные ситуации взаимного расположения ракетки и мячика (yм — координата y мячика; yр — координата y ракетки). Как мы видим, всё довольно просто. Нас будет интересовать лишь положение мячика по оси y и положение ракетки по той же самой оси. В первом случае: если положение мячика больше (выше) положения ракетки, то она должна двигаться в положительном направлении по оси y (вверх). Во втором случае: если положение мячика меньше (ниже) положения ракетки, то она должна двигаться в отрицательном направлении по оси y (вниз). Единственной загвоздкой остаётся то, как ракетка будет «узнавать» положение мячика по координате y. Но и это оказывается проще простого, ведь у нас есть специальные переменные! Нам нужно лишь организовать доступ к ним с помощью дополнительной переменной, в которую мячик будет постоянно передавать своё положение, а ракетке останется лишь ориентироваться на её значение. Поэтому первым делом создадим глобальную переменную ballPosition (положение мяча). 261
262 РАЗДЕЛ 2. Junior+: Создание игр Важно! Инициализировать её мы пока не можем, так как у нас ещё нет мячика. Поэтому будем её использовать, а тестирование проведём позже. Первое условие отвечает за проверку для движения вверх. В нём мы буквально проверим следующее условие: Если положение ракетки по y  ballPosition, то ...
Pong Во втором условии нужно проверить обратное условие: Если положение ракетки по y ! ballPosition, то ... Умная ракетка компьютера готова! Пре-альфа: ворота игрока По сути, ворота — это просто линия, при касании которой мяч будет засчитывать очко и вновь появляться в середине игрового поля. Поэтому её нужно лишь нарисовать и разместить позади ракетки Player. В области управления объектами выбираем команду Нарисовать. В открывшемся редакторе с помощью инструмента Линия изображаем вертикальную прямую, удерживая клавишу Shift, чтобы она была ровной. Её нужно растянуть на всю длину игровой области. Толщина для неё не важна, так как мы всё равно сделаем её впоследствии прозрачной. 263
264 РАЗДЕЛ 2. Junior+: Создание игр Важно! Центр линии должен совпадать с центром холста! В области управления объектами сразу продублируем этот спрайт. Первый спрайт назовём PGate (Player’s Gate — ворота игрока) и запретим любой поворот.
Pong То же самое сделаем и для второй линии, её имя будет CGate (Computer’s Gate — ворота компьютера). Установка ворот игрока Ворота должны располагаться позади ракетки игрока. Сама она располагается по x: –200, значит, для ворот будет вполне достаточно положения (x: –230; y: 0). Как мы сказали ранее, линия ворот должна выполнять скрытую функциональность, поэтому установим её прозрачность равной 100%. Пре-альфа: ворота компьютера Для спрайта CGate справедливы те же рассуждения, что и для PGate. Поэтому просто напишем для ворот компьютера точно такой же скрипт с тем лишь отличием, что положение для них будет противоположным: (x: 230; y: 0). 265
266 РАЗДЕЛ 2. Junior+: Создание игр Кстати! Несмотря на прозрачность, правильность расстановки ворот можно проверить. В области управления объектами нужно поочерёдно кликнуть на спрайты CGate и PGate. При этом они на время подсветятся в области исполнения. Если они приняли нужное положение и своей длиной заняли всё пространство позади ракетки, значит, всё правильно (они также могут выходить за верхнюю или нижнюю границы игровой области, ошибкой это не является). Если нет, то нужно это поправить. Пре-альфа: мяч Скрипт для мяча будет самым объёмным и в некоторой мере сложным, так как он является основным действующим объектом игры. Но сначала его надо нарисовать. В области управления объектами выбираем команду Нарисовать. Откроется редактор костюмов. В панели инструментов выберем Эллипс. В палитре выберем белый цвет для заливки и зелёный для контура. Чтобы мячик получился ровным, при рисовании удерживаем клавишу Shift. Квадрат его выделения должен занять площадь 8î8 пикселей.
Pong Важно! Центр круга должен совпадать с центром холста! Спрайту мячика дадим имя Ball (мяч). Взглянем на игровую область и проверим соотношение размеров всех объектов. При необходимости их можно скорректировать. 267
268 РАЗДЕЛ 2. Junior+: Создание игр Скрипт инициализации Вспомним, что именно мячик определяет, кому засчитать очко в случае его пролёта мимо ракетки, а значит, для этого нам понадобятся две переменные. Создадим их с именами PS (Player’s Score — очки игрока) и CS (Computer’s Score — очки компьютера). Значения этих переменных будут отображаться на экране. Поэтому переместим их на свои места: PS — наверху слева, CS — наверху справа. Вид оставим по умолчанию. После запуска игры мы должны обнулить оба счёта, переместить мяч в середину игрового поля и случайным образом выбрать начальное направление его движения (помня, что мы ограничены диапазоном поворота от –179 до 180).
Pong Основной скрипт В основном скрипте будет постоянно происходить ряд различных проверок, определяющих поведение мяча, поэтому начинаем его с бесконечного цикла. Все остальные команды скрипта будут находиться в теле этого цикла. Прежде всего мячик должен двигаться в выбранном направлении с некоторой скоростью, поэтому добавляем команду Идти 10 шагов из группы Движение. Положение мяча по оси y должно быть доступно другим спрайтам. Для этого мы создали переменную ballPosition — на каждой итерации цикла будем обновлять её значение с помощью соответствующей специальной переменной. 269
270 РАЗДЕЛ 2. Junior+: Создание игр Наконец можно проверить, что ракетка Computer начала двигаться, стараясь угадать траекторию мяча! Так что… НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Помимо простого перемещения, мяч должен отскакивать от краёв экрана. Ну а теперь начинается самое интересное: нам нужно создать четыре проверки и варианты поведения мячика при их выполнении: 1) касание ракетки игрока; 2) касание ракетки компьютера; 3) попадание в ворота игрока; 4) попадание в ворота компьютера. Каждый из этих фрагментов будет представлять из себя отдельное неполное условие.
Pong Пас компьютеру! Реализуем отскок от ракетки игрока. Для этого мы должны проверить следующее условие: Если касается Player, то ... Всё, что нужно сделать мячику, это поменять направление своего движения. Но, как мы и говорили, добавим элемент случайности, чтобы сделать игру интереснее. Рассмотрим следующий рисунок, на котором видно, в каком направлении должен направиться мячик после удара о ракетку игрока. 271
272 РАЗДЕЛ 2. Junior+: Создание игр Мы видим, что случайным образом можно выбрать любое направление от 45 до 135, что и сделаем. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Пас игроку! Аналогичным образом реализуем отскок от ракетки компьютера. Здесь условие для проверки: Если касается Computer, то ...
Pong Рассмотрим похожий рисунок для направления отскока от ракетки компьютера. Здесь можно выбрать любое значение от –45 до –135. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Гол игроку! Третья проверка будет заключаться в том, коснулся ли мяч ворот игрока: Если касается PGate, то ... 273
274 РАЗДЕЛ 2. Junior+: Создание игр Если мяч попал в ворота, то мы должны засчитать очко компьютеру, то есть увеличить переменную CS на единицу. Помимо этого нужно начать следующий раунд, то есть вернуть мяч в центр игрового поля и подождать пару секунд, чтобы игрок успел перегруппироваться. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ
Pong Гол компьютеру! Последняя проверка связана с касанием мяча ворот компьютера: Если касается CGate, то ... При истинности условия действия будут теми же, но только очко будет засчитываться игроку, и, соответственно, на единицу мы увеличим переменную PS. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Альфа-версия копии легендарной игры готова! Теперь можно запустить её и перенестись назад в прошлое — почувствовать захватывающий геймплей семидесятых! 275
276 РАЗДЕЛ 2. Junior+: Создание игр Pong: бета=версия Игра явно нуждается в следующих улучшениях: 1) текущая реализация «искусственного интеллекта» (ракетки компьютера) не оставляет игроку никакого шанса на победу, поэтому сделаем его не таким быстрым и точным, чтобы увеличить шансы на выигрыш пользователя (но не слишком); 2) одна из идей Алана Алкорна для оригинальной игры: с каждым ударом о ракетки увеличивать скорость движения мяча — это стоит реализовать; 3) помимо увеличения скорости можно постепенно уменьшать размер мяча — так игровой опыт будет более разнообразным. Всё ради победы! Можно заметить, что сейчас компьютер играет довольно точно и обыграть его, в общем-то, невозможно. В игру играет, прежде всего, игрок (многовато однокоренных слов, стоящих рядом, но зато понятно), а значит, его игровой опыт не должен стать сугубо негативным. Поэтому мы изменим скорость движения ракетки компьютера так, чтобы она стала немного меньше, чем у пользователя. Лишь немного потому, что игра станет совершенно неинтересной, если пользователь будет постоянно с лёгкостью обыгрывать компьютерного соперника. Такое улучшение станет ещё и заделом на будущее, потому как мы создадим переменную, которая будет задавать скорость перемещения ракеток — это откроет перед нами новые возможности. Создаём переменную moveSpeed (скорость перемещения). Отображаться на экране она не должна. В ней будем хранить текущую скорость движения ракеток.
Pong В будущем мы будем менять эту скорость в процессе игры. Поэтому её начальное значение, равное 10, мы зададим в скрипте инициализации спрайта Ball. Теперь обе ракетки должны принимать в качестве скорости своего движения значение этой переменной. Перейдём к спрайту Player и в его первой команде движения Изменить y на 10 заменим константу 10 на переменную moveSpeed. Во второй команде движения необходимо получить отрицательное значение — для этого мы домножим значение переменной moveSpeed на –1. 277
278 РАЗДЕЛ 2. Junior+: Создание игр То же самое нужно сделать и в спрайте Computer. При этом мы договорились, что скорость движения ракетки компьютера будет немного меньше. Поэтому из значения переменной moveSpeed мы дополнительно вычтем 5. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Ускорение мяча С каждым ударом о любую ракетку скорость мяча должна возрастать, а значит, нам понадобится ещё одна переменная. Но учтём ещё один момент: чем быстрее движется мяч, тем быстрее должны двигаться и ракетки, иначе дисбаланс сложности нам обеспечен. Для начала создадим локальную переменную ballSpeed (скорость мяча). Отображать на экране её также не требуется. Эта переменная влияет только на поведение мяча, поэтому работать мы будем исключительно со спрайтом Ball.
Pong Первым делом запишем в неё значение 2 в начале скрипта инициализации. В основном скрипте первая команда в теле бесконечного цикла Идти 10 шагов задаёт скорость движения мяча. Нам нужно заменить константу 10 на переменную ballSpeed. Далее нужно добавить команду, увеличивающую значение этой переменной в тех местах, где происходит обработка удара мяча о ракетку. За это отвечают два условия, которые проверяют касание со спрайтами Player и Computer. В их тела добавляем по одной команде Изменить ballSpeed на 2. 279
280 РАЗДЕЛ 2. Junior+: Создание игр Однако после каждого пропуска мяча игроком или компьютером мы должны вернуть скорость обратно к начальному значению 2. Сделать это нужно в двух других условиях, которые проверяют касание с PGate и CGate. Добавляем в тело каждого из них по команде Задать ballSpeed значение 2. НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ
Pong Но это ещё не всё. Аналогичным образом мы должны увеличивать значение переменной moveSpeed, чтобы скорость движения ракеток «успевала» за скоростью мяча. Будет достаточно с каждым ударом об одну из ракеток увеличивать её на единицу. И нужно не забыть вернуть её начальное значение, равное 10, при пропуске мяча. 281
282 РАЗДЕЛ 2. Junior+: Создание игр НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Уменьшение мяча Несмотря на все наши усилия, выиграть у компьютера всё ещё довольно сложно, но тем интереснее игра! Мы способны на боXльшие подвиги ради успеха нашего проекта — похожим образом будем изменять размеры мяча при каждом ударе о ракетку, не забывая при этом возвращать его к начальному виду после каждого пропуска. В самом начале скрипта инициализации Ball нужно сперва установить 100-процентный размер мяча.
Pong В основном скрипте для уменьшения мяча будем пользоваться командой Изменить размер на –5%, а возвращать исходный размер командой Установить размер 100% из группы Внешний вид. 283
284 РАЗДЕЛ 2. Junior+: Создание игр НАПОМИНАЕМ О ПРОМЕЖУТОЧНОМ ТЕСТИРОВАНИИ Отлично! Мы доработали игру до бета-версии! Пора начать открытое тестирование и выяснить, кто же станет королём самой популярной игры?! Баг-репорт В самом начале игры мячик движется слишком медленно. š Искусственный интеллект всё ещё слишком хорош в этой š игре, его трудно одолеть. В начале игры мячик сразу начинает двигаться, хотелось бы š добавить ему небольшую задержку. Проведи бета-тест ответственно и выяви все возможные баги и критические ошибки, ведь впереди предрелизная подготовка!
Pong Предрелизная подготовка Доработка № 1: добавить таймер обратного отсчёта времени перед началом игры и каждого раунда — для этого понадобится отдельная переменная, которая будет появляться в игровой области в начале игры и каждого раунда; уменьшаться на единицу один раз в секунду, пока не станет равна нулю, после чего пропадёт с экрана. Доработка № 2: добавить ситуацию победы в игре; например, если игрок набрал 10 очков, то безоговорочная победа присуждается ему, и наоборот. Доработка № 3: приблизить игру к оригиналу — подобно Аллану Алкорну создать атмосферное звуковое сопровождение; если внимательно прочитать историю игры, то можно понять, насколько важно, чтобы она сопровождалась звуками. Доработка № 4: добавить в игру повышение уровня сложности — с каждым заработанным очком ракетка того, кто выигрывает, должна становиться меньше. Доработка № 5: сделать так, чтобы после завершения игры игроку задавался вопрос: «Try again?» (попробовать ещё?), и в зависимости от нажатия клавиши «Y» (yes — да) или «N» (no — нет) игра запускалась бы заново или завершалась. Доработка № 6: добавить возможность выбора уровня сложности в начале игры: y лёгкий — ракетка игрока больше ракетки компьютера, мяч ускоряется не так сильно, ракетка компьютера движется медленно; y средний — ракетки игрока и компьютера одинаковы по размеру, мяч ускоряется стандартно, обе ракетки движутся с одинаковой скоростью; y тяжёлый — ракетка игрока меньше ракетки компьютера, мяч ускоряется сильнее, ракетка компьютера движется быстро (но не слишком, должен оставаться шанс на победу). Доработка № 7: реализовать возможность выбора противника в начале игры — компьютер или реальный человек; доработать ракетку противника так, чтобы она реализовывала двойную логику своего управления в зависимости от выбора игрока. Это не все возможные доработки перед предстоящим релизом — подумай, как ещё можно улучшить твою игру? 285
Заключение Поздравляем тебя! Ты проделал большую работу и теперь тебя смело можно называть junior + программистом и начинающим разработчиком инди-игр! Надеемся, что ты весело и с пользой провёл время в нашем увлекательном путешествии по миру программирования и разработки игр вместе со Scratch! Однако помни, это только начало пути! Впереди ещё много интересного, сложного, удивительного! Для повышения твоего ранга программиста до middle и senior ты можешь продолжить обучение с помощью нашего второго учебного пособия «Scratch. Прокачиваем навыки программирования». Но после этого твоё приключение только начнётся! Далее тебе следует изучить текстовые языки программирования высокого уровня, такие как Python, C++, C#, Java и другие. Настоящему разработчику игр или создателю мультфильмов не обойтись без технологий 3D-моделирования и визуализации. А если ты хочешь стать известным на весь мир, то тебе как минимум понадобится собственный сайт, на котором ты сможешь познакомить жителей нашей планеты со своими достижениями и идеями! Продолжай заниматься и совершенствовать свои навыки, развиваться в самых различных направлениях и, в частности, в программировании. А мы постараемся помочь тебе в этом Успехов, дорогой друг! Ещё увидимся! ͦ.
Словарь программиста Понятие Определение Алгоритм Строгая последовательность действий, соз6 данная для решения поставленной задачи (или группы задач) и получения конкретного резуль6 тата за ограниченное число шагов Алгоритмизация Процесс создания алгоритма для решения конкретной задачи (или группы задач) Аппаратное обеспечение Набор реальных компонентов (например, деталей компьютера), входящих в состав устройства Баг Сленговое слово программистов, происходя6 щее от английского «bug» (жук), обозначаю6 щее какое6то несовершенство (ошибку) в про6 граммном коде Баг6репорт Отчёт, содержащий информацию об ошибках и несовершенствах в программном коде, со6 ставленный на основе тестирования Бит Единица измерения информации Бесконечный цикл Цикл, выполняющийся бесконечно долго; его можно применять в программах с прерывани6 ем, но часто его наличие говорит о наличии ошибки в программном коде Ввод данных Получение данных от пользователя (с помо6 щью клавиатуры, мыши, микрофона и других считывающих устройств) или другого источни6 ка для обработки в программе Визуальная среда программирования Среда программирования, в которой програм6 мы создаются с помощью графических эле6 ментов (блоков) и их соединения Визуальный язык программирования Язык программирования, в котором коман6 ды, алгоритмические конструкции, операторы и другие элементы реализованы с помощью графики Возвращаемое значение Результат выполнения операции или функции Входной параметр подпрограммы Локальная переменная, значение для которой передаётся при вызове подпрограммы Вывод данных Отображение данных на дисплее, воспроизве6 дение звука с помощью акустической системы, печать текста принтером и так далее
288 Словарь программиста Продолжение табл. Понятие Определение Вызов подпрограммы Использование подпрограммы в коде основ6 ной программы или другой подпрограммы Выражение Любая строчка программного кода Геймдев От английского «game development» — разра6 ботка игр; IT6сфера разработки игровых ре6 шений для ПК, игровых консолей, мобильных платформ Глобальная переменная Переменная, доступная в любом месте про6 граммы Дизъюнкция Логическая операция, возвращающая истину в случае истинности хотя бы одного из опе6 рандов Естественный язык Набор символов, слов и правил построения предложений, возникший естественным путём при развитии речи у людей (русский, англий6 ский, французский и другие языки) Закрытое тестирование Этап разработки программы, на котором к те6 стированию допускается ограниченный круг лиц, как правило, имеющих отношение к раз6 работке программного продукта Инверсия Логическая операция, возвращающая истину для ложного операнда; ложь — для истинного Инициализация переменной Запись конкретного значения в переменную при её создании Интерактивность Взаимодействие пользователя и техническо6 го устройства, при котором возникает диалог между ними — на действия пользователя воз6 никает ответная реакция устройства (напри6 мер, передвижение объектов на экране при нажатии кнопок на клавиатуре) Интерпретатор Транслятор, выполняющий чтение и перевод программного кода в машинный «построчно» Интерфейс Внешний вид устройства или программного обеспечения, обеспечивающий взаимодей6 ствие с пользователем Исполнение программы Выполнение компьютером (или другим устрой6 ством) созданной для него программы Истина Логическое значение, указывающее на то, что выражение соответствует действительности
Словарь программиста Продолжение табл. Понятие Определение Итерация цикла Одно выполнение тела цикла Кастомная реализация Создание какой6либо функциональности с ну6 ля для определённых нужд разработчика Команда Инструкция, выполняемая процессором Комментарий Текст, записанный внутри программы, но иг6 норируемый процессором; служит вспомога6 тельным материалом для чтения программно6 го кода Компилятор Транслятор, целиком прочитывающий про6 граммный код, выявляющий ошибки и осу6 ществляющий конечную «сборку» программы на машинном коде для её дальнейшего ис6 полнения Компьютер Электронное устройство, выполняющее опре6 делённые вычисления и обработку данных; к компьютерам можно отнести персональные компьютеры, суперкомпьютеры, смартфоны, игровые консоли и т. д. Константа Величина, значение которой не изменяется в ходе исполнения программы Конъюнкция Логическая операция, возвращающая истину в случае истинности всех операндов Культура программирования Набор правил и норм, регулирующих пове6 дение программистов и их взаимодействие; включает качество программного кода, тести6 рование программ, коммуникацию, этику Линейный алгоритм Алгоритм, инструкции в котором выполняются по одному разу в строгом порядке без условий и циклов Ложь Логическое значение, указывающее на то, что выражение не соответствует действительности Логическое выражение Выражение, о котором можно судить, истинное оно или ложное; может быть простым (одно логическое выражение) или сложным (состав6 ленное из нескольких логических выражений с использованием логических операций) Локальная переменная Переменная, доступная в ограниченной обла6 сти программы 289
290 Словарь программиста Продолжение табл. Понятие Определение Машинный код Набор инструкций, непосредственно выпол6 няемый процессором; представляется в виде сигналов в двоичном виде (0 — нет сигнала; 1 — есть сигнал) Неполная форма условия Условие, предполагающее наличие только од6 ного тела, выполняемого в случае истинности выполненной проверки Область видимости (замыкание) Область программного кода, ограничивающая использование тех или иных переменных, па6 раметров и имён Обратная связь Информация, получаемая из внешних источни6 ков, позволяющая лучше понять, что происхо6 дит в окружающем мире, как мы действуем и что возможно предпринять Отладка (дебаггинг) Процесс тестирования программного кода или его отдельных участков для отлова возможных ошибок (багов) Операнд Элемент, участвующий в операции Оператор Команда или символ, выполняющие опреде6 лённую операцию Операция В программировании: математическое (сложе6 ние, умножение и др.) или логическое (сравне6 ние и др.) действие, выполняемое оператором Определение подпрограммы Процесс именования подпрограммы, проду6 мывания её структуры и добавления входных параметров Оптимизация программ Процесс улучшения производительности про6 граммы на основе баланса использования ре6 сурсов компьютера Открытое тестирование Этап разработки программы, на котором к те6 стированию допускаются все желающие Память компьютера Устройство, хранящее данные в электронном виде Патч Набор исправлений и улучшений программно6 го кода Переменная (в программировании) Именованная область памяти компьютера, ко6 торую можно свободно использовать для хра6 нения данных в программе
Словарь программиста Продолжение табл. Понятие Определение Подпрограмма Часть программы (программа внутри програм6 мы), которая выполняет определённое дей6 ствие и может быть вызвана из разных мест программы; её имя принято начинать с глагола Полная форма условия Условие, предполагающее наличие двух тел, одно из которых выполняется в случае истин6 ности выполненной проверки, другое — в слу6 чае ложности Пользователь Человек, использующий программу, чаще все6 го не разбирающийся в её программной реа6 лизации Постусловие Условие, проверяемое циклом на каждой ите6 рации после выполнения его тела Предусловие Условие, проверяемое циклом на каждой ите6 рации перед выполнением его тела Присваивание Запись конкретного значения конкретной пе6 ременной Прерывание Остановка исполнения текущей программы или скрипта ПресеXт Предварительно заданная настройка или их комбинация Программа Набор инструкций, составляющий единое це6 лое, позволяющий аппаратному обеспечению выполнять различные действия для достиже6 ния поставленной задачи Программирование Процесс создания программы Программист Специалист, разрабатывающий программы для компьютера; обладает знаниями в обла6 сти программирования, умеет работать с ал6 горитмами и структурами данных, писать код на разных языках программирования Программное обеспечение Набор виртуальных компонентов (программ), обеспечивающих функционирование компью6 тера Программный код Набор инструкций для компьютера, записан6 ный на одном из языков программирования Программный продукт Приложение, игра, операционная система и другие, созданные в результате работы про6 граммистов (индивидуально или в команде) 291
292 Словарь программиста Продолжение табл. Понятие Определение Промежуточное тестирование Тестирование, выполняемое в ходе написания программного кода (до завершения проекта) Процедура Подпрограмма, которая выполняет какие6либо команды, но при этом не имеет на выходе ка6 кого6либо вычисляемого результата Псевдокод Язык (чаще всего естественный), следующий общим правилам составления программ, но игнорирующий специфический для каждого языка программирования синтаксис Псевдослучайное число Число, выбираемое из некоего диапазона зна6 чений с помощью какого6либо алгоритма или создающееся с помощью определённой мате6 матической формулы, выглядящее как случай6 ное Разработка Процесс «придумывания», конструирования (создания) нового материального или вирту6 ального (программного) продукта, к которому обычно привлекается команда специалистов разных областей, но может вестись и одним человеком Ранг программиста Уровень профессионального развития про6 граммиста, присваиваемый в зависимости от его опыта, количества выполненных проектов, знаний и навыков в области разработки про6 грамм Рекурсия Процесс вызова подпрограммы самой себя в своём теле или при возврате значения; в Scratch встречается также при обращении скрипта к самому себе (например, создание клона объекта самим объектом или создание клона клоном) Релиз Версия программы, готовая к выпуску в свет и широкому использованию Ресурсы компьютера Аппаратные (процессор, оперативная память, видеокарта, жёсткий диск и т. д.) и виртуаль6 ные (расход памяти и времени) Скрипт Самостоятельная часть программы, выполня6 ющая возложенную на неё функцию Скрипт инициализации Скрипт, в котором собраны только те команды, которые объект должен выполнить в начале программы для установки своего начального состояния
Словарь программиста Продолжение табл. Понятие Определение Случайное число Число, получаемое в результате случайного события Слушатель события Небольшая функция (подпрограмма), которая подключается для «прослушки» определённого события и выполнения действий в случае его наступления Событие Изменение состояния объектов и/или их пара6 метров; возникает вследствие действий поль6 зователя или взаимодействия объектов и их программ Список Набор данных (значений), для которого воз6 можны особые способы обработки Спрайт Виртуальный объект, имеющий визуальную (видимую) форму Среда программирования Набор виртуальных средств (программ), пред6 назначенных для создания программных про6 дуктов Строка Набор символов Тело условия Набор команд, выполняемых в зависимости от истинности (просто тело условия) или ложно6 сти (альтернативное тело) проверяемого усло6 вия Тело цикла Набор команд, выполняемых внутри цикла Тестирование Процесс проверки работоспособности про6 граммы с целью выявления ошибок (багов) и улучшения её качества Тип данных Характеристика значений, определяющая до6 пустимые операции и необходимый объём па6 мяти для их хранения (например, в перемен6 ной) Точка останова (breakpoint) Намеренное граммы Транслятор Программа, выполняющая перевод программ6 ного кода с одного языка на другой; транслято6 ры делятся на компиляторы и интерпретаторы Условие Проверка, осуществляемая с целью принятия решения о выполнении тех или иных действий Условный алгоритм Алгоритм, выполнение которого регулируется с помощью условий прерывание исполнения про6 293
294 Словарь программиста Окончание табл. Понятие Определение Фича Сленговое слово программистов, происходя6 щее от английского «feature» (особенность), обозначающее некоторую особенность реали6 зации какого6либо решения, чаще всего нося6 щую положительный характер Функциональность Способность программы выполнять опреде6 лённые задачи Функция В программировании: подпрограмма, которая выполняет какие6либо команды и обязательно имеет на выходе какой6либо вычисляемый ре6 зультат, притом только один Цикл Конструкция, позволяющая обеспечить повто6 рение определённых действий Цикл с заданным числом повторений Цикл, тело которого выполняется заранее определённое количество раз (итераций) Цикл с постусловием Цикл, тело которого выполняется хотя бы один раз, а начало новой итерации определяется условием, проверяемым в конце Цикл с предусловием Цикл, тело которого может не выполниться ни разу, а начало новой итерации определяется условием, проверяемым в начале Циклический алгоритм Алгоритм, в котором присутствуют циклы Язык программирования Набор символов, слов, обозначений и правил, предназначенный для создания компьютерных программ Ячейка памяти (байт) Минимальный участок памяти компьютера
Приложение. Математический тренажер
Содержание От автора . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Благодарности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Загрузка и установка Scratch 3 Offline Editor . . . . . . . . . . . . . . 10 РАЗДЕЛ 1. JUNIOR: Основы программирования . . . . . . . . . . . 13 Обзор интерфейса . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Первая программа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Подпрограммы и циклы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Декартова система координат . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Рисование по координатам . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Псевдослучайные числа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Интерактивность и слушатели событий . . . . . . . . . . . . . . . . . . . 95 Переменные . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Подпрограммы и параметры . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Ввод данных . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Псевдокод . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 РАЗДЕЛ 2. JUNIOR+: Создание игр . . . . . . . . . . . . . . . . . . . . 187 Arkanoid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Змейка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Pong . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Заключение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 Словарь программиста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Приложение. Математический тренажер 295
Минимальные системные требования определяются соответствующими требованиями программ Adobe Reader версии не ниже 11-й либо Adobe Digital Editions версии не ниже 4.5 для платформ Windows, Mac OS, Android и iOS; экран 10" Учебное электронное издание Тарапата Виктор Викторович SCRATCH. ПРОГРАММИРОВАТЬ СМОЖЕТ КАЖДЫЙ Учебное пособие Ведущий редактор Ю. А. Серова Художник Е. А. Белова Обложка: Л. В. Чернова Технический редактор Т. Ю. Федорова Корректор Н. А. Карелина Компьютерная верстка: Е. Г. Ивлева Подписано к использованию 15.11.24. Формат 155×225 мм Издательство «Лаборатория знаний» 125167, Москва, проезд Аэропорта, д. 3 Телефон: (499) 157-5272 e-mail: info@pilotLZ.ru, http://www.pilotLZ.ru