Building a Whack-A-Mole Game With rn-sprite-sheet

A walk through building this classic game with a new twist

Today I’m going to recreate another classic game in React Native: Whack-A-Mole. The mechanical version of this game was an arcade fan-favourite in the late ‘70s and early ’80s. Since then numerous clones on various devices have been made.

TL;DR #1: Watch the video:

TL;DR #2: Grab the source code from GitHub

The gameplay is super simple. On the screen we display 12 slots. Moles will pop out of these slots and then disappear again at a rapid pace — the players’ goal is to hit as many of them on the head as possible. As a twist to the original, I want to introduce three different kinds of moles:

• “Neutral”: this mole deals no damage if not “whacked”, but when hit the player will still receive points.
• “Feisty”: This mole attacks the player if not whacked in time, dealing damage.
• “Healer”: If whacked it will restore the player’s health a little bit.

The original game is more aimed at children — I think the introduction of different moles will spice things up just enough to broaden its appeal!

The Setup

We’ll require some animations. In my opinion, the best way to animate things in React Native is by using the rn-sprite-sheet library. You can install it by running the following:

npm install --save rn-sprite-sheet

This library is amazing at defining and running small animations from a single image file containing equal-sized frames.

For example, if you have six image frames for an animation, each of them 40x50 pixels, you can create a single 240x50 image, paste your frames and you’re ready to go.

However, in real-life your frames won’t be equal-sized. I spent a good couple of hours creating my sprite sheet by hand and got annoyed — to the point that I just…