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

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

После того как Вы освоите разработку игр на HTML5, то можно будет приступить к созданию тем для wordpress на основе HTML5.
Темы, созданные с использованием языков HTML5 и CSS3, выглядят потрясающе и обладают большой функциональностью, например стала настоящим прорывом на рынке платных решений для WordPress. Адаптивность, продуманная SEO оптимизация, грамотная разметка и лаконичный код. К тому же студия Beewise предлагет пожизненную техническую поддержку и бесплатные обновления для своих продуктов.

Первое, что нужно сделать это закачать HTML5 конструктор – Construct 2 – переходим на официальный сайт программы:

“scirra.com”

или с моего по ссылке:
“mnogoblog.ru/wp-content/uploads/2019/03/constr2.zip”

и скачиваем бесплатный конструктор Construct 2:

Загружаем и устанавливаем программу Construct 2.

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

В главном меню выбираем пункт File, подпункт New:

Далее выбираем “New empty project”:

Откроется следующее окошко:

Здесь слева – в панели Свойства проекта (Project Properties) – задайте данные о проекте: название, версию, описание, автора (название компании или имя и фамилия разработчика), адрес электронной почты и адрес вебсайта. В поле ID нужно указать уникальный идентификатор программы. Чтобы этот идентификатор был уникальным, за основу берут доменное имя без www и записывают его наоборот, например, для сайта www.mnogoblog.ru, начало идентификатора будет ru.mnogoblog. Затем через точку приписывают название программы. У меня получилось так: ru.mnogoblog.shapes. В дальнейшем этот идентификатор можно будет использовать для добавления игры в Google Play или App Store:

После создания проекта у нас появилось 2 закладки «Layout 1» и «Event sheet 1». Первая закладка – это макет экрана или сцены, который будет видеть игрок, на второй закладке – страница событий (действий):

Изначальна активна вкладка «Layout 1» кликаем в любом месте данного слоя:

Панель слева поменялась на – свойства слоя – Layout properties:

Здесь можно нажать на ссылку “Project Properties: view” и откроется Свойства проекта (Project Properties), которое мы настраивали выше.

Настраиваем свойства слоя – Layout properties: меняем имя слоя и размеры:

Поменял название слоя на titleScreen.

После поменяем название страница событий (Event sheet) «Event sheet 1»:

Для этого воспользуемся правой панелью, по умолчанию активна закладка “Layers”, кликаем по закладке “Project”, находим страничку событий и кликаем правой кнопкой мышки, выбираем rename:

Меняем название страницы событий на evtTitle:

Возвращаемся к слою titleScreen – кликаем по вкладке titleScreen, а в правой панели выбираем “Layers”:

Переименовываем слой “Layer 0” в “background”, кликая по кнопке карандаша, а после кликаем дважды левой кнопкной мышки в рабочей области слоя:

И выбираем “Sprite”:

Далее жмем на кнопку в виде папочки и выбираем фоновое изображение, после жмем на крестик:

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

Фоновое изображение добавлено:

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

Замочек у слоя “buttons” открыт, а у слоя “background” закрыт. Тем самым мы редактируем только слой “buttons”.

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

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

После переименуем кнопки, для этого в панели Objects (справа внизу) выбираем кнопку в левой панели меняем её имя (Title):

В итоге:
Sprite14 переименовал в titleBG
Sprite16 переименовал в btnShapes
Sprite17 переименовал в btnNumbes
Sprite18 переименовал в btnLetters

Переходим на страницу событий – вкладка evtTitle и кликаем по ссылке Add event, в открывшемся окошке выбираем System:

Выбираем On start of layout (то есть установливаем его как стартовый слой).

После жмем на ссылку Add action (добавляем действие) и выбираем снова System

И выбираем Scroll to X:

И задаем 600:

Аналогично по оси Y, а именно жмем Add action и System:

Задаем по оси Y – 400.

Итог:

Жмем на кнопку соханить:

Сохраняем проект.

Чтобы посмотреть как будет выглядить результат в браузере нужно нажать дважды на кнопку Play:

Результат:

Кнопки нужно немного сдвинуть:

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

Вот так:

Жмем снова на кнопку Pllay и смотрим результат:

Продолжение следует…

PS: Для того чтобы отслеживать как будет выглядеть игра на маленьких экранах – можно также добавить ещё один слой, например с названием smallScreen.

Для этого в правой панели жмем на кнопку “+”, создаем новый слой, назовем его “smallScreen” (изменяем название с помощью кнопки в виде карандаша):

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

Заливаем прямоуголник любым цветом, например желтым:

И жмем на крестик.

Выделяем создайнный нами спрайт в виде “желтого прямоугольника”, если он не выделен:

Далее в левой панели устанавливаем следующие параметры для нашего спрайта:

Opacity: 20
Position: 600, 400
Size: 960, 640
Initial visibility: Invisible

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

И на последок закрываем замочек слоя: