Как сделать кликер на Scratch с нуля – урок для детей

Сделать игру кликер в Scratch – это просто. Хотим доказать и предложить наглядную пошаговую инструкцию со скриншотами: с ней справится даже новичок. Сразу отметим, что для успешного выполнения проекта желательно понимание Скретча: если есть опыт работы в программе или в Scratch Junior, все получится.

Мы в онлайн-школе Pixel используем Scratch для обучения блочному программированию детей 6–12 лет и реализуем две программы: первая предназначена для дошкольников и младших школьников, а вторая ориентирована на более опытных ребят. Но сегодня не об этом: хотим предложить мини-урок, который поможет разобраться, как сделать кликер в Скретче.

Заинтересуем и подчеркнем, что действующий персонаж будет представлен хомяком, как в Hamster Combat – игре в соответствующем жанре, которая успела покорить сердца миллионов детей, подростков и даже взрослых. 

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

Как создать кликер в Скретче 3.0: пошаговая инструкция

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

Шаг № 1: заходим на платформу и начинаем создание игры

По умолчанию базовый объект в каждом новом пустом проекте в Scratch – спрайт кота.

Наш сегодняшний кликер, что отмечено, будет с персонажем из Hamster Combat. Основная задумка проекта – наличие трех уровней, поэтому нам потребуется аналогичное количество костюмов. Предлагаем начать с их создания.

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

1. Удаляем спрайт кота.

2. Загружаем костюмы хомяка.

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

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

Теперь выбираем фон. Потребуется:

1. Кликнуть на соответствующую кнопку справа снизу.

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

Шаг № 2: создаем дополнительные спрайты

Наш clicker в Scratch требует создания первого дополнительного спрайта – бонусных очков. Они будут показываться и отображаться при каждом очередном нажатии на хомяка.

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

1. Выбираем кисть. После этого откроется поле для создания костюмов.

2. Кликаем на инструмент «Текст», пишем +1.

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

Теперь подготовим новые костюмы для созданного спрайта. Это +2 и +4. Принцип прост: мы создаем основу увеличения очков в виде срабатывания бонусного условия и последовательного удвоения условных вознаграждений.

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

Теперь перейдем к созданию дополнительного объекта – кнопки. По ней мы будем кликать мышкой, когда нужно приобрести бонус. 

Так, представленная кнопка предназначена для покупки условной опции в виде увеличения бонуса. Суть такая: при нажатии цена клика станет повышаться. Но не бесплатно: сначала придется отдать часть накопленных очков.

Добавить требуемую кнопку можно следующим образом:

1. Кликаем на котика справа снизу.

2. Выбираем объект, как на скриншоте.

3. Пишем текст. Необходимо отметить, что клик умножается на 2 по текущей цене, скажем, установленной на уровне 10 условных единиц.

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

Шаг № 3: пишем код с помощью блочных конструкций

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

Предлагаем начать с персонажа. Шаги:

1. Переходим к блоку «События».

2. Используем «Когда флажок нажат».

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

Теперь давайте создадим пару переменных. Они пригодятся для хранения важной информации о:

• Действии бонуса;

• Текущем счете.

Давайте сделаем соответствующие переменные и установим начальные значения. В случае с бонусом это 1, а со счетом – 0.

Дальнейшие действия:

1. Переходим в блок управления.

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

3. Добавляем условие «Если». В нем нужно установить вводное требование такого вида: клик мышью на спрайт приводит к добавлению очков.

4. Идем в операторы и находим «И». Этот элемент потребуется для сложения двух частей обозначенного условия.

5. Находим в сенсорах клик мышью и касание персонажа.

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

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

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

Требуемые шаги:

1. Переходим во вкладку «Движение».

2. Меняем Y на 10 перед блоком ожидания.

3. Вписываем в координату значение -10.

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

1. Используем «Сообщение из событий».

2. Нажимаем на «Передать сообщение», устанавливаем клик и вывод соответствующей информации.

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

Требуемые действия:

1. Используем блок управления.

2. Скриптим создание клона и начало в соответствующем качестве.

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

4. Дополнительно устанавливаем передвижение в X в течение одной секунды. Давайте установим значение +200.

Аналогичным образом поработаем с Y. Пригодится операция сложения.

Кликнем на зеленый флажок, чтобы проверить программу. Плюсики полетели вверх? Отлично! Но заметна ошибка: иконки появляются за персонажем. Исправить это просто: давайте зайдем во вкладку «Внешний вид» и добавим «Перейти на передний слой». Дополнительно потребуется использовать команду «Удалить клон»: она поможет исключить зависание плюсиков на экране. В результате соответствующие игровые объекты будут беспрепятственно покидать активную область кликера. 

Шаг № 4: дорабатываем программу кликера на Scratch 

Нами созданы различные объекты и части программы, но до идеала далеко: кликер требует совершенствования. В первую очередь предлагаем создать зависимость. Переменная «Бонус» должна быть связана с вылетающей картинкой. Речь о следующем: если имеем бонусную единицу, появляется изображение +1, и т. д.

Выполним такие действия:

1. Перейдем к «Событиям».

2. Добавим «Когда флажок нажат» и сделаем скрипт повторения вида «Если, то».

3. Создадим условие: если бонус равен 1, костюм меняется на +1.

Теперь потребуется продублировать блок «Если» и внести незначительные изменения. На примере спрайта хомяка на скриншоте ниже показан требуемый блочный код.

Важно запрограммировать кликер так, чтобы при бонусе +1 хомячок был без одежды, при +4 – в очках и т. д. Достаточно:

1. Взять уже написанную программу из первого спрайта.

2. Перетащить ее в окошко кода, предназначенного для хомяка.

3. Изменить костюмы, как на скриншоте. 

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

Шаг № 5: дорабатываем кнопку

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

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

Действия:

1. Идем в операторы, применяем два блока и соединяем так, как показано на скриншоте.

2. Внутрь добавляем сенсоры и пишем «Касается указатель мыши».

Дополнительно потребуется добавить части кода, как на скрине ниже: они будут отвечать за проверку. 

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

Вот что потребуется сделать:

1. Выбираем «Задать значения из панели переменных».

2. Применяем операторы «Умножение» и «Вычитание».

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

1. Использовать «Ждать 1 секунду» из панели управления.

2. Применить «Показаться и «Спрятаться».

Осталось ограничить количество доступных бонусов тремя условными уровнями. Необходима конструкция «Если». Условие: бонус равен 4, кнопка покупки прячется.

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

Если все сделано верно, то при кликах мы будем получать прибавку к балансу. Надеемся, что все работает. 

Видеоурок создания кликера на Скретче для новичков

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

• На Rutube;

• На YouTube.

Разницы нет: выбирайте любую удобную платформу и начинайте смотреть видеоурок создания кликера в Scratch. Будет интересно! 

Отметим, что в обучающем ролике преподаватель школы Pixel не только подробно рассказал о реализации проекта кликера с хомяком из нашумевшей игры Hamster Combat, но и показал, что и как именно нужно делать. С уроком справится даже ребенок без опыта в блочном программировании.

В завершение хотим попросить посвятить нам одну минуту и поделиться опытом: удалось ли справиться с проектом? Если нет, то обязательно расскажите, что вызвало трудности.

Материал подготовлен школой программирования Pixel. Если блочный кодинг увлекает, хочется освоить Scratch, приглашаем на курс для детей 6–9 и на онлайн-занятия для ребят от 8 до 12 лет.