Знаете ли вы, что 9 апреля отмечается Национальный день единорога? Это причудливый и волшебный праздник единорогов, мифических существ, которые часто ассоциируются с чистотой, изяществом и очарованием. Недавно eSputnik разработал механику и дизайн специальной тематической игры, а Stripo технически помог с интерактивностью и воплотил игру в жизнь. Это игра, в которой получателям нужно было раскрасить единорога.
Многим очень понравилась эта игра, и немало людей заинтересовались созданием красивого и уникального интерактивного контента для писем. Что ж, вы просили — мы сделали. В этом гайде мы покажем, как создать эту игру, и дадим полный код для нее, с которым можно экспериментировать в email-рассылках.
С помощью этой игры можно сделать письма более увлекательными и посвятить их разным поводам. Например, предлагать промокоды на скидку за раскрашивание картинки или дарить получателям эксклюзивные предложения, основанные на их недавней активности после завершения игры.
Процесс создания игры можно условно разделить на четыре этапа: фоновое изображение «месяца», палитра, другие изображения и зоны кликов. Мы подробно рассмотрим каждый этап, и в конце получится полноценная игра, которую можно будет добавлять в письма. Без лишних слов, давайте начнем.
Этап 1. Фоновое изображение «месяца»
«Сердцем» игры являются изображения. Прежде всего, подготовим исходное изображение «месяца». Мы раскрасим его иначе, чем другие части рисунка, потому что это самый первый слой. Для «месяца» мы подготовим изображение с пустым пространством вместо месяца и фоном вокруг него, совпадающим с фоном письма (в нашем случае он белый).
(Кликните для скачивания картинки)
Важное примечание: размер наших изображений был увеличен в два раза. В результате для игры, ширина которой составляет 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-игры на новый уровень.
0 комментариев