Step-by-step: how to set up a super simple in-app game

In the previous post, I talked about the possibility of using gamification with in-app messaging to boost promocode redemption rates.

As an ardent game lover, gamification in marketing strategy is a topic particularly close to my heart. In a business context, putting games and competitions into your product/service can have a very positive effect on user engagement.

Here I will take you through the steps to set up the simplest of all video games. The concept is well-known: tap the screen as many times as possible within a set time period.

For this basic Martech Hacks version, the game functionality runs as follows:

The User sees an initial screen with some explanation messaging, a tap zone target and a button to start the game
The User clicks the start game button. They then have 10 seconds to tap the zone as many times as possible
At the end of the 10 seconds, the game ends and the User’s score is returned. They can try again if they like.

Here’s how the final game looks. Feel free to play!

I’ve used a modified version of Braze’s modal in-app template as a starting point. In the interests of time and space, I won’t go through the initial template and basic HTML/CSS.

Here’s the template we will start with:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
  <style>
      <!-- Add CSS here -->
  </style>
</head>
<body>
  <div class="outer">
    <div class="modal">
      <!-- Add HTML elements here -->
    </div>
  </div>
</body>
<script>
   <!-- Add Javascript here -->
</script>
</html>

All the game functionality is written with plain old vanilla Javascript – no dependencies. I’ve kept the code as simple as possible and hopefully, easy to understand.

Let’s get started!

1. Create a new project in your coding tool of choice (I’m using Visual Studio Code). Paste the basic in-app template you can see above.

2. Add in the following HTML. It has the various elements needed for the template like the text, button and tap zone (see the in-code comments for more details). If you open it now, you’ll see that the elements are wrongly sized and all messy

<div id="header-container">
  How many times can you tap in 10 seconds?
</div>
<div id="tap-container">
  <!--Update the tap target image here-->
  <img src="https://cdn.pixabay.com/photo/2014/03/25/17/00/target-297821_960_720.png">
</div>
<div id="counter-container">
  <!--This div will hold the tap counter-->
</div>
<div id="button-container">
  <div id="play-button">
    Play!
  </div>
</div>

3. To organise the elements, we need to add some CSS. Add the following styles before the closing </head> tag. The container elements have fixed percentage heights to make sure everything is laid out properly. Again, I’ve left some comments on the most important points in the code.

#header-container {
  /* Using viewport height (vh) should scale the size of the font to fit the user's smartphone screen*/
  font-size: 3vh;
  padding: 5%;
  font-weight: 600;
  color: #ffffff;
  height: 20%;
}

#tap-container {
  /* Tap zone takes up half of the screen */
  height: 50%;
  padding: 5%;
}

/* Tap zone target image styled here */
#tap-container img {
  /* Max width and height set to 100% to ensure the tap target doesn't overflow its container div*/
  max-width: 100%;
  max-height: 100%;
}

#counter-container {
  font-size: 3vh;
  padding: 5%;
  font-weight: 600;
  color: #ffffff;
  height: 20%;
}

#button-container {
  height: 10%;
  padding: 4%;
  display: block;
}

#play-button {
  background-color: #DD001D;
  /* Put slightly rounded edges on the button*/
  border-radius: 5px;
  width: 100%;
  height: 100%;
  /* Use flex box here to make it easy to horizonally + vertically centre the text inside the button */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Add the shadow background to make the button standout */
  box-shadow: 10px 10px 8px -6px rgba(0, 0, 0, 0.31);
  color: #ffffff;
  font-size: 3vh;
  font-weight: 700;
}

4. Now our template is looking good, we can move on to adding the game functionality. For this we will need some Javascript. To start with, we need a function that starts the game when the ‘play’ button is clicked. Add the following code. Note that the event listener uses ‘touchstart’ as the trigger. This will allow clicks to be captured on smartphone touchscreens.

/* Define the initial tap counter variable */
var counter = 0;
/* This event listener is waiting for a tap on the play? button to trigger the start_game function */
document.getElementById('play-button').addEventListener("touchstart", start_game);

function start_game() {
  /* Add the tap counter and start messaging */
  document.getElementById('counter-container').innerHTML = '<div id="counter">0</div> times tapped'
  document.getElementById('header-container').innerHTML = 'Tap when ready!'
  /* Hide the start game button */
  document.getElementById('button-container').style = 'display:none'

  /* Leave this 'count_taps' event listener commented out for now */
  /*document.getElementById('tap-container').addEventListener("touchstart", count_taps);*/
}

5. You can now ‘start’ the game, but nothing else happens. For that, we need to add the main controlling functions: counting the number of taps made & incrementing the counter, and the 10 second timer. Add this code to your project. Make sure to ‘uncomment’ the count_taps event listener in the code you added on the last step (remove the /* */ parts)

/* Function triggered every time the target is tapped */
function count_taps() {
  /* If the counter is 0 i.e. hasn't been tapped yet, the game is launched and the timer function started */
  if (counter == 0) {
    document.getElementById('header-container').innerHTML = 'Tap! Only <div id="timer">10</div> seconds remaining...'
    start_timer()
  }
  /* Increment tap counter by 1 and update in the in-app message */
  counter += 1
  document.getElementById('counter').innerHTML = counter
}

function start_timer() {
  /* 10 seconds on timer */
  var time_remaining = 10;
  var end_timer = setInterval(function () {
    /* Remove 1 second */
    time_remaining--;
    /* When counter reaches 0, trigger end_game function and stop timer */
    if (time_remaining <= 0) {
      clearInterval(end_timer);
      end_game()
    /* When game is running, update the time remaining in the in-app message */
    } else {
      document.getElementById("timer").textContent = time_remaining;
    }
  }, 1000);
}

6. Almost done. Finally, we need to add some functions to end the game and allow the user to try again if they wish. With this code, we will display some end game messages, modify the event listeners and loop the game back to the start when ‘try again’ is tapped.

function end_game() {
  document.getElementById('header-container').innerHTML = 'Uh oh!<br> Time\'s up'
  document.getElementById('counter-container').innerHTML = 'You tapped ' + counter + ' times. Well done!'
  /* Remove the event listener to prevent more taps being registered when game is ended */
  document.getElementById('tap-container').removeEventListener("touchstart", count_taps);
  document.getElementById('play-button').innerHTML = 'Try again?'
  /* Show the button again, but with try again? rather than play? */
  document.getElementById('button-container').style = 'display:block'
  /* New event listener to trigger the try_again function */
  document.getElementById('button-container').addEventListener("touchstart", try_again);
}

/* Reset the counter and re-trigger start_game function */
function try_again() {
  counter = 0;
  start_game();
}

As you can see, the basic game is not complicated, but there are many ways to extend this project and add more interesting functionality.

In the previous post, I mentioned increasing promocode redemption rates as one of the key benefits of in-app gamification. You can easily add a conditional clause that will show a promocode on reaching a certain score.

7. Add this code snippet to the end_game function (replacing the existing end game message) and you can show a promocode if the screen is tapped more than X times (in my example, 20 times).

/* Show success message if more or equal to 20 taps*/
if (counter >= 20) {
  document.getElementById('counter-container').innerHTML = 'You tapped ' + counter + ' times. Well done! You\'ve earned 20% off your next order with code: GAMEWINNER'
} 
/* Show failure message */
else {
  document.getElementById('counter-container').innerHTML = 'Oh no! You tapped ' + counter + ' times. Tap 20 or more times to get a 20% promocode for your next order'
}

Here are some more extension ideas:

Add sharing buttons to facebook or other social media
Save scores to a database and then show leaderboards with high scores
Give some customisation options: allow users to choose the tap time period, for example
Assign different values for accuracy on the target, so a hit in the bullseye gets more points

Thanks for reading! You will find the complete fast tap game code in the Martech Hacks Github repo.

Let’s get started!

Keep reading

Setting up a football prediction campaign with Braze in-app messages

How to make dynamic web pages using data stored in a Google sheet

Google Apps Script database: writing dynamic data to Sheet via API