Здравствуйте, продолжаем создавать детскую игру на html5 с использованием бесплатной программы Construct 2.


Скачать исходники для статьи можно ниже

Первая часть данного руководства по созданию html5 игры находится по следующей ссылке – Пишем игру на html5 код (часть 1).

Вторая часть данного руководства по созданию html5 игры находится по следующей ссылке – Пишем игру на html5 код (часть 2).

Продолжаем создавать игру.

Переходим сверху во вкладку shapes, открываем вкладку Layers в правой панели, далее кликаем по нашему слою – Layer 0 – и жмем на инструмент в виде карандаша, чтобы переименовать слой – меняем название на background:

Также переименуем в правой нижней панели Objects – спрайт Sprite4 на shapesBG – можно кликнуть по нему правой клавешей мышки и выбрать Rename:

Далее возвращаемся в правую верхнюю панель layers, закрываем замочек напротив слоя background, жмем на кнопку + и добавляем новый слой, после с помощью кнопки “карандаш” переименовываем его в shapes:

Теперь давайте добавим фигуры, которые потом можно будет двигать.

Замочек слоя shapes открыт, а слоя background закрыт. Кликаем дважды левой кнопкой мышки по рабочему полю слоя и добавляем спрайт:

В открывшемся окошке жмем на папочку, выбираем картинку круга, можно скачать с моего сайта:

И после жмем на кнопку Set collision polygon, а далее закрываем – жмем на крестик:

После чего на слое появился круг, маштабируем его (уменьшаем по размеру) и переименовываем в правой нижней панели в circle (кликаем правой кнопкой мышки и выбираем Rename):

Аналогичным образом добавляем квадрат и треугольник:
Картинки для них можно взять с моего сайта:

В итоге получилось следующее:

В правой нижней панели Objects переименовал спрайт квадрата в square, а треугольника в triangle.

Далее в панели Layers закрываем замочек напротив слоя shapes и создаем новый слой (жмем на кнопку +) и переименовываем его в outlines:

Перемещаем слой outlines под слой shapes:

Замочек у слоя outlines открыт, а у остальных слоев закрыт.
Теперь добавляем контуры для фигур, в которые нужно будет перетащить фигуры.

Для этого кликаем дважды левой кнопкой мышки по рабочей области слоя (outlines) и добавляем спрайт:

Картинки для контуров будем брать следующие (можно скачать с моего сайта):

Добаляем контур круга – жмем на папочку и загружаем контур круга:

После нажимаем правую кнопку мышки и выбираем пункт “Set to bounding box” (установить в ограничивающую рамку):

Далее зададим центр изображения – жмем на кнопку Set origin and image point и на всякий случай, чтобы центр установился правильно, кликаем в панельке Image point по строчке Origin правой кнопкой мышки и выбираем пункт Quick assign и подпункт Middle:

А после жмем на крестик:

Уменьшаем и переносим контур круга в нужное место:

Аналогично вставляем контуры квадрата и треугольника, а после переименовываем в нижней правой панеле Objects названия спрайтов (с помощью правой кнопки мышки и выбора пункта Rename):

Так спрайт Sprite7 переименовал в dotCircle.
Так спрайт Sprite8 переименовал в dotTriangle.
Так спрайт Sprite7 переименовал в dotSquare.

Далее добавим ещё спрайты в виде небольших прямоугольников, при столкновении с которыми нужная фигура будет становиться в свой контур.

Для этого снова в данном же слое (outlines) кликаем дважды в рабочей области слоя левой кнопкой мышки и добавляем новый спрайт:

Далее нажимаем на кнопку Fill (заливка) и окрашиваем квадрат в красный цвет, после чего жмем на крестик:

Уменьшаем квадратик и вставляем его в фигуру, задаем размеры 32 на 32, переименовываем в invisSquare и меняем параметр Initial Visibility на Invisible (невидимый):

Аналогичным образом вствялем такие же спрайты в остальные две фигуры и называем их invisTriangle и invisCircle, не забываем установить параметр Initial Visibility на Invisible (невидимый) во всех фигурах:

Теперь добавляем поведение для фигур.

Закрываем замочек напротив слоя outlines и открываем замочек напротив пункта shapes:

Далее кликаем по фигуре круга, жмем на левой панели по параметру behaviors (поведение), открывается окошко, в нём кликаем по кнопке “+” и выбираем параметре Drag & Drop (перетаскивание):

После чего добавляем ещё одно поведение для фигуры, опять жмем на “+” и выбираем Bound to layout (фигура не будет выходить за границы слоя):

Закрываем окошко:

Аналогичные поведения добавляем для двух остальных фигур (квадрата и треугольника):

Теперь переходим к программированию!

Заходим на слой evtShapes и добавляем глобальную переменную с названием shapesDone – для этого кликаем правой кнопкой мышки и в открывшемся меню выбираем пункт Add global variable:

В открывшемся окошке переименовываем переменную в shapesDone:

Данная переменна будет считать для скольки фигур игрок правильно подобрал нужную форму (очертание).

Далее жмем Add action, выбираем System:

После в открывшемся окошке выбираем Set value и жмем кнопку Next:

В следующем появившеся окошке жмем Done:

После двигаем строчку вверх с помощью левой зажатой кнопки мышки:

Далее жмем на ссылку Add event, выбираем  square  и жмем кнопку Next:

В появившемся окошке выбираем On collision with anothe object и жмем на кнопку Next:

В появившемся новом окошке кликаем по кнопке click to choose и выбираем invisSquare, после жмем на кнопку Ok:

Далее жмем кнопку Done:

И у нас создается следующее действие:

То есть при столкновении фигру square и invisSquare программе нужно произвести какое-то действие. А какое? Мы пропишем ниже.

Кликаем Add action, выбираем square и жмем кнопку Next:

Далее выбираем Set position to another object:

Кликаем по кнопке click to choose и выбираем dotSquare, после жмем на кнопку Ok:

Далее жмем кнопку Done:

Получилось следующее, при столкновении или наведении фигуры square и invisSquare необходимо фигуру square переместить на фигуру dotSquare.

Дальше жмем Add action, в открывшемся окошке выбираем square:

В следующей окошке выбираем Set enabled:

После жмем на кнопку Done:

Этим действием мы отключаем перетаскивание для фигуры квадрат:

Далее присвоем глобальной переменной значение 1:

Для этого нажимаем Add action, в открывшемся окошке выбираем System:

После выбираем Add to:

Далее жмем кнопку Done:

То есть при столкновении или наведении фигур square и invisSquare необходимо добавить к глобальной переменной sapesDone единичку:

Аналогичные действия прописываем и для остальных двух фигур – круга и треугольника – в итоге получаем следующее:

Сохраняем и запускаем игру:

Всё работает фигуры становятся в свои контуры:

Игра почти закончена!

Давайте ещё добавим аудио к игре.

Для этого переходим во вкладку shapes, кликаем дважды левой кнопкой мышки по рабочей области, после чего появляется окошко, в котором выбираем Audio:

После снова переходим во вкладку evtShapes, и кликаем по ссылке Add event, выбираем System:

В открывшемся окошке выбираем Compare variable:

В следующем окошкее в параметре Value ставим 3 и жмем кнопку Done:

Получаем следующую строчку:

Теперь на самом краю строчки кликаем правой кнопкой мышки, в открывшемся меню выбираем пункт Add, подпункт Add another condition:

В открывшемся окошке выбираем System:

В следующем окошке выбираем Trigger once while true:

Получилась следующая строчка:

То есть когда все три фигуры встали на свои контуры – глобальная переменная равно 3, то нужно выполнить действия, а какие пропишем ниже.

Но сначала давайте добавим аудио файлы.

Для этого в правой верхней панели открываем вкладку Projects и находим папку Sounds, кликаем по ней правой кнопкой мышки и выбираем пункт Import sounds:

Нужно добавлять аудио файлы в формате wav, можно добавить следующий:

После жмем кнопку Ок.

И видим, что в папке sounds у нас появились аудио файлы:

Аналогично добавляются аудио файлы в папку music. В папку music добавляем длинную фоновую музыку, а в папку sounds – короткие звуки.

Далее продолжаем редактировать вкладку evtShapes.
Жмем на ссылку Add action, далее выбираем Audio:

После выбираем Play:

В открывшемся окошке выбираем нашу мелодию и громкость – shapes1, -5 и жмем кнопку Done:

Добавим задержку – для этого жмем Add action и выбираем System:

После выбираем параметр wait:

И выставляем задержку равную 4 секундам:

Получили следующий код игры:

И последнее установим переход на начальный экран игры – на shapes.
Жмем Add action, выбираем System:

Выбираем параметр Go to layout:

И выбираем titleScreen:

Полный код слоя evtShapes получился следующим:

Сохраняем игру и запускаем.

Всё работает!