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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Далее в верхней правой панели закрываем слой bg на замочек и создаем ещё один слой – нажимая на кнопку “+” – а далее переименовываем его в “game1” (кнопкой в виде карандаша или правой кнопкой мышки и выбором пункта Rename):

Далее давайте добавим спрайт в виде груши, вот её картинка:

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

Далее жмем на кнопку в виде папки и загружаем картинку груши, затем нажимаем на крестик:

Переименовываем спрайт в numberGrusha:

Теперь давайте вставим числа на выбор, чтобы игрок мог выбрать среди них правильное количество представленных предметов.

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

И двайте вствим числа 1, 3 и 5, таким же способом как и спрайт с грушой:

Переименуем спрайт с числом 1 в “btn1”, с числом 3 в “btn3”, с числом 5 в “btn5”:

Далее в верхней правой панели закрываем слой game1 на замочек и создаем ещё один слой – нажимая на кнопку “+” – а далее переименовываем его в “game2” (кнопкой в виде карандаша или правой кнопкой мышки и выбором пункта Rename):

Меняем местами слои, так чтобы в правой верхней панели слой game1 располагался выше слоя game2 – для этого наводим курсор мыши на game2 зажимаем левую кнопку мыши и не отпуская перетаскиваем его под слой game1:

переставлять местами слои можно также с помощью данных стрелок:

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

Яблоко вставляем аналогично груше и переименовываем спрайт в numberYabloko:

А затем копируем яблоко ещё два раза, чтобы получилось 3 яблока на слое – копировать можно с помощью клавиш Ctrl+C , а вставлять Ctrl+V
или
можно перетягивать спрайт из нижней правой панели на слой – объект также будет копироваться:

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

Также добавим на данный слой game2 три цифры: 2, 3 и 4.
Замечу цифра 3 использовалась у нас уже на слое game1, но чтобы она работала на слое game2 нужно создать новый спрайт с той же цифрой, но с другим названием спрайта.

Цифры добавляем аналогичным способом, описанным выше, спрайтам дадим следующие имена:
для цифры 2 – btn2game2
для цифры 3 – btn3game2
для цифры 4 – btn4game2

Далее нам нужно сделать слой game2 невидимым – для этого кликаем в верхней правой панели по слою game2, а после в левой панели меняем значение пункта Initial visibility на значение Invisible:

У слоя game1 этот параметр не меняем – он будет в значении Visible.

Начинаем программировать игру.

Закрываем замочек на слое game2 и переходим на вкладку evtNumbers:

Создаем здесь вот такие строчки:

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

Далее мы будем создавать Группы.

Жмем правой кнопкой мышки, в выпадающем списке выбираем Add group:

В поле Name пишем Game1.
Оставляем галочку напротив пункта “Active on start” и жмем ок.
И у нас создалась Группа с названием Game1:

Далее создаем вторую группу, называем её Game2 и снимаем галочку напротив пункта “Active on start” и жмем ок.

Получилось следующее:

Неактивная группа имеет более тусклое название.

Теперь давайте добавим к цифрам поведения (behaviors).
Для верного ответа к цифре будем добавлять 2 поведения: Flash (мигание) и Fade (исчезновение).
Для остальных цифр добавим одно поведение Fade (исчезновение).

Открываем вкладку numbers, а в правой верхней панели напротив слоя game1 открываем замочек (будем редактировать данный слой):

Чтобы нам не мешали спрайты со слоя game2 – можно снять галочку напротив него в верхней правой панели:

Далее кликаем по цифре 1, в левой панели жмем на параметр Behaviors, в открывшемся окошке нажимаем на “+” и добавляем Flash и Fade, так как это правильный ответ (груша одна):

После в левой панели меняем параметр Acrive at start (активировать при запуске) на значение No, чтобы цифры сразу же не начали исчезать:

Далее кликаем по цифре, также в левой панели жмем на параметр Behaviors, в открывшемся окошке нажимаем на “+” и добавляем только Fade (исчезновение), так как это неправильный ответ (груша одна) и не забываем поменять в левой панели параметр Acrive at start (активировать при запуске) на значение No, чтобы цифры сразу же не начали исчезать:

Аналогично с цифрой 5:

Теперь переходим на слой game2: закрываем замочек напротив слоя game1 и открываем замочек напротив слоя game2, также для того, чтобы видны были только спрайты слоя game2 – снимаем галочку напротив слоя game1:

И аналогично добавляем для цифры 2 и 4 (неверные ответы) только поведение Fade, а для цифры 3 (верный ответ) добавляем поведение Flash и Fade и не забываем во всех цифрах поменять в левой панели параметр Acrive at start (активировать при запуске) на значение No, чтобы цифры сразу же не начали исчезать:

Все теперь закрываем замочки и ставим галочки напротив слоев game1 и game2 в левой панели:

Далее переходим во вкладку evtNumbers и программируем:

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

А иы начинаем создавать строчки программы…

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

Далее можно добавить звук.

Более подробно как добавить аудио-файл в папку sound писал в части 3 – читайте здесь – но сначала давайте добавим аудио файлы.

После жмем Add action и выбираем Audio:

В открывшемся окошке ищем Play:

Выбираем аудио-файл, который будет играть и жмем кнопку Done:

Далее пишем строчку для деактивации группы действий Game1 – для этого жмем на ссылке Add action, выбираем System:

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

В следующем окошке в Group name прописываем “Game1”, а в параметре State выбираем Deactivated:

В итоге у нас получается следующая строчка:

Пропишем небольшую задержку системы:

Жмем на ссылку Add action, выбираем System:

После ищем Wait:

В следующем окошке прописываем количество секунд задержки (ожидания), в данном примере установим 0.75:

Далее заставим цифру 1 исчезать – для этого – жмем на ссылку Add action, выбираем цифру 1 (btn1):

В следующем окошке находим Start fade

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

Пропишем ещё одну задержку по времени равную 1.5 секунд:

Получилось следующее:

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

В открывшемся окошке ищем Set layer visible:

В следующем окошке указываем в параметре:
Layer: “game1”
, а в пареметре:
Visibility: Invisible

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

Теперь давайте сделаем слой game2 – видимым.

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

В открывшемся окошке ищем Set layer visible:

В следующем окошке указываем в параметре:
Layer: “game2”
, а в пареметре:
Visibility: Visible

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

Следуцей строчкой давайте активируем группу Game2, для этого жмем на ссылку Add action и выбираем System:

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

В следующем окошке в Group name прописываем “Game2”, а в параметре State выбираем Activated:

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

На этом действия к цифре 1 (btn1) заканчиваются и мы перехдим к следующей цифре 3 (btn3).

Жмем на ссылку Add event и выбираем Touch:

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

Выбираем цифру 3 (btn3):

Добавляем аудио, которое будет играть при нажатии данной кнопки:

Жмем на ссылку Add action и выбираем Audio:

Далее выбираем Play:

И выбираем нужный звук:

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

Далее заставим цифру 3 (btn3) исчезать – для этого жмем Add action, выбираем цифру 3 (btn3):

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

В итоге получаем:

На этом настройка цифры 3 (btn3) закончена, переходим к настройке цифры 5 (btn5) – строчки кода создаются аналогично, поэтому выкладываю готовый результат:

Все числа (1, 3, 5) слоя game1 настроены!

Теперь давайте выделим все созданные выше строчки и перенесём их в группу Game1:

Выделяем как обычный текст, используя левую кнопку мышки и кнопки shift (от сих до сих) или ctrl (это, это и это):

Зажимаем левую кнопку мышки и переносим все выделенные строчки в группу Game1:

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

Строчки из группы Game1 можно скопировать с помощью Ctrl+C и вставить Ctrl+V:

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

Теперь исправляем цифры на те, что используются на слое game2, а именно btn2game2, btn3game2 и btn4game2.

Например, давайте изменим строчку с цифрой btn3 и поменяем её на цифру btn2game2:

Кликаем дважды по On tap qesture on btn3:

В открывшемся окошке меняем цифру с btn3 на btn2game2:

Кликаем дважды по следующей строчке с цифрой btn3:

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

После выбираем цифру btn2game2 и жмем на кнопку Next:

Далее выбираем Start fade и жмем Done:

В итоге цифру btn3 мы поменяли на btn2game2:

Все остальное цифры меняется аналогичным образом, в итоге должно получиться следующее:

Осталось поменять вот эти строчки и добавить строчку с переходом на слой titleScreen:

Полный код игры будет следующим:

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

На этом всё! Красивых Вам игр!