Визуальное программирование на Scratch

2.1 Что такое Scratch?

Scratch — это бесплатная среда, созданная Массачусетским технологическим институтом (MIT), в которой вместо написания кода программу строят, соединяя цветные блоки друг с другом. Этот способ называется визуальным программированием.

Под визуальным программированием понимается составление программы не набором текста кода, а соединением готовых блоков мышью. Каждый блок — одна команда, например «иди 10 шагов» или «скажи Привет».

Почему мы начинаем именно отсюда? Причины простые:

• Не бывает синтаксических ошибок, то есть вы не получите ошибку из-за забытой скобки или точки с запятой
• Блоки соединяются только в логически подходящем месте, поэтому структура получается правильной сама собой
• Результат сразу видно на сцене, и это делает обучение интересным

Самое главное: идеи, которые вы освоите в Scratch, то есть цикл, условие и переменная, позже в C, Python или JavaScript работают точно так же. Значит, это не игрушка, а настоящий фундамент.

2.2 Сцена, спрайт и блоки

Экран Scratch состоит из трёх основных частей. Справа — сцена, то есть область, где виден результат программы. Под ней список спрайтов. Слева же палитра блоков и пустое место, где их собирают.

Под спрайтом понимается персонаж или объект, движущийся по сцене, например кот, мяч или ракета. А сцена (stage) — это фон, по которому движутся спрайты, то есть игровое поле.

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

Обратите внимание: каждый цвет означает одну группу задач. Синий — движение, фиолетовый — внешний вид, жёлтый — события и так далее. Эта цветовая логика очень упрощает чтение Scratch.

2.3 Первый скрипт: события

Каждая программа должна с чего-то начинаться. В Scratch сигнал, запускающий программу, называется событием (event). Самый распространённый: «когда нажат зелёный флаг».

Набор блоков называется скриптом. Скрипт всегда начинается сверху блоком-событием в форме «шапки», а под ним последовательно соединяются команды. Вот самый простой скрипт:

Этот скрипт работает так: пользователь нажимает зелёный флаг, событие срабатывает, спрайт говорит «Привет!». Попробуйте сами ниже:

2.4 Движение и внешний вид

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

Координаты сцены

Центр сцены — точка x = 0, y = 0. При сдвиге вправо x растёт, при сдвиге вверх растёт y. Блок «перейти в x: 100 y: 0» ставит спрайт в точное место, а «иди 10 шагов» двигает его в ту сторону, куда он смотрит.

Самые часто используемые блоки

Вот образцовый скрипт: при нажатии флага спрайт немного идёт вперёд, затем здоровается.

• «иди шагов» двигает спрайт в том направлении, куда он смотрит
• «повернись на градусов» поворачивает его на заданный угол
• текст, написанный в блоке «скажи», появляется над спрайтом в виде пузыря
• «смени костюм» меняет облик спрайта, и это создаёт анимацию

Управление кнопками: сила события

Настоящие игры реагируют на кнопки пользователя. Блок «когда нажата стрелка» ловит событие клавиатуры и двигает спрайт в этом направлении. Нажимайте стрелки ниже (или щёлкните по сцене и используйте стрелки клавиатуры):

2.5 Циклы: повторение одного и того же

Представьте, что вы хотите нарисовать спрайтом квадрат. У квадрата 4 равные стороны и 4 угла. Значит, пару «иди вперёд» и «повернись на 90 градусов» нужно написать 4 раза. Копировать это вручную 4 раза скучно и легко ошибиться.

Решение простое. Под циклом (loop) понимается блок, который автоматически повторяет группу команд заданное число раз. Достаточно вложить два блока внутрь блока «повтори 4 раза»:

Видели? Всего 3 блока (1 цикл + 2 команды) нарисовали целый квадрат. Циклы делают программу короткой, чистой и без ошибок.

Есть ещё один особый цикл: всегда (forever). Он повторяет блоки внутри непрерывно, пока программа не завершится. Например, в игре блок «всегда: иди к указателю мыши» заставляет врага постоянно следовать за игроком.

2.6 Условия и сенсоры

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

Под условием (condition) понимается вопрос, ответ на который только «да» или «нет», например «коснулся ли спрайт края?». Такие вопросы даёт категория Сенсоры (голубая). А блок «если ... то» выполняет код внутри только тогда, когда условие истинно.

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

Условия дают программе «ум»: теперь она чувствует ситуацию и в зависимости от неё действует по-разному.

2.7 Переменные

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

Под переменной (variable) понимается именованная «коробка», хранящая значение, например «очки», «жизнь» или «скорость». Значение внутри коробки можно в любой момент прочитать или изменить.

Важно не путать две основные операции. «установить в 0» стирает старое значение в коробке и записывает совершенно новое. А «изменить на 1» прибавляет к числу в коробке. Попробуйте оба варианта ниже:

2.8 Практика: соберите скрипт сами

Теперь объединим всё вместе. Нажимая блоки в палитре ниже, соберите скрипт, затем нажмите зелёный флаг, и пусть спрайт выполнит ваши команды на сцене. Изменив число повторов, можно обернуть весь скрипт в цикл.

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

2.9 Реальные проекты

Теперь, объединив четыре изученные идеи (последовательность, цикл, условие, переменная), рассмотрим полноценные программы, как в настоящих играх. Каждая из них — реальный проект, который вы сразу можете собрать в Scratch.

Проект 1: Мяч, отскакивающий от стены

Это самая популярная первая игра. Мяч непрерывно движется и при ударе о стену (край) отскакивает обратно. Вот вся программа, всего несколько блоков. Запустите её на сцене рядом:

Цикл «всегда» — сердце игры: он работает без остановки. Внутри него две задачи, то есть движение и проверка условия. Этот шаблон встречается почти в каждой игре.

Проект 2: Кот, собирающий яблоки

Теперь объединим переменную и сенсоры. Если кот коснётся яблока, «очки» увеличиваются на единицу. Это основа любой игры на «сбор»:

А яблоко мы спускаем с неба, делая клон (это рассмотрим в следующем разделе). Вот эти три идеи: цикл, условие и переменная полностью образуют целую игру.

Проект 3: Управление стрелками

Выше мы двигали спрайт кнопками. В настоящей игре код для этого очень короткий: для каждой стрелки отдельный маленький скрипт. Если вы хотите, чтобы кот шёл вправо:

Обратите внимание: эти два скрипта работают одновременно и независимо. В Scratch может жить много скриптов сразу, каждый ждёт своё событие.

Предскажите: что делает этот скрипт?

Читать код так же важно, как и писать его. Посмотрите на скрипт и найдите результат. Когда нажмёте ответ, правильный будет отмечен:

2.10 Глубже advanced

Вы освоили основы. Теперь познакомимся с мощными возможностями Scratch. Эти понятия так же существуют и в настоящих языках программирования, просто называются иначе.

Сообщения (broadcast)

Под сообщением (broadcast) понимается сигнал, который один спрайт отправляет другому. Один спрайт использует блок «передать сообщение», а второй отвечает через блок «когда получу сообщение». Так спрайты «разговаривают» друг с другом и сцены сменяются. Это и есть та самая система событий (event) настоящего программирования.

Клоны (clone)

Под клоном (clone) понимается копия спрайта, созданная во время работы программы. Используется, чтобы из одного спрайта создать десятки пуль, звёзд или врагов: рисуете один, а в нужный момент клонируете. Это очень близко к идее «копии объекта» в больших программах.

Списки (list)

Под списком (list) понимается структура, хранящая множество значений по порядку под одним именем. Например, таблица лучших результатов или набор вопросов. Если обычная переменная хранит одно значение, то список хранит целый список. Это и есть понятие массива в настоящих языках.

Свои блоки (custom blocks)

Если группа блоков повторяется много раз, их можно собрать в один новый блок. Под своим блоком (custom block) понимается блок, созданный пользователем и вызываемый по одному имени. Например, создав свой блок «нарисуй звезду», вы используете его в любом месте одним нажатием. Это начало понятия функции в программировании, то есть средство повторного использования кода и снижения сложности.

2.11 Тест знаний

Перед тестом: основные термины

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

Теперь попробуем

16 вопросов. Чтобы завершить неделю, ответьте правильно как минимум на 11.