Test your audience’s reflexes with this skill game. Tap Tap refers to the action of the participants when playing: by tapping with their finger on the mobile screen or clicking with the mouse, they will catch the different elements appearing and receive points.

With the Tap Tap application, players have to catch the elements that appear randomly on the board thus to score as many points as possible. The fastest the better!

The tutorial is organized as follows:

1. Presentation of the game

2. What is the user participation flow like?

3. Create the promotion

4. Configure the Tap Tap game

   • Step 1. Configure the Gameplay Settings

   • Step 2. Customize the design of the board

   • Step 3. Instructions screen

   • Step 4. Score screen

5. Customize the design and finish the setting

6. Manage score and publication of winners

1. Presentation of the game

The Tap Tap game is an online game based on users' skill that consists of catching the elements that appear on the board. As long as the game lasts, for each element caught, players will receive points. The user will have to pay attention because agility as well as speed are important. Aside from time, the difficulty of the game also depends on the speed of the elements moving and the grid of the board, which can accommodate more or fewer squares where elements will appear. In this tutorial we explain all the steps that will allow you to create the Tap Tap game, which has the following features:

• You can customize the elements that emerge from the boxes, with images of your logo, your products or any other image.
• You can adapt the difficulty of the game by configuring the size of the grid and the speed with which the different elements of the game will be moving.
• You can add elements that subtract points to add excitement to the game and make it more fun.
• You will be able to add a “Super OK”: an element that gives more points than the rest, and the “Super KO”, which remove all the points from the user's score.
• You can limit the time the user has to play: from 30 to 90 seconds.
• Multiple options to reward participants: you can assign the prize(s) to the participants with the highest score, hold a raffle among the participants with the most points, raffle a prize among all participants, etc.

2. What is the user participation flow like?

What will the user engagement experience be like? The promotion is made up of different pages that the user will navigate through when interacting with the promotion to participate, such as: the initial welcome page, the login and entry form pages, where the user will register with their data, the game page itself, etc. As a whole, the different pages will make up the structure of the promotion and the flow of participation that the user will follow to complete the promotional mechanics of the promotion.

Additionally, as the promotion administrator you will be able to select which participation flow you want users to follow. Specifically, there are three different possible participation flows:

• Identified Mode, where the user must identify themselves and register before being able to play.
• Visitor Mode, where the user plays first and then identifies and registers.
• Anonymous Mode, where the user participates without identifying or registering.

The choice of one modality or another will determine how the user's participation and experience in the promotion will be.

Learn in this article how each participation flow works, and discover more about the different pages that make up a promotion.

3. Create the promotion

To create your tap tap game, first create the promotion from your dashboard.

In the following tutorial, you will see the first steps to create your promotion so that you do not miss any important point. The tutorial presents the main management options that are available to you to manage and edit the promotion:

Enter here to discover the first steps to create your promotion.

4. Configure the Tap Tap game

Below we explain all the steps to create the Tap Tap game. To do this, enter the Editor of the promotion > Pages > Participation, and click on the "Edit" icon to start configuring the game. From there, you will be able to start customizing the game entering the "Tap tap" tab, where you will find the following customization options:

Step 1. Gameplay settings

1. Basic gameplay options

First you will find the options to customize and configure the game. Specifically, you can customize the following points:

• Grid: allows you to adjust the size of the grid, to have fewer or more cells depending on how difficult you want the game to be. There, you can choose between:
  • • 2x 2
    • 3x3
    • 4x4
    • 5x5
• Speed: allows you to adjust the speed at which the elements in the game will move, appearing and disappearing, being able to choose between:
  • • Slow
    • Normal
    • Quick
• Game Time: allows you to set the time you want to give users to complete the game (between 30 and 90 seconds).

2. Customize the characters that will come out of the boxes

Next, you will find the "Items" section, where you will upload the images of the elements that the game will display, that is, the characters or objects that will come out randomly from each cell, and that users must catch to gain points.

To add more suspense to the game and offer more gameplay options, the system allows you to upload 4 different types of elements:

• "OK": the element that users must catch to obtain points.
• "KO" [optional]: this item subtracts points in case the user catches it.
• "Super OK" [optional]: this item gives more points than the "OK" item if caught.
• "Super KO" [optional]: this element eliminates all the points achieved by the user so far. Player can continue playing, but the score is reset to 0. 

Images specifications:

• Number of images that can be added:
  • • "OK" item: You can add up to 3 different images to create different OK items.
    • "KO" Element: maximum 3 different images.
    • "Super OK" element: maximum 1 image.
    • "Super KO" element: maximum 1 image.
• Image size: 300x300px.

3. Customize the board squares

Next, you can customize the image for the game boxes or cells, which is a square made up of a base image and a background. The elements will come out of the base and appear on top of the background.

Note: the base image is mandatory.

These are the specifications to design the box images:

• Base image: 300×100px

• Cell background color: you can define the background color of the window or box.
• Cell background image:  upload your own image, the size should be: 300×300px.

Next, we show an example of how the image of the item is presented when appearing "from" the background image:

Step 2. Customize the design of the board

Next, click on the "Design" tab to customize the layout and style of the grid where the game is presented. Here you will find the following customization options:

1. Customize the grid layout

First of all, you will be able to customize the display of the game cells:

You can configure the following options:

• Gap between cells: select the space you'd like between each of the grids of the game.
• Padding (top, bottom, left and right).
• Grid foreground image (800x800px): the close-up image to be displayed above the grid.
• Grid background image (800×800px). Image that is located behind the grid.
• Background color. Alternatively, you can set a background color that will be displayed behind the grid.

2. Customize colors

Next, you can configure which colors you want to use for the game and the different effects when the players tap on the items.

• Colors:
  • Color when tapping on an "OK" cell.
  • Color when tapping on a "KO" cell.
  • Color when tapping on an empty cell "FAIL". 
• Effects when pressing (OK and Super OK):
  • Sound effect.
  • Animation.

Step 3. Instruction Screen

Under the "Instructions" tab you can customize the screen that appears before starting to play, which presents a summary of how the game works, so that users know how to play before accessing.

By default, a legend is shown with the break down of points obtained or deducted for each of the items of the game. 

You can customize this screen with an additional description, an image as well as the text of the button where users will click to start playing.

Step 4. Score Screen

Under the "Score Screen" tab you can customize the colors and texts that will be displayed on the screen that the user will see after completing the game, and where they see a summary of the game with the score achieved. You can customize the following elements:

• Feedback text: message displayed at the top of the screen, which by default comes with the text "Good job!".
• Background color: you can adapt the background color of this screen to adapt it to the brand's corporate colors.

5. Customize the design and finish the setting

Once you have configured the tap tap game, the next step is to finish the configuration of the other options and pages of the promotion: customize the design template with your own colors and texts, add the legal texts, the viral content, etc.

Check out the tutorial to finish the configuration and customization of your promotion.

6. Manage score and publication of winners

The scoring system in the Tap Tap game works as follows:

1. If you touch an OK element, the points given vary depending on: 
   • If the element is rising and appearing when touched, 50 points are added.
   • If the element is lowering when touched, between 49 and 1 points are added, depending on the height of the element within the box when it is tapped. (The lower the element is when touched, the lowest amount of points received).
2. If you touch a KO element, 50 points are deducted from the score.
3. If you touch a Super OK element, the number of points given varies depending on:
   • If the element is rising when touched, 150 points are added.
   • If the element is lowering when touched, between 149 and 1 points are added, depending on the height of the element inside the box when it is tapped. (The lower it is when touched, the lowest amount of points received).
4. If you touch a Super KO element, as a player you will lose all the points received so far and will return to 0 points.
5.  Touching an empty window/box (without any element) will deduct 20 points.
6. Touching a space without windows/squares of the board (for example, the space between squares or the outer edges within the game) will also deduct 20 points from the player's score.

How to publish the winners

Easypromos provides a complete Prize and Winner Management system that will allow you to create the prize or prizes that you want to give away to the users who participate in the game, as well as configure how you want to assign the prizes and select the winners. Next we present four different ways to assign the prize to the winners, according to your choice:

1. Assign the prize to the player in the first position in the Ranking. In this case, follow the steps of this video tutorial that explains how you can assign the prize to the fastest player. (Prize type: manual).

2. Raffle the prize among the users who have obtained the highest scores. Follow the steps of this video tutorial that explains how you can create the prize to be raffled among the players with the highest scores, for example, the 5 players with the most points. (Prize type: by random draw).

3. Run a random draw among all the users who have participated in the game. Follow the steps presented in this tutorial to create the prize and draw it among all participants. (Prize type: by random draw).

4. Distribute a prize to all participants. Create prizes of the "Upon participating" type to give away direct prizes to all users who have entered to play. In addition, you can condition the delivery of the prize to obtaining a minimum score in the game.