Vanilla JS Whack-A-Mole

I’ve been brushing up on some basic vanilla JS lately, and I’ve really been digging tutorials by WesBos. The latest one was a re-creation of the classic Whack-A-Mole game.

Although you may not be as fast as One Punch Man in the video above, this game will help you gain finger dexterity and quickness of the wrist!

The basic overview of this game was to have a mole pop-up for a set amount of time, keep score of each mouse event(whack) and have a timed amount once the start button is hit.

I took the liberty of adding a few more pieces of functionality I thought were needed. I included a viewable timer so the player can see the countdown, as well as a high score tally. The high score feature uses the browsers localStorage in order to remember the highest score and record when that record is broken.

Here is what the game looks like when you load the page.

Currently, the high-score is 12. Not too bad, but definitely beatable.

The app consists of 6 functions.

• startGame
• countdown
• surprise
• randomTime
• randomHole
• bonk

As you might imagine, the startGame function is called once the start button is clicked. That resets the current score, displays the highscore and starts the countdown process as well as the surprise function.

Get Peter Chicarielli’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The countdown begins a ten second timer, and the surprise function utilizes the randomTime and randomHole functions. These last two functions look like this:

function randomTime(min, max) {
 return Math.round(Math.random() * (max — min) + min)
}
function randomHole(holes){
 const idx = Math.floor(Math.random() * holes.length)
 const hole = holes[idx]
 if(hole == lastHole) {
   return randomHole(holes)
 }
 lastHole = hole
 return hole
}

As stated above, these two helper functions are used for the surprise function

function surprise() {
 const time = randomTime(500, 1200)
 const hole = randomHole(holes)
 hole.classList.add('up')
 setTimeout(() => {
  hole.classList.remove('up')
  if(!timeUp) surprise()
 },time)
}

The app used some variables as well for pulling out data from our HTML. We kept track of our score board, the holes, moles and clock among other variables defined globally.

In order to keep track of the score locally, my countdown function looks like this:

function countdown() {
 seconds = document.getElementById(‘countdown’).innerHTML;
 
 if (seconds == 0) {
  temp.innerHTML = “BuzZzzZZ!!!”;
  if(score > highScore){
   highest.textContent = score
   localStorage.setItem(‘High Score’, score)
   alert(`New High Score! ${score} Moles Whacked!`)
  }
 return;
 }
 seconds--;
 temp.innerHTML = seconds;
 setTimeout(countdown, 1000);
}

This sets our ‘High Score’ key in our localStorage to the current score if it is larger than the current high score. I’ve also put an alert window explaining this milestone.

I noticed during development, that a user can click on the mole several times while it is visible on the screen and the score would go up on each click. This is not how I envisioned the game to be played. Clicking on a mole should render that mole un-clickable until it pops up again. However, during testing, I realized I was clicking multiple times anyway in order to increase my score and quickly found it to be another part of the game. I always enjoyed little glitches or easter eggs in games, regardless of whether or not they were planned so I decided to keep this one the way it is.

Be sure to check out more of Wes’s tutorials at www.wesbos.com if you liked what you saw here! Thanks for reading!