A straightforward-to-follow information on making an interactive coloring recreation on your emails (code pattern included) — Stripo.electronic mail

Do you know that April ninth is Nationwide Unicorn Day? It’s a whimsical and magical celebration of unicorns, legendary creatures usually related to purity, grace, and enchantment. Lately, we made a particular interactive publication for this vacation, wherein we applied a recreation the place recipients want to paint a unicorn.

Unicorn Coloring Game

Folks actually appreciated the sport, and lots of have been keen on creating such stunning, distinctive interactive content material for emails. Effectively, you requested — we answered. On this information, we are going to present you create this recreation and provide the full code for it, which you’ll experiment with in your individual electronic mail newsletters.

You should utilize this recreation to make your electronic mail extra partaking and dedicate it to numerous events. For instance, you may give low cost promo codes for coloring the image or current recipients with unique provides, primarily based on their current exercise, after ending the sport.

The sport creation course of might be roughly divided into 4 levels: the “moon” background picture, the palette, different photos, and click on zones. We are going to undergo every stage intimately, and on the finish, you should have your individual full-fledged recreation which you could add to your electronic mail. With out additional ado, let’s get began.

Stage 1. The “moon” background picture

The “coronary heart” of the sport is photos. To start with, let’s put together the preliminary “moon” picture. We are going to colour it in a different way than different elements of the picture as a result of that is the very first layer. For the “moon,” we put together a picture with clean area as a substitute of the moon and a background round it that matches the background of the e-mail (in our case, it’s white).

Moon Image for the Game

(Click here to get the image)

Vital observe: The dimensions of our photos has been doubled. Because of this, for a recreation that’s 420px huge, we made the picture 840px huge.

Subsequent, we uploaded the created picture into the template and, after that, inserted the HTML block into the empty construction so as to add the next code:


<model amp-custom>
    .container-image 
        place: relative;
        width: 410px;
        peak: 410px;
        margin: 0 auto;
    
 
    .container-image div 
        place: absolute;
    
 
    .container-image span 
        show: block;
        width: 100%;
        peak: 100%;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cowl;
    
 
    .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%;
        peak: 100%;
        left: 0;
        prime: 0;
    
 
    .layer-1 span 
        background-image: url(https://zlnfb.stripocdn.electronic mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/photos/layer0102.png);
    
 
    .colours ul 
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: heart;
        show: flex;
        justify-content: heart;
        align-items: heart;
    
 
    .colours li 
        show: inline-block;
        margin: 0 5px;
    
 
    .colours li:first-child 
        margin-right: 8px;
    
 
    .colours li span 
        show: inline-block;
        width: 42px;
        peak: 42px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px stable #fff;
    
 
    .colours li .lively 
        border: 2px stable #333;
    
 
@media solely display screen and (max-width: 600px) 
        .container-image 
            width: 250px;
            peak: 250px;
        
    
 
</model>
<div class="container-image">
	<div class="layer-1"><span></span></div>
</div>
<div class="colours">
    <ul>
        <li class="btn-color-1"><span class="lively"></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>

The container-image class is chargeable for the scale of the sport. In our case, the sport is 410 by 410 pixels within the desktop model and 250 by 250 pixels within the cell model. You possibly can change sizes right here for those who want totally different ones.

Contained in the container-image block, there can be blocks with the courses layer-1, layer-2, layer-3, and many others., which we are going to place in the appropriate spots utilizing absolute positioning. In these blocks, there’s a span tag with photos.

The block with the colours class is a colour palette. The types already point out colours for every button btn-color-1, btn-color-2, and many others., so you possibly can substitute them with your individual.

As soon as the code is inserted, you’ll see a crescent moon picture and colour panel.

Basic Game Look

Stage 2. The palette

The following step is to make the colour palette clickable and present which colour is chosen. To grasp what colour is chosen, we are going to create a “colour” variable, and once you click on on every aspect of the palette, we are going to write the worth 1, 2, 3, and many others., into it.

As a way to make it, change the block with the palette to the next code:


<div class="colours">
<ul>
    <li class="btn-color-1"><span class="lively" [class]="colour == 1 || !colour ? 'lively' : '' " position="button" tabindex="1" on="faucet:AMP.setState(colour: 1)"></span></li>
    <li class="btn-color-2"><span [class]="colour == 2 ? 'lively' : '' " position="button" tabindex="1" on="faucet:AMP.setState(colour: 2)"></span></li>
    <li class="btn-color-3"><span [class]="colour == 3 ? 'lively' : '' " position="button" tabindex="1" on="faucet:AMP.setState(colour: 3)"></span></li>
    <li class="btn-color-4"><span [class]="colour == 4 ? 'lively' : '' " position="button" tabindex="1" on="faucet:AMP.setState(colour: 4)"></span></li>
</ul>
</div>

Because of this, you’ll change this:

Spot for Adding Palette Code

To obtain the code like this:

Palette Code After Pasting

On this code, in an effort to make the weather clickable, we add the next attributes: <span position=”button” tabindex=”1″ on=”faucet:AMP.setState(colour: 1)”> 

Let’s contemplate each intimately:

  • position=”button” — a required attribute that should be added together with on=”faucet:…”, it modifications the position of the aspect;
  • tabindex=”1″ — required attribute, units the order wherein focus is acquired when shifting between components utilizing the Tab key. The transition happens from a decrease worth to a bigger one, for instance, from 1 to 2, then to three, and so forth;
  • on=”faucet:” — click on occasion handler;
  • AMP.setState( colour: 1 ) — a technique that lets you create and alter variables and their worth.

To point out the lively aspect, we created the “lively” class, and we added it to the aspect that the person clicks on.

The primary colour is chosen by default, so it already has the “lively” class assigned, and we added the next test to it:

[class]=”colour == 1 || !colour ? ‘lively’ : ” “

This can be a shorthand notation of the situation, actually that means that if the colour variable is the same as 1 or if it has no worth, then the category can be ‘lively’ in any other case there isn’t a class.

[class] — the category attribute is written in sq. brackets as a result of that is how AMP specifies attributes whose values will change dynamically.

For all different colours, we add a shortened situation: if the worth of the colour variable is the same as the colour quantity so as (2, 3, 4, and many others.), then we add the ‘lively’ class:

[class]=”colour == 2 ? ‘lively’ : ” “

The following step can be portray the “moon.” To do that, we add the already acquainted attributes to the span tag in a block with the layer-1 class:


<div class="layer-1">
    <span position="button" tabindex="1" [class]="layer1" on="faucet:AMP.setState(layer1: colour ? 'colour'+colour : 'color1')"></span>
</div>

That is what the code appears like earlier than pasting:

Spot for Adding Code for Proper Coloring Work

And that is the code after pasting:

Coloring Code After Pasting

  • [class]=”layer1″ — we substituted the category title from the layer1 variable;
  • on=”faucet:AMP.setState(layer1: colour ? ‘colour’+colour : ‘color1’)” — when clicked, a layer1 variable is created wherein, if the colour variable exists, ‘colour’ is written plus the worth of the variable (1, 2, 3). The result’s the category ‘color1’, ‘color2’, and many others. (if there isn’t a colour variable but, the category can be ‘color1’).

After that, we add the code with the required types:


.layer-1 .color1 
    background-color: #ffe14d;

 
.layer-1 .color2  
    background-color: #c9a3c7;

 
.layer-1 .color3  
    background-color: #ff5cd9;

 
.layer-1 .color4  
    background-color: #4099d4;

Stage 3. Different photos

The primary layer can now be painted over. Subsequent, it’s worthwhile to put together the picture for the following layer. We divided the remainder of the image into items that can be painted over and made sprites for every bit with all of the potential colours that can be out there (and which are within the palette).

Vital observe: The space between items of various colours should be the identical.

Part of the Images With Color Variations

Listed here are the sources of the photographs for the sport:

Subsequent, it’s worthwhile to add layer 2 and three underneath the block with the category layer-1 and the corresponding types for them. The layer code appears like this:


<div class="layer-2"><span position="button" tabindex="2" [class]="layer2" on="faucet:AMP.setState(layer2: colour ? 'colour'+colour : 'color1')"></span></div>
<div class="layer-3"><span [class]="layer3"></span></div>

Whereas the model code appears like this:


.layer-2 
        width: 29.51%;
        peak: 21.46%;
        left: 15.37%;
        prime: 14.39%;
    
 
    .layer-2 span 
        background-image: url(https://zlnfb.stripocdn.electronic mail/content material/guids/CABINET_f61060edca5f418873af71474512724771bf46977f7bb9ac2b4e11c4c017d541/photos/layer02.png);
    
 
    .layer-3 
        width: 17.56%;
        peak: 36.34%;
        left: 12.68%;
        prime: 46.34%;
    
 
    .layer-3 span 
        background-image: url(https://zlnfb.stripocdn.electronic mail/content material/guids/CABINET_248acda4694b320e2c1fa70ebbbeec3aac0ca1fb50efddf513440d327edb6bf5/photos/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;
    

Coding tip: To position the items of the picture in the appropriate locations, you possibly can assign a background picture for the guardian block with the total picture. Within the console preview (F12 for Home windows), transfer the piece to the specified place, then copy this worth and place it within the code. When all of the items are positioned, take away this model from the picture.

Placing Images in the Correct Places

Types are wanted as we set the block sizes and prepare the photographs of their locations with them. All values are in % so that you just don’t want to vary them on cell. Additionally, for every colour, a mode has been added that exhibits the a part of the image equivalent to this colour.

The way to calculate all the pieces in %:

For instance, let’s take a “star” image. This image helps present the way you calculate all the pieces correctly.

Star Images With Color Variations

(Click here to get the image)

First, it’s worthwhile to decide the scale in pixels, which is the true measurement of the image. On this case, the scale is 1210px by 175px. Nevertheless, now we have 5 stars in a row, and we’d like the width of 1, so we divide the width by 5. As well as, all our photos are twice as massive as needed, so we additionally divide these dimensions by 2.

Whole width: 1210/5 = 242/2 = 121px, peak 175/2 = 87.5px.

Now it’s worthwhile to convert all the pieces to %. The width of our block with the sport is 410px is 100%, the width of the picture is 121px is X.

Because of this, we get:

X = 121*100/410 = 29.5%

We do the identical with peak:

X = 87.5*100/410 = 21.34%

The values “left” and “prime” can instantly be set as percentages.

Stage 4. Click on zones

Now, you possibly can change colours and paint over the “moon” and “stars” however not the “tail.” The clicking zone for photos is rectangular, so it overlaps a number of the different photos and appears like this:

Coloring Game Click Zones

Because the “stars” don’t overlap different footage, we positioned a click on on the picture itself, however the “tail” overlaps a part of the “moon,” so it’s needed so as to add further components for an accurate click on zone.

To do that, we have to add two blocks for the tail after the block with the layer-3 class:


<b class="layer-3-1" position="button" tabindex="3" on="faucet:AMP.setState(layer3: colour ? 'colour'+colour : 'color1')"></b>
<b class="layer-3-2" position="button" tabindex="3" on="faucet:AMP.setState(layer3: colour ? 'colour'+colour : 'color1')"></b>

Spot for Pasting Click Zone Code

Please observe that these are the blocks for the “tail,” which makes use of the layer3 variable, so, for them, we additionally use the layer3 variable.

As soon as pasted, it’s time so as to add some types:


.layer-3-1,
    .layer-3-2 
        show: block;
        place: absolute;
        cursor: pointer;
    
 
    .layer-3-1 
        width: 10.49%;
        peak: 17.07%;
        left: 14.39%;
        prime: 45.85%;
        remodel: rotate(10deg);
    
 
    .layer-3-2 
        width: 11.95%;
        peak: 16.83%;
        left: 16.83%;
        prime: 60.24%;
        remodel: rotate(-21deg);
    

The fundamental code is similar as within the earlier layers — solely within the types, we added a remodel to make the press zone extra exact.

If we add a border to the blocks we simply inserted, we are going to see a brand new click on zone:

Proper Click Zones Placement

This manner, we add all of the items of the picture. For people who overlap others or overlap themselves, we add further blocks — on which we connect a click on occasion.

Endgame message

Ultimately, it’s value including a block with a message that can be proven when the person colours all of the layers. To do that, it’s worthwhile to add a block with textual content that can be proven when all of the variables — layer1, layer2, layer3, layer4, and many others. — have a worth.

For the time being, now we have solely added three layers, so solely three variables are listed. On the finish of the sport, they need to match the variety of layer variables. 

So as to add a message on the finish of the sport, copy this code underneath the block with the colours class:


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

The hidden attribute is specified right here as a result of the block ought to be hidden at the start of the sport. Then, the [hidden] attribute provides or removes the hidden attribute, relying on the situation inside. In our case, the block can be hidden so long as at the very least one of many listed variables is empty. As quickly as all variables obtain a worth, the hidden attribute can be eliminated.

Additionally, our recreation block is hidden after coloring. To do that, we have to add one other situation to the block with the colours class:

[hidden]=”layer1 && layer2 && layer3″

Condition for Endgame Message

The [hidden] attribute can be added when all variables have a worth and the block is hidden.

Full recreation code pattern

So, now we have checked out all of the parts of the sport, what they’re for, and the way they work. After all of the manipulations, the sport code ought to appear like this:


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

The ultimate recreation made with this code will look and work like this:

Finished Coloring Game

Use this code as you would like. Experiment with the sport, footage, types, and many others., to grasp these recreation mechanics and create a very distinctive coloring recreation on your electronic mail marketing campaign.

Wrapping up

As you possibly can see, the sport mechanics are fairly fascinating and weird, however creating them entails a posh creation course of requiring programming expertise for those who create the sport from scratch.

We created this information in order that any marketer, no matter their technical savvy, can recreate the mechanics and add the sport to their electronic mail newsletters to shock recipients and make electronic mail interactions extra partaking.

As well as, our skilled electronic mail programmers are at all times completely satisfied to assist deliver your {custom} AMP content material concepts to life, elevating your electronic mail recreation to unprecedented heights.

Create distinctive emails with Stripo