Как устроена 
компьютерная игра

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

  • Начнем с того, что в этой игре должен быть некий главный объект, или " герой", которым можно управлять.
  • Управление осуществляется с помощью клавиш, мыши, джойстика или какого-то другого внешнего устройства.
  • Управлять "героем" можно до тех пор. пока не будет достигнута цель игры.
  • Целью игры, как правило, является определенное количество столкновений, которые герой должен осуществить (или избежать) самостоятельно, или же с помощью некоего вспомогательного объекта (оружия, мяча, палки или какого-то другого предмета).
  • В игре должен быть видимый или спрятанный счетчик столкновений, с помощью которого можно определить победу.
  • Чтобы не дать "герою" победить, в игре обязательно должно быть препятствие:  враги или же какая-то "запретная зона" - область игрового поля, где "герою" или его оружию нельзя находиться. 
  • Если "герою" не удалось преодолеть препятствие, игра заканчивается поражением.
  • Таким образом, результат игры - это победа или поражение "героя", и этот результат должен быть объявлен при завершении игры.

Давайте рассмотрим в качестве примера игру в простой пинбол.

Игра - простой пинбол

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

  • Как вы уже догадались, "героем" этой игры является планка, которую можно двигать с помощью мыши.
  • У "героя" есть "оружие" - это мяч, которым он сбивает красные блоки.
  • Внутренний счетчик фиксирует количество столкновений мяча с блоками.
  • Когда все блоки будут сбиты, появляется сообщение: "You Win" - "Ты выиграл"
  • Если мяч коснется препятствия - нижней границы экрана, обозначенной желтой полосой, то на экране появится сообщение "Game Over" - "Игра окончена".

Создаем игру шаг за шагом

Шаг 1.  Игровое поле​.

  • Не думайте, что игровое поле появляется в игре само по себе. Его нужно создать в самом начале программы, то есть определить размеры игрового экрана (его ширину и высоту), и создать фон:  залить экран каким-либо цветом или же поместить в качестве фона подходящее изображение. Я решил использовать для заливки просто черный цвет.
  • Кроме того, в верхней части экрана я расположил кнопки для запуска, паузы и остановки игры, а также полноэкранного режима. Можете проверить, как она работает!
  • Возможно, что не все эти кнопки будут нам нужны, показывать их или нет - зависит от желания самого программиста - создателя игры. 

Шаг 2.  Мяч, отскакивающий от границ.

  • Для этого нам понадобится изображение мяча, которое мы поместим на игровое поле. О том, откуда оно берется, мы поговорим позже, а пока что посмотрим, как работает фрагмент программы. управляющий его движением.
  • Мяч начнет двигаться по экрану, когда мы нажмем на него мышкой.
  • При каждом новом нажатии он будет двигаться в направлении, которое задается случайным числом.
  • Движение мяча будет постоянным до тех пор, пока игра не остановится.
  • Скорость движения мяча можно регулировать числом его "шагов". Чем больше - тем быстрее.
  • Если мяч коснется края экрана, он "оттолкнется" от него и продолжит движение в противоположную сторону.
код Scratch

Пришло время! Добро пожаловать в Sctatch! Вперед!

Среда программирования Scratch

Для создания игр на Scratch у вас есть три возможности.

  1. Зарегистрироваться на официальном ресурсе Scratch и получить доступ к среде программирования онлайн. Там вы можете сохранять свои проекты и делиться ими с другими участниками. Перейти на этот ресурс можно по ссылке.
  2. Скачать отсюда и установить на своем компьютере оффлайн редактор Scratch .
  3. Скачать и установить на своем компьютере продвинутую среду программирования на Scratch TurboWarp (рекомендую!).
  4. В любом из этих приложений вы можете выбрать свой язык интерфейса и команд. В начале работы мы будем пользоваться русским, но впоследствии перейдем на международный язык программирования - английский. Тем более, что создавать программы на Python можно только на английском. 
  5. Для работы в редакторах вам не потребуется специальное руководство. Интерфейс этих приложений очень прост, интуитивно понятен и основан на принципе "to scratch", что в точном переводе означает "царапать", а в современном компьютерном лексиконе - "тащить мышкой, двигать, перемещать по экрану" и т.п.
  6. В отдельных случаях, когда выбор той или иной команды не совсем очевиден, я буду давать вам подсказку, где найти и как записать такой фрагмент программного кода.

Desktop-приложения 
для работы в Scratch

Классический редактор Scratch версии 3.29.1

Продвинутый редактор TurboWarp 

Шаг 3 Создаем игровое поле​.

  • Откройте редактор Scratch, нажмите на ведерко с крестиком на иконке Кота   и удалите этот спрайт, он нам не нужен. 
  • Затем перейдите в окошко Сцены (справа от Кота) и нажмите на иконку Фонов
  • В окошке Заливка выберите черный цвет.
  • С помощью инструмента Прямоугольник  нарисуйте на экране черную фигуру и растяните ее так, чтобы покрыть ею все игровое поле.
  • Если вам не нравится черный фон, можете выбрать любой другой цвет по своему вкусу. 
  • Обратите внимание, что размеры игрового поля нам задавать не нужно. "По умолчанию" это поле уже создано в редакторе Scratch, и его размеры составляют 480 пикселей в ширину и 360 - в высоту. Изменить эти значения классический редактор Scratch не позволяет. Зато при необходимости это можно сделать в редакторе TurboWarp, с которым мы начнем работать немного позже.

Шаг 4.  Создаем спрайт мяча.

  • В окне Спрайтов найдите на линейку и нажмите Выбрать спрайт.
  • Откроется окно выбора спрайтов. Щелкните по изображению мяча.
  • Мяч появится в окне Костюмов
  • Выберите мышкой тот "костюм", который вам по вкусу.
  • Установите размер спрайта равным 70.

Шаг 5. Создаем код движения мяча

  • Лично мне нравится зеленый "костюм" мяча, поэтому остальные "костюмы" я удалил, чтобы не загружать память компьютера лишней информацией.
  • Затем я нажал на иконку спрайта мяча, и в окне Код выбрал из левой панели инструментов главную команду запуска программы и присоединил к ней планку с кодом установки мяча в нужное мне положение.
  • После этого в том же окне Код создаем следующий фрагмент программы:
  • Как вы уже могли догадаться, этот код будет выполняться при нажатии мышкой на спрайт мяча.
  • Мяч должен повернуться в направлении, которое задается случайным числом от нуля до 360 градусов. То есть, куда он полетит в первую секунду - мы не знаем, ведь случайность - это один из  принципов любой компьютерной игры.
  • Далее следует так называемый цикл, который будет повторяться бесконечно, то есть, пока мы не остановим его.
  • Задаем скорость движения мяча - 7 шагов. Вы можете уменьшить или же увеличить это число, как вам захочется.
  • И наконец, если мяч касается края игрового поля, он должен оттолкнуться и полететь в противоположном направлении.

Шаг 6.  Проверим работу нашей программы.

  • Запустите программу с помощью зеленого флажка над игровым полем справа. 
  • Если вы сделали все правильно, то результат работы должен быть таким, как показано на одной из предыдущих страниц.
  • Если возникли затруднения - сравните ваш проект с моим, который находится здесь

Шаг 7.  Создаем планку для игры в пинбол.

  • Для этого нам нужно создать новый спрайт. Делается это просто: выбираем в окне спрайтов на линейке пункт Нарисовать и попадаем в окно графического редактора.
  • Рисуем планку помощью инструмента Прямоугольник и заливаем её выбранным цветом. 
  • Переходим в окно кодирования для планки и вставляем в него следующий код:
  • При запуске игры устанавливаем планку в нужном месте и запускаем бесконечный цикл. 
  • В этом цикле планка всегда будет находиться на высоте -150 пикселей (считая от центра игрового поля) и всегда будет следовать за курсором мыши в горизонтальном направлении (по оси х).

Шаг 8. Создаем код столкновения мяча и планки.

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

Шаг 9.  Добавляем звук.

  • Давайте сделаем так, что при столкновении мяча с планкой будет проигрываться какой-нибудь звук. Это делает игру более привлекательной.
  • Для этого в спрайт мяча мы вставим команду Включить звук. Эта команда должна выполняться в том же бесконечном цикле, который проверяет факт столкновения. 
  • Чтобы добавить звук, вам нужно открыть вкладку Звуки и Выбрать звук из библиотеки Scratch.
  • Прежде, чем выбрать звуковой клип, вы можете прослушать его звучание. Для этого у каждого клипа есть кнопка проигрывателя - белая стрелка в сиреневом кружке, как у обычного плеера.

Шаг 10. Создаем исходный блок.

  • Пришло время создать 12 красных прямоугольников, которые нужно разместить в верхней части игрового поля.
  • Создайте новый спрайт с именем блок и нарисуйте в редакторе костюмов прямоугольник размером 64 х 24 пикселя.
  • Сейчас и на будущее: размер клетки в редакторе составляет
    4 х 4 px.
  • Необходимо совместить центр прямоугольника с центром экрана редактора.
  • Для этого выделите фигуру полностью с помощью инструмента Выбрать и перетащите ее мышкой в центр экрана.
  • Залейте фигуру красным цветом.

Шаг 11. Размещаем блоки на игровом поле.

  • Самый простой, казалось бы, способ разместить блоки - это создать еще 11 дубликатов исходного спрайта и перетащить их мышкой по одному в нужную позицию. Но мы этого делать не станем - это непрофессионально!.
  • В программировании существует понятие цикла, то есть, повторения какой-либо операции заданное число раз. Мы уже использовали бесконечный цикл, а теперь нужно задать в цикле определенное количество повторений.
  • Для того, чтобы создать нужное количество копий, спрайт должен создать клоны самого себя.
  • При запуске игры мы прикажем спрайту показаться.
    Вы спросите - зачем? 
  • Дело в том, что в конце выполнения этого кода мы его спрячем.
  • Затем установим спрайт в исходную позицию x = -200 px и y = 160 px.
  • Поскольку нам нужны 2 ряда блоков, то выберем из секции Управление команду повторить и установим количество повторений равное 2.
  • То, что должно повториться дважды находится во внутреннем, или вложенном цикле, который повторяется 6 раз. 
  • Здесь спрайт создает клон самого себя и  по умолчанию (поскольку мы не задали ему другого направления) движется 80 шагов вправо.
  • Таким образом, первые 6 клонов разместятся в верхнем ряду на равном расстоянии друг от друга. Это расстояние я рассчитал опытным путем, и задал число шагов равное 80.
  • Когда вложенный цикл завершится, то управление программой перейдет ко внешнему циклу, который должен повторить свое действие второй раз. 
  • Но кое-что внешний цикл должен выполнить прежде, чем управление будет передано вложенном циклу:  вернуть спрайт в исходную позицию по оси х и переместить его на 40 пикселей вниз по оси y.
  • Вторая итерация (повторение) вложенного цикла разместит 6 следующих клонов в нижнем ряду.
  • А что же произойдет с самим спрайтом? - Мы его попросту спрячем за ненадобностью.

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

Шаг 12. Создаем счетчик попаданий мяча в клоны блока.

  • На линейке инструментов выбираем секцию Переменные и в ней - кнопку Создать переменную.
  • В поле Имя новой переменной пишем слово счетчик.
  • Наш счетчик готов. Он будет увеличиваться на единицу всякий раз, когда мяч коснется одного из клонов.
  • Когда число попаданий станет равным 12, игра закончится победой игрока.

Шаг 13. "Когда я начинаю как клон".

  • Давайте посмотрим, как работает одна из самых необычных команд в Scratch, которая находится в секции Управление и называется " когда я начинаю как клон"
  • Прежде всего, обратим внимание на слово "начинаю". Оно не совсем точно отражает то, что будет происходить в нашей игре и может ввести вас в заблуждение. Наши клоны не "начинают" действовать, они лишь реагируют на столкновения с мячом.
  • В этом случае нам лучше понимать эту команду как "когда я начинаю вести себя как клон" или же "реагировать на события как клон" .
  • Нам понадобится блок оператора "если", в который нужно вставить условие касания блока с мячом из секции Сенсоры.
  • Этот оператор будет повторяться постоянно в течение всей игры.
  • В случае касания мы должны спрятать этот блок и можем включить какой-нибудь звук и слегка понизить его громкость (если нужно).
  • Будем считать попадания мяча в блок, изменяя счетчик на 1 при каждом попадании.
  • Сразу же после изменения значения счетчика мы должны проверить, не равно ли его значение 12. 
  • Если результат проверки окажется истинным (то есть, равным 12), то передадим сообщение о победе.

Шаг 14. Кому предназначено сообщение о победе?

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

Шаг 15. Создаем "запретную зону"

  • Новый спрайт с именем "препятствие", расположенный в позиции x = 0 и y = -180,  это простой желтый прямоугольник, который мы должны нарисовать в редакторе костюмов. 
  • Перейдите на следующую страницу, где показан код для этого спрайта.
  • Две команды, которые мы добавим к условию столкновения мяча с препятствием - это играть звук и передать сообщение о том, что игра окончена.

Шаг 16. Кому предназначено сообщение о конце игры?

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