
Давайте сделаем игру «Двери» в Скретче и создадим собственную виртуальную комнату, нарисуем страшного персонажа и запрограммируем его. Поможет простая и наглядная инструкция со скриншотами: в ней разобраны основные шаги и показано, что и как нужно делать.
Мы в Pixel часто используем среду Scratch на курсах блочного программирования для дошкольников и младших школьников, а также для детей старше. Считаем, что такой подход — плюс: отмеченный инструмент учит создавать игры, анимацию и интерактивные истории посредством использования ярких блоков, напоминающих команды в текстовых языках. Это приводит к формированию ряда важных навыков и к пониманию основ программирования: алгоритмов в виде простых и сложных последовательностей, а также связей и других принципов.
Сегодня предлагаем сделать Doors в Scratch — интересный проект, где задача игрока — исследовать ограниченный виртуальный мир в поиске новых фрагментов общей карты. Если не повезет, предстоит столкнуться со страшным монстром.
Интересно? Тогда давайте приступим. Но сначала отметим, что создавать фрагменты карты не будем: просто запрограммируем двери и монстра.
Как сделать Дорс в Скретче: пошаговая инструкция
Сначала представим текстовое руководство с наглядными скриншотами, а в конце опубликуем видео: оно поможет выполнить самопроверку и исправить ошибки при условии их возникновения.
Предлагаем приступить.
Шаг № 1: создаем основы игровой карты
Начать предлагаем с базового фона: давайте нарисуем фрагмент коридора. Чтобы он выглядел реалистично, отдадим предпочтение трехмерному изображению. Сразу отметим, что в 3Д-мире действует следующее правило: чем ближе объекты к игроку, тем они больше. Из этого вытекает дополнительный принцип: пространство должно расширяться по мере приближения к нам.
Приступим к созданию. Необходимые действия:
Выбираем инструмент «Линия».
Создаем пол. Нужно начать и закончить в одной точке. Цель — замкнуть пространство: без этого не получится залить наш виртуальный пол.

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

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

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

Продублировать костюм. Первый будет обозначать закрытую дверь, второй — открытую.

Раскрасить новые костюмы. Закрытую дверь предлагаем сделать красной и добавить ей ручку в виде желтого кружка.

Применить бирюзовый либо голубой цвет, чтобы закрасить внутреннюю часть условной комнаты. Это будет обозначением того, что дверь открыта.

Закрасить красным открытую часть двери и добавить ручку. Назовем спрайт «Дверь 1».

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


Далее на втором костюме необходимо дорисовать открытую часть и сделать ее, как и раньше, бирюзовой или голубой.

Применим название «Дверь 2». Осталось добавить третий аналогичный элемент. Шаги те же, что и в случае с первой дверью, но для обозначения внешней поверхности предлагаем использовать фиолетовый цвет. Давайте назовем спрайт «Дверь 3».

Шаг № 3: пишем программу Doors в Скретче
Предлагаем начать создание блочного кода для сегодняшнего проекта с проработки первой двери. Действия:
Используем «Когда флажок нажат» и «Перейти в координаты», как на скриншоте.
Добавляем команду изменения активного костюма на первый.

Пишем вторую команду такого вида: спрайт нажат, изменить костюм на второй и передать сообщение «Дверь 1».

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


Проверим программу? Если все сделано правильно, наше мини-приложение в виде проекта Doors в Скретче заработает на простейшем уровне: двери будут открываться при кликах на них.
Шаг № 4: создаем монстра и программируем его
Давайте сделаем монстра. Пусть он будет черным и состоящим из линий: можно нарисовать спрайта хаотично и добавить ему красные глаза для устрашения. Достаточно повторить примерный рисунок, как на скриншоте.

Теперь перейдем в скрипт и напишем команду: когда флажок нажат, спрятаться. Потребуется создать новую переменную с номером двери и задать начальное значение на уровне 0.

Нужен цикл повторения. Дополнительно потребуется задать изменение переменной случайным образом в диапазоне от 1 до 3. Это поможет привнести в проект элемент непредсказуемости: после запуска игры Doors в Скретче монстр будет прятаться за неизвестной дверью.

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

Если мы выбрали «Дверь 1», нужно запрограммировать команду: показаться, установить размер костюма на уровне 100% и перейти в -152 и -24.

Теперь программируем следующее:
После перехода в новые координаты ждем 1 секунду.
Плывем в центр в 0 и 0, увеличиваемся на 50%.
Так, скажем, если мы запускаем игру и выбирается номер 1, монстр прячется за соответствующей дверью и при ее открытии показывается, начинает двигаться в центральную часть. В сегодняшнем проекте это событие означает проигрыш и завершение игры.

Аналогичным образом поступаем с оставшимися дверями. Команды для них наглядно показаны на скриншотах далее.



В заключение давайте сделаем табличку, оповещающую о проигрыше, и напишем красным текстом YOU LOST.

Немного сместим табличку, чтобы она легко читалась, а также напишем следующие команды.


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

Обучающий ролик о создании игры «Дорс» в Скретче
Как и обещали, предлагаем видеоурок. Посмотреть его можно на:
Итак, мы разобрались, как сделать игру «Дорс» в Скретче. Надеемся, что все получилось. Если да, можно начинать играть.
Если остались вопросы или хочется видеть больше уроков, обязательно оставляйте комментарии.
Материал подготовлен школой Pixel. У нас дети и подростки изучают Scratch, Lua, Python, C#, JavaScript а также создают игры, программируют веб-сайты, делают 3Д-модели и компьютерную графику. Если ребенок 6-8 лет или старше интересуется Скретчем, обязательно заглядывайте: научим его уверенно использовать среду и выполнять даже сложные проекты. Это заложит основы дальнейшего обучения программированию.