Tutorial - Whac-A-Mole
Simon Dubreucq avatar
Written by Simon Dubreucq
Updated over a week ago

Description

Adapted from the famous arcade game, Whac-a-Mole is a reflex game mechanism in which users must click on an object / character randomly coming out of holes, with or without an object. This highly addictive game mechanism perfectly meets your engagement goals by maximizing the time spent and the number of games played by your prospects or customers. Moreover, the game is fully customizable, allowing you to adapt the mechanism to your brand universe.

Summary

Game Design

Before setting up your campaign, you must create the necessary graphic elements. Please check this article that will explain all the essential information for the graphic creation of your campaign: Creating your games graphics.

You can download all the elements for your module (standard size) in this pack including a graphic manual + 1 PSD file with standard dimensions:

Now it's time to set up your campaign!

Page setup

First of all, click on New Campaign then select the Whac-A-Mole mechanism. You will reach the campaign editor, where you will find the mechanism's 6 pages: Home (optional); Form; Whac-A-Mole; and the 'Won', 'Lost' and ' Already Played' pages. If you want, you can also add a teaser page and/or an end of campaign page.

Don't forget to set up your campaign settings now, by entering the campaign dates and importing the Rules and Privacy Policy.

Background image setup

Upload your desktop background images by clicking on the '+' icon under ' Background Image'.

To find out the graphics specifications for this module's background images, please check the 'Game design' section in this article.

You can also add a solid background color to surround your game pages - you can keep the default color or standardize your campaign with a color that reflects your brand or your game pages, for instance.

Game Settings

Limited participation/Number of participation: Set the number of games per day, week, month, campaign per user, then create and select your 'Already Played' page. If users try to replay the game, they will be redirected to this page.

Difficulty: Select the difficulty level you prefer (Easy, Medium, Hard). This will modify the ratios of the types of 'moles' that will appear in the game.

Animation type: Depending on the effect you want to obtain ,you can choose how the 'moles' will appear:

  • bottom to top

  • top to bottom

  • left to right

  • right to left

  • fade

  • scale

Number of lives: Determine whether users will have 1 to 5 lives, or unlimited lives (this last option is availble only if the chronometer has been enabled).

Enable chronometer/Seconds: Enable this option to increase the game difficulty, and then set the desired time. This means that players will have to make the best possible score before the allotted time runs out. Note that the game level increases during the game and that this change depends on whether the chronometer option has been enabled or not. There are three levels during the game, which will influence:

  • The ratios of the types of 'moles' that will appear during that particular level

  • The delay between moles

  • The time each mole is visible

Enable cursor: This will allow you to create a visual element for the cursor, which you can customize in the Design section. If this option is not enabled, the user will hit the mole with the mouse cursor.

Display result page: Select 'Display result page' so that users can find out whether they have won or not. To choose the result type, visit this page. Adjust the number of 'won', 'lost' and 'already played' pages accordingly.

Customizing the appearance

Background visual: This is the image containing the various holes from which the moles will pop up.

Cursor visual: If this option has been enabled, you will have to import a visual element for the cursor that will hit the moles. Be careful not to import a visual larger than the mole visual in order not to interfere with the game visibility.

Life visual: Import the visual element that will represent the user's lives (if you have not chosen 'unlimited lives').

Normal moles: Import a visual for your game's basic moles. A blow is enough to make them disappear and earn 10 points.

Penalty moles: Import a visual for your game's 'penalty moles', which players must not hit. A blow is enough to make them disappear and lose 20 points.

Stronger moles: Import a visual for these stronger moles. These moles must be hit twice to disappear, and will earn users 50 points.

Types of particles: You can enable various effects that will appear when the user hits the mole:

  • Smoke effect

  • Dust effect

  • Confetti effect

  • Image effect

You can choose the color of the particles or the images to be displayed when moles are hit.

The advanced options allow you to customize your introductory and end-game texts, as well as your loading bar.

Editing and preview settings

By clicking on the game area in the editor, you will be able to access the game preview as well as the edition of the game dimensions (to best integrate your game in a mobile application).

You will also find the "Edit the game engine" option.

Enabling this mode allows you to customize game rendering by changing its main elements. You can resize these elements so as to adapt them to your background image.

Holes: You can choose from 3 to 12 holes and configure their respective sizes and positions. A 'no mole's area' is visible to the left and right of the editing screen to prevent the holes from being cropped in Mobile View.

Playing area (or 'horizon'): Resizing this area influences the size you can give to the cursor because it changes the depth of the game, so there will be a size reduction effect when the cursor moves away from the player.

The size of the moles during the game depends on the size of the hole and the exit animation, according to these settings:

  • Vertical animations (bottom > top and top > bottom) : The width of the mole will be equal to the width of the hole

  • Horizontal animations (right > left and left > right) : The height of the mole will be equal to the height of the hole

  • Fade/Scale animations : The height/width of the mole will depend on the height/width of the hole

Example: If the hole is 50px wide by 80px high, the mole will be resized to a 50px width.

Preview of the different types of animations:

Vertical animations

Horizontal animations

Fade

Scale

Mobile setup

Once your desktop Campaign is set up, you need to switch to the Mobile view to import the dedicated background images and format your pages for this device.

To import Mobile background images, follow the same procedure as for Desktop background images.

Campaign launch and test

Once the desktop and mobile versions have been finalized, you can publish the campaign. Don't forget to check your campaign.

Other options available for the Whac-a-Mole module

Examples of Whac-A-Mole campaigns

Check out few examples of Whac-A-Mole campaigns below :

In this example, cracks appear on the windshield and the user must repair them with the "Reparbrise" tube. Bees sometimes interfere with the action and should be avoided.

Here, the user should try to bite quickly into the cookies that come out of their bag, while avoiding biting into random bombs.

Did this answer your question?