Пишем игру на html5 код: Игра “Буква А” (часть 4)

Здравствуйте, давайте напишем ещё одну игру на html5 с использованием программы Construct 2 – она будет назваться “Буква А”.

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

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

Мы продолжим редактировать предыдущую игру, но непосредственно для данной игры создадим новый слой назовем её – letters.

Для этого в правой панели выбираем вкладку Project и наводим курсор мышки на Layouts:

, зажимаем правую кнопку мышки и выбираем пункт Add layout:

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

У нас появился слой “Layout1” и страница событий к нему “Event sheet 1” – переименовываем их в “letters” и “evtLetters”:

Переходим на слой shapes (откываем вкладку letters и кликаем левой кнопкой мышки на рабочей области слоя) и меняем его размеры – делаем их такими же как у слоя titleScreen, а именно, меняем параметры на:
Layout Size: 1200, 800
Margins: 1200, 800

Далее открываем страницу событий “evtLetters” (по умолчанию скрыта) – для этого в панели справа, во вкладке Projest кликаем дважды (левой кнопкой мышки) на “evtLetters”, после чего сверху у нас появляется вкладка “evtLetters”:

Продолжаем создавать слой “letters”.

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

Выбираем “Sprite”:

Далее мы можем установить фоновую картинку (нажав на кнопку в виде папочки и загрузив картнинку) или же просто зальём прямоугольник каким-либо цветом, например, светло жёлтым, жмем на крестик и растягиваем прямоугоольник на весь экран:

Переименуем слой в правой верхней панели на “bg”, а в нижней правой панели спрайт переименуем на “lettersBG”:

Теперь давайте добавим текст – для этого опять кликаем дважды левой кнопкой мышки по серой области и выбираем Text:

Изменяем параметры:

Name: letters
Text: A
Font: Arial(72)
Color: на красный

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

Для этого кликаем дважды в серой области и выбираем “Sprite”:

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

Кликаем по кнопке в виде папки и загружаем картинку ящика:

Далее жмем на крестик и растягиваем ящик до нужных размеров:

Далее в верхней правой панели закрываем слой bg на замочек и создаем ещё 2 слоя с именами:
boxFront
objects

Закрываем на замочки слои boxFront и letters, а слой objects оставляем с открытым замочком – его будем редактировать:

На слой objects добавим 3 фрукта: Ананас, Арбуз и Лимон, вот их картинки:

Для добавления фруктов – кликаем дважды левой кнопкой мышки по рабочей области слоя и выбираем “Sprite”:

Далее жмем на кнопку в виде папки, загружаем картинку ананаса, после жмем на кнопку “set collision polygon” (полигон) и выставляем рабочий контур картинки фрукта ананаса:

Жмем на крестик:

Выделяем ананас (если не выделен) и в левой панели переименовываем его на ananas, а после кликаем на параметр “Behaviors”, в открывшемся окошке жмем на кнопку “+” и добавляем два параметра – “Drag & Drop” и “Bound to layout”:

Аналогичным образом добавляем ещё 2 фрукта: Арбуз и Лимон.

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

Открываем замочек напротив слоя boxFront:

Кликаем дважды левой кнопкой мышки по рабочей области, выбираем “Sprite”:

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

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

И размещаем её на ящике:

Переименуем спрайт в front, а также ящик в box (забыл переименовать) – это можно сделать в нижней правой панели кликнув по нужному объекту правой кнопкой мышки и выбрав пункт Rename:

Создадим ещё один справайт – invisBox – он будет указывать куда будут перемещаться фрукты при перемещении их в ящик.

Кликаем дважды по рабочей области слоя boxFront и выбираем Sprite:

Здесь просто зальём прямоугольник в фиолетовый цвет и жмем на крестик:

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

Также переименуем спрайт в invisBox и зададим ему невидимость в параметре:
Initial visibility: Invisible

Далее приступаем к программированию игры.
Закрываем замочек напротив слоя frontBox и переходим на вкладку evtLetters:

Вот так должна в итоге выглядеть вкладка evtLetters:

Все создается аналогично тем действиям, которые указывал в статье “Пишем игру на html5 код: Игра “Формы” (часть 3)” перематайте её до середины со слов “Теперь переходим к программированию!” (выделено жирным шрифтом).

Также не забудьте исправить вкладку evtTitle следующим образом – добавив на одну из кнопок переход на слой с игрой “Буква А”: