Как сделать игру Танчики на Scratch

Кружок «Робикс» приветствует вас на новом уроке по разработке игр для начинающих. Сегодня мы самостоятельно создадим вариант одной из самых культовых игр – Танчики. Особенность этой игры – мультиплеер, вы не только сами ее напишите и сделаете дизайн, но и сможете протестировать вместе с другом. Попробуем?

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

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

Полезные ссылки из нашей базы знаний:

• Интерфейс и инструменты Scratch
• Что такое спрайт?
• Блоки движения
• Условия в Scratch

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

Немного о Танчиках

Первая версия игры вышла в 1985 году в Японии и называлась она «Battle City». Уже больше 35 лет назад! Эта игра была для приставок, ее компьютерная версия вышла спустя несколько лет. Однако «Battle City» не пользовалась популярностью на родине. Зато в России – это настоящий символ эпохи. В 90-е годы появилась «пиратская» версия, сделанная в Китае – «Tank-1990», именно она произвела фурор и получила народное название «Танчики». С тех пор как вышла первая версия, разработчики перевыпускают улучшенные версии игры и насыщают ее дополнительными функциями. Забавно, что «Танчики» сохранили свой интерфейс, даже в самых последних современных версиях, где по карте передвигаются 3D танки, мы узнаем прототип 1985 года. Игрок смотрит на поле боя сверху вниз, а на экране – танки разных команд и препятствия.

Создаем первый танк

Обязательно проследите, чтобы центр вашего танка — синий плюсик- сходился с центром поля (Рис. 5), потому что иначе танк потеряется в пространстве, запутается, а мы вместе с ним.

Давайте закончим оформление нашего танка настройками. На панели спрайтов есть есть графа для ввода, сейчас там написано «Спрайт 1». Мы предлагаем сразу изменять имена, чтобы в процессе программирования не путаться. Мы назовем наш спрайт – Танк 1, можно использовать свое имя и имя друга. Если вам покажется, что танк слишком большой и занимает много места на сцене, на этой же панели есть настройка размера. Базово это значение 100 (%), но мы предлагаем уменьшить до 50.

Когда рисунок будет готов, переходите во вкладку «Код» (сверху слева).

Настройки танка

Давайте закончим оформление нашего танка настройками. На панели спрайтов есть есть графа для ввода, сейчас там написано «Спрайт 1». Мы предлагаем сразу изменять имена, чтобы в процессе программирования не путаться. Мы назовем наш спрайт – Танк 1. Но вы можете использовать свое имя или имя того, с кем вы хотите сыграть.

Если покажется, что танк слишком большой и занимает много места на сцене, на этой же панели есть настройка размера. Базово значение 100 (100%), но мы предлагаем уменьшить до 50.

Когда рисунок будет готов, переходите во вкладку «Код» (сверху слева).

Учимся управлять танком

Научим наш танк передвигаться по сцене. Для того, чтобы это сделать переходим в группу «События» (слева) и выбираем блок «Когда зеленый флажок нажат». Именно эта кнопка запускает игру. Перетаскиваем его на рабочую панель справа. Мы будем перемещать сюда все блоки кода. Блоки магнитятся, достаточно приблизить их друг к другу.

Обратите внимания, что блоки разной геометрической формы – это подсказка. Если в блоке отверстие в виде ромба, то ни квадратный, ни круглый блок туда не подойдут. Нужно искать условие в соответствии с формой. 

Далее: группа «Управление» и перетаскиваем блок «Повторять всегда».

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

Добавляем внутрь нашей конструкции еще одно условие из группы «Управление»: «если , то».  Дополнения условий хранятся в группе «Сенсоры». Посмотрите, их края в виде ромбов, такие же, как в отверстие блока «если, то».  То, что надо! Наш первый танк будет управляться при помощи стрелок, поэтому мы перетаскиваем блок «клавиша нажата», а вместо пробела выбираем «стрелка вверх» (Рис. 7.).

Стрелка вверх – это движение вперед. Переходим в группу «Движение» и выбираем «идти 10 шагов».  Получилось, что если «клавиша стрелка вверх нажата», то наш танк «идет 10 шагов». Повторяем условие для всех направлений движения. Обратите внимание, что для движения назад значение должно быть отрицательным: «идти -10 шагов», танк как будто отталкивается назад. Для движения в стороны выбираем блоки «повернуть на 15 градусов». У нас получилась такая структура (Рис. 8.).

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

Направление движения

Уже на этом этапе, вы можете нажать на зеленый флажок и покрутить танк с помощью стрелок. Если мы все сделали правильно – танк зашевелился по сцене. Он отлично крутится в стороны, а вот вперед-назад ходит как-то странно, верно? Давайте разбираться.

Чтобы прервать выполнение всех скриптов, используем красную кнопку рядом с зеленым флажком.

Если нажать на кнопку «Направление» в панели спрайтов, то вы увидите круг и стрелку. Стрелка показывает, куда на самом деле смотрит спрайт. Сейчас он смотрит по диагонали вправо, поэтому для него вперед и назад – это движение по диагонали, несмотря на то, что дуло смотрит совсем в другую сторону (Рис. 9.).

Как же это исправить? Нам нужно снова перейти во вкладку «Костюмы», выделить танк с помощью стрелки и покрутить его так, чтобы синхронизировать направление дула и стрелку на кружке справа, как показано на Рис. 10. Готово! Теперь танк правильно двигается во все стороны.

Поле боя

Танку необходима база. Давайте займемся сценой и нарисуем препятствия (стены и лабиринты).

Справа от панели спрайтов находится панель «Сцена», щелкаем на нее. Сверху место вкладки «Костюмы», появилась вкладка «Фон», выбираем ее и автоматически перемещаемся в режим рисования – сейчас будем строить.

Конфликт (взаимодействие/столкновение) между предметами в гейм-деве называется коллизия. Мы будем обрабатывать коллизию по цвету, то есть цвет стены должен быть уникальным. Если цвет танка и стены будет одинаковым, то могут возникнуть проблемы. Мы выбрали цвет и при помощи «Прямоугольника» нарисовали стену.

Обрабатываем коллизию

Переходим во вкладку «Код» и два раза щелкаем по танку. Если мы сейчас попробуем его подвигать, то увидим, что танк игнорирует препятствие и наезжает на стену, как будто это плоский рисунок на полу, а не объемное сооружение. Не дела…

Добавляем нашему танку еще одно условие из группы «Управление»: «если , то». Оно должно стоять внутри предыдущего! Заходим в группу «Сенсоры» и выбираем условие «касается цвета» (добавляем нужный — можно воспользоваться пипеткой). У нас получилось двойное условие: если стрелка вверх нажата, то танк едет вперед, и если танк идет вперед, он касается нашего запрещенного цвета, то он не может продолжать движение и идет назад (Рис. 12).

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

Стена может заблокировать наши действия, поэтому танк должен отталкиваться от нее, пружинить. Чтобы не попасть внутрь стены, в условии касания нужно прописать бОльшее количество шагов, чем в первом значении. Например, если по стрелке вверх танк делает 10 шагов, то касаясь запрещенного цвета, он едет 12 назад, чуть отпрыгивает.

Теперь наш танк не сможет заехать внутрь стены. Вы можете нарисовать любое количество стен или сделать игровое поле с лабиринтами. Главное – танку нужно место для движения!

Переходим к стрельбе

Чем стреляет танк? Вообще у этой техники свои специальные танковые снаряды, но чтобы скорее начать играть, мы нарисуем нашему танку ядра. Давай создадим новый спрайт, который так и назовем – Ядро 1. В нашем случае это просто красный круг, но вы можете включить фантазию и изобразить полноценный танковый снаряд!

Логика движения ядра

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

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

Этот блок должен быть отдельно от блока «повторять всегда», так как ядро прячется один раз в начале игры и никогда не показывается.

Переходим в группу «Управление» и выбираем «повторять всегда». Из группы «Управление» вновь берем условие «если, то» и в «Сенсорах» выбираем «клавиша нажата». Этой кнопкой будет стреляться наш танк. Мы выбрали пробел.

Наше основное ядро спрятано, поэтому в тот момент, когда мы будем стрелять, по условию будет создаваться его клон. Переходим обратно в группу «Управление» и выбираем «создать клон самого себя».  

Условие для клона ядра

Следующие условия мы будем задавать клону. Нам нужно синхронизировать положение Ядра 1 и положение Танка 1. В группе «Управление» выбираем блок «когда я начинаю как клон» и из группы «Внешний вид» обязательно добавляем «показаться», ведь на предыдущем шаге мы спрятали наше ядро. Переходим в группу «Движение» и выбираем: «перейти в x…, в y..». Вместо каких-либо значений, нам нужно задать унаследование от Танка 1. Для этого переходим в «Сенсоры» и выбираем блок (Рис. 16.). Добавляем его в оба кружка. Сначала меняем от кого – в нашем случае «Танк 1», а затем выбираем переменную – x, а затем y. Должно получится вот так (Рис. 17.).

Но ядро должно и лететь в направлении танка, поэтому из группы «Движение» выбираем «повернуть в направлении» и вновь вместо значения добавляем блок из группы «Сенсоры» (см. Рис. 16).  Направление наследуется от Танка 1.

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

Касания ядра

Из группы «Сенсоры» добавляем условия: «касается край», «касается цвета» (цвет наших стен) и последнее условия должно относится к Танку 2. Самое время его создать. Но сначала закончим с ядром, а пока оставь последнее условие пустым.

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

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

Давайте скорее настроим второй танк и попробуем пострелять!

Создаем второй танк

Чтобы на нашей сцене появился второй танк, продублируем первый. Нажимаем на него правой кнопкой мыши и выбираем «Дублировать».

На экране появился второй танк, но пока они двигаются одновременно, потому что оба настроены на движение по стрелкам. Сейчас мы это исправим. Но сначала давай поменяем название спрайта на Танк 2 (или имя) и попробуем пострелять! Возвращайся в код Ядра 1, и добавь в условие – «касается Танк 2».

У нас все заработало и Танк 1 стреляет, а у вас?

Давайте поработаем над дизайном Танк 2 – изменим его цвет и кнопки управления.

Чтобы изменить цвет, нажимаем на второй танк, выбираем «Костюм» и с помощью заливки изменяем цвет. Проверьте, чтобы центр этого танка также совпадал с центром поля!

Если первый танк у нас двигается с помощью стрелок, то второй будет двигаться классическим сочетанием букв – WASD. (w – вверх, s – вниз, a – лево, d- право). Нам практически не нужно менять код, осталось только заменить стрелки на буквы (Рис. 22).

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

Осталось научить его стрелять и оба танка будут на равных. Для этого дублируем снаряд правой кнопкой мыши на панели спрайтов. Весь код у второго снаряда остается неизменным, кроме того, что Танк 2 будет стрелять не пробелом, а другой кнопкой (мы выбрали цифру 1) и наследовать данные от Танка 2, а касаться не может Танка 1.

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

Жизни

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

Переменные

Переходим в группу «Переменные» и нажимаем «Создать переменную». У нас их будет две – Жизнь 1 (для Танка 1) и Жизнь 2 (для Танка 2). Эти переменные можно ввести в любой участок кода, любого спрайта. Мы выбрали Ядро 1 и добавили переменные со значением 3 – у каждого танка по 3 жизни. В группе «Переменные» выбираем «задать .. значение».

Наши переменные уже отображаются в верхнем левом углу сцены.

Условие для ядра

Когда ядро касается вражеского танка, жизни должны уменьшаться. Давайте введем условие, при котором от касания ядра будут зависеть количество жизней танка. Для этого выберем наш Танк 1 и дополним его основной блок. Заходим в группу «Управление» и выбираем условие «если, то». Будьте внимательны, блок должен находится внутри «повторять всегда», но не попадать в остальные.  

Далее переходим в «Сенсоры» и выбираем «касается». Для Танка 1 вражеское Ядро 2. Значит именно их он боится. В группе «Переменные» выбираем блок «изменить на». Танку 1 соответствуют Жизни 1, поэтому выбираем их, а в значении пишем -1. То же самое пишет для Танка 2, меняя условия на Ядро 1 и Жизни 2. 

Коллизия взаимодействия может сработать несколько раз за короткий промежуток времени и отнять сразу все жизни у нашего танка, поэтому мы добавим небольшую задержку. Создадим ее искусственно, добавив в код условие «ждать 0.1 секунд». Переходим в группу «Управление» и выбираем нужное условие (Рис. 26).

Теперь, когда мы стреляем, количество жизней в переменных уменьшается. Если вы не хотите заниматься сердечками, то переходите к заголовку Winner! Но мы рекомендуем выполнить все части урока Танчики на Scratch. Показатель количества жизней есть в каждой игре и уметь их писать — универсальный навык.

Рисуем сердечки

Создаем новый спрайт и рисуем. Жизни могут быть и в виде звездочек, и в виде кружочков. Всего у этого спрайта должно быть 4 костюма: 1 костюм – 3 сердечка, 2 костюм – 2 сердечка, 3 костюм – 1 сердечко и 4 костюм – без сердечек.

Чтобы продублировать сердечки используем кнопки скопировать и вставить (Рис. 27.), а костюм размножим с помощью кнопки «Дублировать», нажатием правой кнопкой мыши на костюм слева (Рис. 28).

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

Мы хотим, чтобы сердечки отображались четко над танком. Переходим во вкладку Код. Начинаем с базовой схемы: «Событие» -> «когда зеленый флажок нажат», «Управление» -> «повторять всегда». Далее переходим в группу «Движение» и выбираем «перейти к x..,y…». В качестве условий мы возьмем знакомый нам блок (Рис. 16.) и добавим его и к «x», и к «y».

Фиксируем уровень жизни над танком

И положение x, и положение y, наши сердечки наследуют от Танка 1. Но если мы закрепим сердечки, то увидим, что при поворотах они наезжают на танк и их практически не видно, поэтому мы решили их немного приподнять. Для этого заходим в «Операторы» и выбираем блок с +. Положение по y необходимо достать, а на его место поставить оператора: в первой области написать цифру – на сколько приподнимутся наши сердечки, а во вторую область вернуть зависимость от положения y. Вот что у нас получилось (Рис. 29).

Дублируем костюм с сердечками для второго танка с помощью клика правой частью мыши и меняем название спрайта на Жизни 2. В коде меняем положения от Танк 1 на Танк 2.

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

Сердечки = жизни

Выбираем спрайт Жизнь 1 и добавляем новый кусок кода. Начинаем как всегда: «Событие» -> «когда зеленый флажок нажат», «Управление» -> «повторять всегда». В той же группе «Управление» выбираем условие «если, то». Заходим в группу «Операторы» и выбираем форму в виде ромба со знаком равно. В первой части у нас должна быть переменная. Заходим в группу «Переменные» и перетаскиваем Жизни 1.

После знака = пишем цифру 3. После этого заходим в группу «Внешний вид» и выбираем «изменить костюм на ..» И выбираем тот номер костюма, на котором изображено 3 сердечка. Теперь мы можем продублировать условие «если, то» еще 3 раза, и поменять количество жизней и номера костюмов. В конце последнего условия, когда количество жизней ровно 0, нам нужно не только сменить костюм на тот, у которого нет сердечек, но и добавить из группы «События» — «Конец игры». У нас получился вот такой код (Рис. 32).

Дублируем эту часть кода для спрайта Жизни 2.  

Для того, чтобы переменные поспели за циклом и успели обновиться, нам нужно поставить перед ним маленькую искусственную задержку. В группе «Управление» выбираем блок «ждать 1 секунду». Но целая секунда для нас много, сократим до 0.1.

Не забывайте, что у нас 2 цикла с сердечками. Нужно добавить задержку и в Жизни 1, и в Жизни 2.

Winner!

Нам осталось вывести на экран имя победителя. Сделаем это в настройках сцены.  Для этого нажимаем на панель «Сцена» рядом с панелью спрайтов.  Переходим во вкладку «Фоны» и дублируем их. Всего у нас получится 3 фона – основной и 2 фона для победителей.

Выбираем текст и на одном пишем – «Победил игрок 1», а на втором – «Победил игрок 2». Если вы знаете с кем будете играть, можно ввести ваши имена или забавные псевдонимы.

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

Объявляем победителя

Но ведь в конце игры фон должен измениться? Да! Для этого в группе «События» выбираем «когда я получу конец игры», а в «Управлении» выбираем условие «если, то, иначе». Обратите внимание, что у этого блока два условия, он отличается от тех, что мы использовали ранее.   

Эта часть работы похожа на наше решение с костюмами. Фоны также зависят от количества жизней. В группе «Операторы» выбираем блок со знаком больше (>) и добавляем в условие. На первом месте ставим Жизни 2, а на втором Жизни 1. Получается, что если в момент окончания игры значение переменной Жизни 2 больше, чем Жизни 1 победил Танк 2, и именно это нам должен сообщить фон.

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

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

 

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

Дублируем это условие к обоим танкам и снарядам.

Ну что, пробуем? Нам кажется, что получилось здорово.

Если у вас еще остались силы, предлагаем выполнить задание под звездочкой и добавить респаун (англ. respawn) – место возрождения наших танчиков в начале каждой новой игры.

(*)Респаун

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

Координаты выбирайте любые.

Финал

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

Дальше вы сможете усложнить игру и придумать новые уровни, добавить больше стен или лабиринтов, сделать несколько типов снарядов. А можно подключить третьего игрока! Удачи!

Еще больше игр на Scratch на нашем онлайн-курсе! Итог каждого урока — новая игра. На курсе мы создаем змейку, Fruit ninja и даже свою версию легендарного Марио. Почитать о курсе вы можете ЗДЕСЬ.

Рабочая версия проекта по нашей инструкции