Создаем игру «Морской бой» в Scratch для детей

Рассказываем, как школьнику разработать популярный гейм-проект на IT-языке Скретч.

Scratch — ИТ-среда, разработанная специально для ребят. Площадка позволяет реализовывать игры, анимации и рассказы. Команды задаются путем перетаскивания графических блоков. Интерфейс платформы интуитивно понятен и не требует знаний в области кодинга.

Попрактиковаться в программировании в среде Scratch можно при помощи создания классического «Морского боя». Школа разработки «Пиксель» поможет узнать, как это сделать — делимся инструкцией.

Сформируем визуальное оформление — стартуем с фона. Используя «Прямоугольник», зададим светло-голубой цвет ясного неба. Растягиваем фигуру, чтобы она закрыла верхнюю половину экрана. После выбираем темно-синий цвет морских далей. Вытягиваем прямоугольник в нижней части экрана и перемещаем его на бэкграунд.

Рисуем облака. Воспользуемся «Кругом», убрав контур. Выбираем белый цвет для создания маленьких кругов, разнообразных по форме и размеру. Когда круги нарисованы, объединяем их в группы, чтобы вместе те образовали облачные силуэты.

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

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

Теперь разработаем мишень, на которую производится прицел. Нарисуем 2 черные линии, пересекающиеся под 90 градусов. Вокруг линий образуем круг, удерживая Shift. Середина круга совместима с точкой пересечения 2 линий. «Ластиком» удалим лишние элементы.

Находим 2 PNG-картинки кораблей на белом фоне, удаляем фон «Заливкой». Устанавливаем прозрачность: это устранит большую часть. Может остаться белое обрамление, от которого избавимся «Ластиком».

Аналогичные действия выполним и для другого изображения корабля. Можно нарисовать судно самостоятельно или воспользоваться готовыми PNG-картинками.

Реализуем работу пушки, которая выполняет функцию вращения и создает эффект движения мишени.

Задаем алгоритм действий: «Когда флажок нажат» — «Повернуться в направлении 90» — «Перейти в координаты 7 и -190». Пушка должна располагаться по центру в нижней части. Изменим размер до 60%, чтобы изделие занимало меньше места на экране.

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

Воспроизведем настройку координат, установив их на 46 для оси x и -18 для y. Это положение располагается чуть выше пушечного ствола.

Зададим размер мишени, выбрав 30%. Мишень расположена не по центру — скорректируем координаты. Изменим значение на 6 для x и 4 для y.

Воплотим бесконечный цикл, внутри пропишем 5 условий «Если... то». Эти условия займутся управлением движением прицела с учетом пользовательского ввода. Для этого добавлены сенсоры, отвечающие за нажатие клавиш.

Выбираем условия нажатия пробела и стрелок в различных направлениях. Если зажата стрелка вправо, следует увеличить значение x на 3; если влево — уменьшить x на 3. Похожим образом организовано движение по y: при нажатии стрелки вверх значение y увеличивается на 3, а при выборе стрелки вниз — уменьшается на 3. Когда пользователь нажимает пробел, происходит передача сигнала о произведении выстрела, обозначенного как «Сообщение1».

Переименуем судна в «Корабль1» и «Корабль2» для избежания путаницы в коде. Продумаем новую инструкцию для обработки сигнала. Когда мишень контактирует с «Кораблем1», активизируется сообщение 2. А если мишень сталкивается с «Кораблем2» — сообщение 4. Это означает, что по целям нанесен урон, а при нажатии пробела совершен выстрел.

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

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

Составим скрипт, который действует при активации флажка и подразумевает скрытие объекта: «Когда флажок нажат» — «Спрятаться». Цикл повторяется бесконечно: создается корабельный клон и устанавливается пауза в 4 секунды. Перерыв необходим, чтобы судно успело пересечь поле до того, как появится новый экземпляр.

Пропишем команду, которая активируется при выборе «Когда я начинаю как клон». Установим размер клона от 50% до 70%.

Сменим наименования костюмов: до события — 1, после — 2. Переключим костюм на 1. Зададим координаты: x равно 250, а значение y определяется генератором случайных чисел, чтобы каждый раз корабль появлялся из разных точек. Отобразим клон и направим движение в сторону противоположного края на время от 2 до 6 секунд, двигаясь к координате x со значением -250 и y в пределах от -30 до 50.

Если судно касается границы экрана, игра завершается. Установим условие: при соединении с краем отправляется сообщение 3. Зададим команду, срабатывающую при попадании снарядов в корабль.

В момент поступления сообщения 2, требуется сменить костюм на 2 с огнем и дымом. Далее нужно подождать 0,2 секунды, прежде чем удалить клон. Команда посвящена сценарию проигрыша.

Переходим ко 2 кораблю, что плывет с левой стороны и проделывает путь на противолежащий край экрана. Смоделируем дубликат костюма и внедрим элементы огня — как в случае с 1 кораблем. Для упрощения процесса костюмы переименовываем в 2 и 3.

Напишем скрипт со структурой «Когда флажок нажат» — «Спрятаться». Осуществим клон корабля с приостановкой в 3 секунды.

Следующая команда реализуется так: «Когда я начинаю как клон» — костюм меняется на 2. Клон перемещается в координаты: x равен -250, а y находится в диапазоне от -30 до 40. Клон должен появиться и проплыть от 2 до 6 секунд до точки. Если объект затрагивает рамки экрана, отправляется сообщение 3.

Получено сообщение 4 — происходит смена костюма на 3. Затем пауза в 0,2 секунды — и клон удаляется из списка объектов.

В процессе тестирования видно, что клоны возникают с повышенной частотой. Увеличим время задержки с 3 до 4 секунд. Кроме того, размер корабля велик — подредактируем его до 60% от исходного варианта. Обнаружилась и другая ошибка — некорректно указаны координаты финишной точки. Необходимо, чтобы клон в конце пути оказался справа: координата x должна составлять 250, а y — варьироваться от -30 до 50.

Сообщение 3 не отправлено: прибавим таблицу, уведомляющую о завершении игры.

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

Разработаем скрипт окончания игры. При получении сообщения 3 выбираем «Показаться», затем останавливается все. Когда нажата кнопка с флажком, текст должен скрываться. Важно правильно расположить и сообщение на экране — в центральной части с x -1 и y 11.

Протестируем готовую версию: убедимся в работоспособности и корректности выполнения функций.

***

Рекомендуем продолжить обучение Scratch-программированию для детей на тематическом курсе от ИТ-школы «Пиксель». Участники изучают интерфейс и функции программы, знакомятся с терминами. Удастся воплотить «Лабиринт» и раннер, спроектировать меню и использовать искусственный интеллект.

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