How to Create Whack-a-Mole in Your HTML5 Game - dummies

How to Create Whack-a-Mole in Your HTML5 Game

By Andy Harris

The whack-a-mole genre re-creates a classic physical arcade game in your HTML5 game. In the original game, you have a series of holes and a big hammer. As a mole pops out of a hole, the user smacks it with a hammer, and it goes back into the hole. This game is easy to re-create for both mobile and traditional desktops, and it can be frantic fun.


This version creates a number of moles in random positions. Each mole has two states: up and down. The mole starts in the down state. A mole in the down state has a random chance of popping up in any frame. A mole that is currently up stays up for a limited time.

If the user clicks a mole in the UP state, the mole drops and the player earns a point. If the mole stays up past a time limit, the mole drops, and the player loses a life.

How to build a mole in a hole game

The main concept of this game is the mole. It’s a simple Sprite object with two states. Everything the mole does is really about changing states.

The mole has a few properties that separate it from a normal sprite:

  • state: The most important property of the mole is state. This can be either UP or DOWN. Various game behaviors cause the state to change.

  • UP and DOWN: These values are treated like constants, and they are used to indicate the two possible states of the mole.

  • imgUp and imgDown: These are the images representing the two states. Note that both state images should be the same size, or the sprite will appear to jump around the screen when it changes state.

  • popupPerc: This property indicates the likelihood a mole that’s currently down will pop up. The initial value is 1 percent. Remember this value will be checked 20 times per frame, so at 1 percent, a down mole will pop up (on average) every 5 seconds. Modify this value to change the game difficulty.

  • popupLength: This property indicates how long a mole will stay visible once it has popped up. The default value is 3 seconds, but you can adjust this to make the moles disappear more quickly or stay visible longer.

Here are the main methods of the mole object:

  • setState(state): Sets the state to the specified state value. States are stored as constants (UP and DOWN). When the state is changed, the mole’s state property is modified, and the mole’s image is modified to reflect the current state. If the state is set to UP, a timer begins, which will be used to track how long the mole is visible.

  • CheckClick(): Checks to see if the mole is currently clicked. If the mole is currently UP, hide the mole and increment the score.

  • CheckTime(): The behavior of this function depends on the mole’s status. If the mole is currently down, randomly determine if it should pop up. If the mole is up, check to see if the popupLength has been exceeded. If so, lose a life and consider ending the game.

The checkTime code is the most interesting code in the mole game, so here is that method:

  tMole.checkTime = function(){
   //if down, consider popping up
   if (this.state == DOWN){
    randVal = Math.random();
    if (randVal < this.popupPerc){
    } // end if
   } else {
    //if up, check to see how long we've been up
    time = this.timer.getElapsedTime();
    if (time > this.popupLength){
     //lose a life
     if (lives < 0){
      alert("You lose");
      document.location.href = ";
     } // end if
    } // end if
   } // end if
  } // end checkTime

Other features of the mole game

Once a single mole has been created and is acting correctly, it’s easy to build a lot of them. As usual, there is an array to handle a large number of objects of the same type. Modify the NUM_MOLES constant to change the number of moles in the game.

Also note that a virtual joystick has been added if the scene registers a touch object. This will cause the touch screen to act just like a virtual mouse, and will allow the game to be played on a touch device.

One more interesting feature is the high score mechanism. The computer keeps track of the high score on that particular machine. The high score mechanism uses a relatively new feature called localStorage. It’s similar to the well-known cookie mechanism, but safer, more powerful, and a lot easier to use.

The getHighScore() function loads the current high score. If there isn’t yet a high score, it will be set to zero.

 function getHighScore(){
  //get the high score on this machine using localStorage
  highScore = parseInt(localStorage.getItem("moleHighScore"));
  console.log("highScore: ", highScore);
  if (highScore == "null"
   || highScore == null
   || isNaN(highScore)){
   highScore = 0;
  } // end if
 } // end getHighScore

The saveHighScore() function is called when the game ends. It checks to see if the current high score has been exceeded. If so, the new high score is saved.

 function saveHighScore(){
  if (hits > highScore){
   alert("New high score!");
   localStorage.setItem("moleHighScore", hits);
  } // end if
 } // end saveHighScore

Even if the user leaves the page or turns off the browser, the high score will be maintained.

The localStorage mechanism only keeps track of the current browser. It cannot be used to check global high scores. This requires server-side programming.