11 днів тому

Простий і зрозумілий гайд зі створення інтерактивної гри-розмальовки для листів (з прикладом коду)

Зміст

Етап 1. Фонове зображення «місяця»
Етап 2. Палітра
Етап 3. Інші зображення
Етап 4. Зони кліків
Повідомлення наприкінці гри
Приклад повного коду гри
На завершення

Етап 1. Фонове зображення «місяця»

Чи знаєте ви, що 9 квітня святкують Національний день єдинорога? Це чудернацьке та чарівне свято єдинорогів, міфічних істот, які часто асоціюються з чистотою, витонченістю та чарівністю. Нещодавно eSputnik розробив механіку та дизайн спеціальної тематичної гри, а Stripo технічно допоміг з інтерактивністю та втілив гру в життя. Це гра, у якій одержувачам потрібно було розфарбувати єдинорога.

Гра-розмальовка з єдинорогом

Багатьом дуже сподобалася ця гра, і чимало людей зацікавилися створенням красивого та унікального інтерактивного контенту для листів. Що ж, ви просили — ми зробили. У цьому гайді ми покажемо, як створити цю гру, і дамо повний код для неї, з яким можна експериментувати в email-розсилках.

За допомогою цієї гри можна зробити листи більш захопливими та присвятити їх різним приводам. Наприклад, пропонувати промокоди на знижку за розмальовування картинки або дарувати одержувачам ексклюзивні пропозиції, що ґрунтуються на їхній нещодавній активності після завершення гри.

Процес створення гри можна умовно розділити на чотири етапи: фонове зображення «місяця», палітра, інші зображення та зони кліків. Ми детально розглянемо кожен етап, і наприкінці вийде повноцінна гра, яку можна буде додавати в листи. Без зайвих слів, почнімо.

Етап 1. Фонове зображення «місяця»

«Серцем» гри є зображення. Перш за все, підготуємо вихідне зображення «місяця». Ми розфарбуємо його інакше, ніж інші частини малюнка, тому що це найперший шар. Для «мiсяця» ми підготуємо зображення з порожнім простором замість місяця і фоном навколо нього, що збігається з фоном листа (у нашому випадку він білий).

Картинка місяця для гри

(Клікніть для скачування картинки)

Важлива примітка: розмір наших зображень було збільшено вдвічі. У результаті для гри, ширина якої становить 420 px, ми зробили зображення шириною 840 px.

Далі ми завантажуємо створене зображення в шаблон, після чого вставляємо блок HTML у порожню структуру, щоб додати наступний код:

<style amp-custom>
    .container-image {
        position: relative;
        width: 410px;
        height: 410px;
        margin: 0 auto;
    }
 
    .container-image div {
        position: absolute;
    }
 
    .container-image span {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
    }
 
    .btn-color-1 span {
        background-color: #ffe14d;
    }
 
    .btn-color-2 span {
        background-color: #c9a3c7;
    }
 
    .btn-color-3 span {
        background-color: #ff5cd9;
    }
 
    .btn-color-4 span {
        background-color: #4099d4;
    }
 
    .layer-1 {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
 
    .layer-1 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/images/layer0102.png);
    }
 
    .colors ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    .colors li {
        display: inline-block;
        margin: 0 5px;
    }
 
    .colors li:first-child {
        margin-right: 8px;
    }
 
    .colors li span {
        display: inline-block;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid #fff;
    }
 
    .colors li .active {
        border: 2px solid #333;
    }
 
@media only screen and (max-width: 600px) {
        .container-image {
            width: 250px;
            height: 250px;
        }
    }
 
</style>
<div class="container-image">
	<div class="layer-1"><span></span></div>
</div>
<div class="colors">
    <ul>
        <li class="btn-color-1"><span class="active"></span></li>
        <li class="btn-color-2"><span></span></li>
        <li class="btn-color-3"><span></span></li>
        <li class="btn-color-4"><span></span></li>
    </ul>
</div>

Клас container-image відповідає за розмір гри. У нашому випадку гра має розмір 410 на 410 пікселів у десктопній версії та 250 на 250 у мобільній. За потреби можна змінити розміри.

Усередині блоку container-image міститимуться блоки з класами layer-1, layer-2, layer-3 і т. д., які ми розташуємо в потрібних місцях за допомогою абсолютного позиціонування. У цих блоках знаходиться тег span із зображеннями.

Блок із класом colors — це палітра кольорів. У стилях уже вказані кольори для кожної кнопки btn-color-1, btn-color-2 і т. д., тому їх можна замінити на будь-які інші.

Коли код буде вставлено, з'явиться зображення півмісяця і панель кольорів.

Базовий вид гри

Етап 2. Палітра

Наступний крок — зробити палітру кольорів клікабельною і показати, який колір вибрано. Щоб зрозуміти, який колір вибрано, ми створимо змінну "color", і при кліку на кожен елемент палітри записуватимемо в неї значення 1,2,3 і т. д.

Щоб зробити це, замініть блок із палітрою на такий код:

<div class="colors">
<ul>
    <li class="btn-color-1"><span class="active" [class]="color == 1 || !color ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 1})"></span></li>
    <li class="btn-color-2"><span [class]="color == 2 ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 2})"></span></li>
    <li class="btn-color-3"><span [class]="color == 3 ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 3})"></span></li>
    <li class="btn-color-4"><span [class]="color == 4 ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 4})"></span></li>
</ul>
</div>

У результаті зміниться наступне:

Місце для додавання коду палітри

Щоб отримати код, зробіть наступне:

Код палітри після вставки

У цьому коді, щоб зробити елементи клікабельними, ми додаємо такі атрибути: <span role="button" tabindex="1" on="tap:AMP.setState({color: 1})">.

Давайте розглянемо кожен з них детальніше:

role="button" — обов'язковий атрибут, який має бути доданий разом з on="tap:...", змінює роль елемента;
tabindex="1" — обов'язковий атрибут, задає порядок перемикання фокусу при переміщенні між елементами за допомогою клавіші Tab. Перехід відбувається від меншого значення до більшого, наприклад, від 1 до 2, потім до 3 і так далі;
on="tap:" — обробник події кліка;
AMP.setState({ color: 1 }) — метод, що дає змогу створювати і змінювати змінні та їхні значення.

Щоб показати активний елемент, ми створили клас «active» і додали його до елемента, на який клікає користувач.

Перший колір вибрано за замовчуванням, тому йому вже присвоєно клас «active», і ми додали до нього наступну перевірку:

[class]="color == 1 || !color ? 'active' : '' "

Це скорочене позначення умови, що буквально означає, що якщо змінна color дорівнює 1 або не має значення, то клас буде 'active', інакше класу не буде.

[class] — атрибут class укладено в квадратні дужки, тому що саме так AMP вказує атрибути, значення яких будуть змінюватися динамічно.

Для всіх інших кольорів ми додали скорочену умову: якщо значення змінної color дорівнює номеру кольору за порядком (2,3,4 і т. д.), то ми додаємо клас 'active':

[class]="color == 2 ? 'active' : '' "

Наступним кроком буде малювання «місяця». Для цього ми додамо вже знайомі атрибути до тега span у блоці з класом layer-1:

<div class="layer-1">
    <span role="button" tabindex="1" [class]="layer1" on="tap:AMP.setState({layer1: color ? 'color'+color : 'color1'})"></span>
</div>

Ось як виглядає код перед вставкою:

Місце для додавання коду для правильного розмальовування

А це код після вставки:

Код розфарбовування після вставки

[class]="layer1" — ми підставили ім'я класу зі змінної layer1;
on="tap:AMP.setState({layer1: color ? 'color'+color : 'color1'})" — при кліку створюється змінна layer1, в яку, якщо змінна color існує, записується 'color' плюс значення змінної (1,2,3), в результаті чого створюється клас 'color1', 'color2' і т. д. (якщо змінної color ще немає, то клас буде 'color1').

Після цього ми додаємо код із необхідними стилями:

.layer-1 .color1 {
    background-color: #ffe14d;
}
 
.layer-1 .color2  {
    background-color: #c9a3c7;
}
 
.layer-1 .color3  {
    background-color: #ff5cd9;
}
 
.layer-1 .color4  {
    background-color: #4099d4;
}

Етап 3. Інші зображення

Тепер перший шар можна зафарбувати. Далі необхідно підготувати зображення для наступного шару. Ми розділили решту зображення на фрагменти, які будуть зафарбовуватися, і зробили спрайти для кожного фрагмента з усіма можливими кольорами, що будуть доступні (і які є в палітрі).

Важлива примітка: відстань між частинами різних кольорів має бути однаковою.

Частина зображень з варіаціями кольору

Ось джерела зображень для гри:

Далі потрібно додати layer 2 і 3 під блоком із класом layer-1 і відповідні стилі для них. Код шару має такий вигляд:

<div class="layer-2"><span role="button" tabindex="2" [class]="layer2" on="tap:AMP.setState({layer2: color ? 'color'+color : 'color1'})"></span></div>
<div class="layer-3"><span [class]="layer3"></span></div>

Код стилю має такий вигляд:

.layer-2 {
        width: 29.51%;
        height: 21.46%;
        left: 15.37%;
        top: 14.39%;
    }
 
    .layer-2 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_f61060edca5f418873af71474512724771bf46977f7bb9ac2b4e11c4c017d541/images/layer02.png);
    }
 
    .layer-3 {
        width: 17.56%;
        height: 36.34%;
        left: 12.68%;
        top: 46.34%;
    }
 
    .layer-3 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/images/layer03_uXc.png);
    }
.container-image span.color1 {
        background-position: 25% 0;
    }
 
    .container-image span.color2 {
        background-position: 50% 0;
    }
 
    .container-image span.color3 {
        background-position: 75% 0;
    }
 
    .container-image span.color4 {
        background-position: 100% 0;
    }

Порада з кодингу: щоб розташувати фрагменти зображення в потрібних місцях, можна призначити фонове зображення для материнського блоку з повним зображенням. У попередньому перегляді консолі (F12 для Windows) перемістіть фрагмент у потрібне місце, потім скопіюйте це значення і помістіть його в код. Коли всі фрагменти будуть розташовані, видаліть цей стиль із зображення.

Розташування зображень у потрібних місцях

Стилі потрібні, оскільки ми задаємо розміри блоків і з їхньою допомогою розставляємо картинки по місцях. Усі значення вказані у %, щоб не змінювати їх на мобільних пристроях. Також для кожного кольору додано стиль, який показує частину картинки, що відповідає цьому кольору.

Як розрахувати все у %:

Для прикладу візьмемо зображення «зірки». Ця картинка допоможе нам показати, як правильно все розрахувати.

(Клікніть для скачування картинки)

Спочатку потрібно визначити розміри в пікселях — це реальний розмір зображення. У цьому випадку розмір становить 1210 px на 175 px. Однак у нас п'ять зірок поруч, а нам потрібна ширина однієї, тому ми ділимо ширину на 5. Крім того, всі наші зображення вдвічі більші, ніж потрібно, тому ми також ділимо ці розміри на 2.

Загальна ширина: 1210/5=242/2=121 px; загальна висота: 175/2=87,5 px.

Тепер необхідно конвертувати все у %. Ширина нашого блоку з грою 410 px дорівнює 100%, ширина зображення 121 px дорівнює X.

У результаті ми отримуємо:

X = 121*100/410 = 29,5%

Те саме робимо з висотою:

X = 87,5*100/410 = 21,34%

Значення «left» і «top» можна одразу задати у відсотках.

Етап 4. Зони кліків

Тепер можна змінювати кольори і зафарбовувати «місяць» і «зірки», але не «хвіст». Зона кліка для зображень прямокутна, тому вона перекриває деякі інші зображення, що виглядає таким чином:

Зони кліків у грі-розмальовці

Оскільки «зірки» не перекривають інші зображення, ми розташували клік на самому зображенні, але «хвіст» перекриває частину «місяця», тому необхідно додати додаткові елементи для правильної зони кліка.

Для цього нам потрібно додати два блоки для хвоста після блоку з класом layer-3:

<b class="layer-3-1" role="button" tabindex="3" on="tap:AMP.setState({layer3: color ? 'color'+color : 'color1'})"></b>
<b class="layer-3-2" role="button" tabindex="3" on="tap:AMP.setState({layer3: color ? 'color'+color : 'color1'})"></b>

Місце для вставки коду зони кліка

Зверніть увагу, що це блоки для «хвоста», який використовує змінну layer-3, і для них ми також використовуємо змінну layer-3.

Після вставки прийшов час додати деякі стилі:

.layer-3-1,
    .layer-3-2 {
        display: block;
        position: absolute;
        cursor: pointer;
    }
 
    .layer-3-1 {
        width: 10.49%;
        height: 17.07%;
        left: 14.39%;
        top: 45.85%;
        transform: rotate(10deg);
    }
 
    .layer-3-2 {
        width: 11.95%;
        height: 16.83%;
        left: 16.83%;
        top: 60.24%;
        transform: rotate(-21deg);
    }

Базовий код такий самий, як і в попередніх шарах. Тільки в стилях ми додали трансформацію, щоб зробити зону кліка точнішою.

Якщо ми додамо межу до блоків, які були вставлені, то побачимо нову зону кліка:

Правильне розташування зон кліків

Таким чином, ми додаємо всі частини зображення. Для тих, які перекривають інші або перекривають самі себе, ми додаємо додаткові блоки, на які накладаємо подію кліка.

Повідомлення наприкінці гри

Наприкінці варто додати блок із повідомленням, яке буде показано після того, як користувач зафарбує всі шари. Для цього потрібно додати блок із текстом, який буде показано, коли всі змінні layer1, layer2, layer3, layer4 і т. д. матимуть значення.

Наразі ми додали тільки три шари, тому в списку тільки три змінні. Наприкінці гри їхня кількість має збігтися з кількістю змінних шарів.

Для додавання повідомлення наприкінці гри скопіюйте цей код під блоком із класом colors:

<div class="message" hidden [hidden]="!layer1 || !layer2 || !layer3">
    <h2><b>Вау, це просто шедевр! </b>😍</h2>
</div>

Атрибут hidden вказується тут через те, що блок має бути прихований на початку гри. Потім атрибут [hidden] додає або прибирає прихований атрибут залежно від умови всередині. У нашому випадку блок буде прихований доти, доки хоча б одна з перерахованих змінних порожня. Щойно всі змінні отримають значення, прихований атрибут буде видалено.

Крім того, наш ігровий блок буде прихований після розфарбовування; для цього нам потрібно додати ще одну умову до блоку з класом colors:

[hidden]="layer1 && layer2 && layer3"

Умова для повідомлення після завершення гри

Атрибут [hidden] буде додано, якщо всі змінні мають значення і блок прихований.

Приклад повного коду гри

Отже, ми розглянули всі компоненти гри, їхнє призначення та принцип роботи. Після всіх маніпуляцій код гри має виглядати таким чином:

<style amp-custom>
    .container-image {
        position: relative;
        width: 410px;
        height: 410px;
        margin: 0 auto;
    }
 
    .container-image div {
        position: absolute;
    }
 
    .container-image span {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
    }
 
    .layer-1 .color1,
    .btn-color-1 span {
        background-color: #ffe14d;
    }
 
    .layer-1 .color2,
    .btn-color-2 span {
        background-color: #c9a3c7;
    }
 
    .layer-1 .color3,
    .btn-color-3 span {
        background-color: #ff5cd9;
    }
 
    .layer-1 .color4,
    .btn-color-4 span {
        background-color: #4099d4;
    }
 
    .layer-1 {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
 
    .layer-1 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/images/layer0102.png);
    }
 
    .layer-1-1,
    .layer-1-2,
    .layer-1-3,
    .layer-1-4 {
        display: block;
        position: absolute;
        cursor: pointer;
    }
 
    .layer-1-1 {
        width: 24.39%;
        height: 26.83%;
        transform: rotate(-15deg);
        left: 46.34%;
        top: 65.61%;
    }
 
    .layer-1-2 {
        width: 14.39%;
        height: 21.46%;
        transform: rotate(21deg);
        left: 39.02%;
        top: 72.93%;
    }
 
    .layer-1-3 {
        width: 13.17%;
        height: 15.37%;
        transform: rotate(-15deg);
        left: 71.95%;
        top: 72.93%;
    }
 
    .layer-1-4 {
        width: 9.02%;
        height: 39.27%;
        transform: rotate(-9deg);
        left: 75.85%;
        top: 9.76%;
    }
 
    .container-image span.color1 {
        background-position: 25% 0;
    }
 
    .container-image span.color2 {
        background-position: 50% 0;
    }
 
    .container-image span.color3 {
        background-position: 75% 0;
    }
 
    .container-image span.color4 {
        background-position: 100% 0;
    }
 
    .layer-2 {
        width: 29.51%;
        height: 21.46%;
        left: 15.37%;
        top: 14.39%;
    }
 
    .layer-2 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_f61060edca5f418873af71474512724771bf46977f7bb9ac2b4e11c4c017d541/images/layer02.png);
    }
 
    .layer-3 {
        width: 17.56%;
        height: 36.34%;
        left: 12.68%;
        top: 46.34%;
    }
 
    .layer-3 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/images/layer03_uXc.png);
    }
 
    .layer-3-1,
    .layer-3-2 {
        display: block;
        position: absolute;
        cursor: pointer;
    }
 
    .layer-3-1 {
        width: 10.49%;
        height: 17.07%;
        left: 14.39%;
        top: 45.85%;
        transform: rotate(10deg);
    }
 
    .layer-3-2 {
        width: 11.95%;
        height: 16.83%;
        left: 16.83%;
        top: 60.24%;
        transform: rotate(-21deg);
    }
 
    .layer-4 {
        width: 53.90%;
        height: 34.63%;
        left: 28.29%;
        top: 52.93%;
    }
 
    .layer-4 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_8ae58955cfb1c968315c9464fb0b20f3fa55d574a142348227e4440a245bf429/images/layer04.png);
    }
 
    .layer-4-1,
    .layer-4-2,
    .layer-4-3 {
        display: block;
        position: absolute;
        width: 9.76%;
        height: 7.07%;
        cursor: pointer;
    }
 
    .layer-4-1 {
        left: 28.05%;
        top: 80.00%;
    }
 
    .layer-4-2 {
        left: 70.98%;
        top: 52.93%;
    }
 
    .layer-4-3 {
        left: 71.95%;
        top: 66.10%;
    }
 
    .layer-5 {
        width: 54.88%;
        height: 71.22%;
        left: 24.39%;
        top: 11.22%;
    }
 
    .layer-5 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/images/layer05.png);
    }
 
    .layer-5-1,
    .layer-5-2,
    .layer-5-3,
    .layer-5-4,
    .layer-5-5,
    .layer-5-6,
    .layer-5-7,
    .layer-5-8 {
        display: block;
        position: absolute;
        cursor: pointer;
    }
 
    .layer-5-1 {
        width: 11.22%;
        height: 21.46%;
        transform: rotate(18deg);
        left: 31.71%;
        top: 59.76%;
    }
 
    .layer-5-2 {
        width: 22.44%;
        height: 23.90%;
        left: 26.10%;
        top: 39.76%;
    }
 
    .layer-5-3 {
        width: 8.54%;
        height: 21.46%;
        transform: rotate(-32deg);
        left: 64.88%;
        top: 48.05%;
    }
 
    .layer-5-4 {
        width: 9.02%;
        height: 10.73%;
        transform: rotate(-19deg);
        left: 68.54%;
        top: 43.90%;
    }
 
    .layer-5-5 {
        width: 22.44%;
        height: 16.83%;
        transform: rotate(-16deg);
        left: 41.71%;
        top: 49.51%;
    }
 
    .layer-5-6 {
        width: 11.95%;
        height: 18.29%;
        transform: rotate(-18deg);
        left: 58.29%;
        top: 21.46%;
    }
 
    .layer-5-7 {
        width: 11.46%;
        height: 18.29%;
        transform: rotate(30deg);
        left: 57.32%;
        top: 35.37%;
    }
 
    .layer-5-8 {
        width: 10.00%;
        height: 20.49%;
        transform: rotate(-123deg);
        left: 52.93%;
        top: 18.78%;
    }
 
    .layer-6 {
        width: 27.32%;
        height: 35.37%;
        left: 48.54%;
        top: 14.88%;
    }
 
    .layer-6 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_a9f2a37800ac6365b7305670b3e9505b3b265fbf13535f0419236592cf77d260/images/layer06.png);
    }
 
    .layer-7 {
        width: 10.24%;
        height: 11.71%;
        left: 48.78%;
        top: 8.78%;
    }
 
    .layer-7 span {
        background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/images/layer07.png);
    }
 
    .layer-7-1 {
        display: block;
        position: absolute;
        cursor: pointer;
        width: 13.41%;
        height: 5.37%;
        transform: rotate(60deg);
        left: 46.34%;
        top: 11.22%;
    }
 
    .colors ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    .colors li {
        display: inline-block;
        margin: 0 5px;
    }
 
    .colors li span {
        display: inline-block;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid #fff;
    }
 
    .colors li .active {
        border: 2px solid #333;
    }
 
    .message {
        padding: 10px 10px 0;
        text-align: center;
    }
 
    @media only screen and (max-width: 600px) {
        .colors li span {
            width: 32px;
            height: 32px;
        }
 
        .container-image {
            width: 250px;
            height: 250px;
        }
    }
</style>
<div class="container-image">
    <div class="layer-1"><span role="button" tabindex="1" [class]="layer1" on="tap:AMP.setState({layer1: color ? 'color'+color : 'color1'})"></span></div>
    <div class="layer-4"><span [class]="layer4"></span></div>
    <div class="layer-7"><span [class]="layer7"></span></div>
    <div class="layer-5"><span [class]="layer5"></span></div>
    <div class="layer-6"><span [class]="layer6" role="button" tabindex="6" on="tap:AMP.setState({layer6: color ? 'color'+color : 'color1'})"></span></div>
    <div class="layer-2"><span role="button" tabindex="2" [class]="layer2" on="tap:AMP.setState({layer2: color ? 'color'+color : 'color1'})"></span></div>
    <div class="layer-3"><span [class]="layer3"></span></div>
    <b class="layer-5-1" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-5-2" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-5-3" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-5-4" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-5-5" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-5-6" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-5-7" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-5-8" role="button" tabindex="5" on="tap:AMP.setState({layer5: color ? 'color'+color : 'color1'})"></b><b class="layer-4-1" role="button" tabindex="4" on="tap:AMP.setState({layer4: color ? 'color'+color : 'color1'})"></b><b class="layer-4-2" role="button" tabindex="4" on="tap:AMP.setState({layer4: color ? 'color'+color : 'color1'})"></b><b class="layer-4-3" role="button" tabindex="4" on="tap:AMP.setState({layer4: color ? 'color'+color : 'color1'})"></b><b class="layer-7-1" role="button" tabindex="7" on="tap:AMP.setState({layer7: color ? 'color'+color : 'color1'})"></b><b class="layer-3-1" role="button" tabindex="3" on="tap:AMP.setState({layer3: color ? 'color'+color : 'color1'})"></b><b class="layer-3-2" role="button" tabindex="3" on="tap:AMP.setState({layer3: color ? 'color'+color : 'color1'})"></b><b class="layer-1-1" role="button" tabindex="1" on="tap:AMP.setState({layer1: color ? 'color'+color : 'color1'})"></b><b class="layer-1-2" role="button" tabindex="1" on="tap:AMP.setState({layer1: color ? 'color'+color : 'color1'})"></b><b class="layer-1-3" role="button" tabindex="1" on="tap:AMP.setState({layer1: color ? 'color'+color : 'color1'})"></b><b class="layer-1-4" role="button" tabindex="1" on="tap:AMP.setState({layer1: color ? 'color'+color : 'color1'})"></b>
</div>
<div class="colors" [hidden]="layer1 && layer2 && layer3 && layer4 && layer5 && layer6 && layer7">
    <ul>
        <li class="btn-color-1"><span class="active" [class]="color == 1 || !color ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 1})"></span></li>
        <li class="btn-color-2"><span [class]="color == 2 ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 2})"></span></li>
        <li class="btn-color-3"><span [class]="color == 3 ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 3})"></span></li>
        <li class="btn-color-4"><span [class]="color == 4 ? 'active' : '' " role="button" tabindex="1" on="tap:AMP.setState({color: 4})"></span></li>
    </ul>
</div>
<div class="message" hidden [hidden]="!layer1 || !layer2 || !layer3 || !layer4 || !layer5 || !layer6 || !layer7">
    <h2><b>Wow, this is just a masterpiece!</b>😍</h2>
</div>

Фінальна гра, створена за допомогою цього коду, матиме такий вигляд і працюватиме так:

Закінчена гра-розмальовка

Використовуйте цей код на власний розсуд. Експериментуйте з грою, картинками, стилями тощо, щоб опанувати ці ігрові механіки і створити по-справжньому унікальну гру-розмальовку для вашої email-кампанії.

На завершення

Як бачите, ігрова механіка доволі цікава і незвичайна, але це тягне за собою і складніший процес створення, який вимагає навичок програмування, якщо ви створюєте гру з нуля.

Ми створили цей гайд, щоб будь-який маркетолог, незалежно від рівня технічної підготовки, міг відтворити цю ігрову механіку, додати її до своїх email-розсилок і здивувати одержувачів, зробивши взаємодію з ними більш захопливою.

Крім того, наші професійні email-розробники завжди радо допоможуть втілити ваші ідеї зі створення AMP-контенту в життя, що дасть змогу вивести email-ігри на новий рівень.

Створюйте ексклюзивні листи за допомогою Stripo

Почати