7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Game Development
  2. Game Design

Create a Whack-a-Mole Game in Flash With AS3

Scroll to top
Read Time: 10 mins

In this tutorial, you'll learn how to create your own version of the classic Whack-a-Mole game - only, our unfortunate creatures of choice will be worms. You'll be able to modify the speed of the game and the hit boxes of the worms.

Step 1: Brief Overview

We'll use common ActionScript 3 classes, specially Mouse Events to create an entertaining Whack A Mole like game in Flash

Step 2: Flash Document Settings

Open Flash and create a 480 pixels wide, 320 pixels tall document. Set the Frame rate to 24fps.

(Note: there's a mistake in the image above; the width and height are the wrong way round! Thanks to Roel Traa for pointing this out.)

Step 3: Interface

A simple and friendly interface will be used, featuring several shapes, buttons and MovieClips, continue to the next steps to build this GUI.

Step 4: Background

Select the Rectangle Tool (R) to create a 320x480px #CC9866, #BA7743 rectangle and center it in the stage.

Step 5: Title

Use the Text Tool (T) to add a title using your favorite font. You can also use some of the graphics of the game to make it nicer. The worm graphic used in this tutorial was downloaded from here under a Creative Commons License.

Step 6: Buttons

Use again the Text Tool to create three buttons as shown in the image above. Convert them to buttons and give them descriptive instance names to easily use them later in the code. Convert the graphics in stage to a single MovieClip and name it TitleView, remember to check the Export for ActionScript box.

Step 7: Options

Clear the last view except the background and create a series of Dynamic TextFields as shown in the image, give them descriptive instance names and convert them to buttons. Use the Rectangle Tool (R) to create an arrow button that will be used to go back to the Title Screen.

Step 8: Credits

The Credits screen will appear in front of the Title Screen, use the graphics and fonts used before to create it. Name it CreditsView and remember to check the Export for ActionScript box.

Step 9: Game Screen

Simple cartoonish graphics are used in the Game Screen, there's not really a procedure to create this graphics just use your imagination and the Flash drawing tools to create something like the image above. Every hole in the game screen is a MovieClip that contains an animation of the Worm coming out, it's basically a simple frame by frame animation, be sure to check the source to for better comprehension.

Step 10: Alert

An alert will be shown when all the Worms have shown, it will display the final score you reached. Use the Rectangle Tool to create it and add a descriptive name to the bottom TextField, set its instance name to AlertView and mark the Export for ActionScript box.

Step 11: TweenNano

We'll use a different tween engine from the default included in flash, this will increase performace as well as being easier to use.

You can download TweenNano from its official website.

Step 12: Soungle

We'll use Sound Effects to enhance the feeling of the game, you can find the sound used in this example in Soungle.com using the keyword hit.

Step 13: Set Document Class

We'll make our application interactive by using an external class, add its name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.

Step 14: Create a New ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.

Step 15: Class Structure

Create your basic class structure to begin writing your code.

Step 16: Required Classes

These are the classes we'll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

Step 17: Variables

These are the variables we'll use, read the comments in the code to know more about them, some of their names are self explaining so there will be no comment there.

Step 18: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.

It calls the necesary functions to start the game. Check those functions in the next steps.

Step 19: Start Button Listeners

We'll start by adding the mouse listeners to the buttons in the title view, this will take us to the game, options or credits screen.

Step 20: Add Options

The Options Screen is tweened when the user clicks the options button, a mouse listener is added to the arrow button to remove it when done.

Step 21: Options Listeners

This listeners are added when the Options Screen in shown, they handle the buttons on stage. More of its behavior in the next steps.

Step 22: Set Default Option

The default options are set by this lines, they set the currently selected buttons which are slow and big.

Step 23: Remove Option Listeners

A parameter will determine if the listeners are added or removed, the next lines are executed if that parameter doesn't indicate to add the listeners.

Step 24: Hide Options

The arrow button will remove the Options screen when clicked.

Step 25: Change TextField's Color

This function runs when the speed buttons are pressed, its first part changes the text color of the buttons, it changes the current option to white and the new selected value to yellow.

Step 26: Detect Clicked Button

This is the second part of the speed function, it detects the button clicked checking its name and increases/decreases the Timer accordingly.

Step 27: Select Hit Area

The next function runs when a button on the hit area selection is clicked. It behaves in the same way as the last function.

Step 28: Show Credits

The Credits screen is shown when the user clicks the credits button, a mouse listener is added to the full MovieClip to remove it.

Step 29: Hide Credits

When the Credits screen is clicked it will be tweened back and removed from the stage.

Let's stop here to make a quick test and make sure that our game code is working:

Keep in mind that some lines have been commented as some functions haven't been created yet.

Remember that the Milestones are included in the source files, so if for some reason your file doesn't mimic this one take a look at the source to see what can be causing that.

Step 30: Show Game View

The following lines remove the Title screen and leaves the Game Screen visible. It also calls a function to prepare the game to be played.

Step 31: Worms Mouse Listeners

We use a for statement here to add a Mouse Listener to every hole MovieClip in the stage. This will make the Worms clickable.

Step 32: Stop Holes MovieClip

As the Hole MovieClip has more than one frame, it need to be stopped to prevent all worms to show at the same time.

Step 33: Start Timer

This timer will start the countdown and make to Worms appear randomly in the stage.

Step 35: Check if Finished

This code checks if the Worms shown have not yet passed the limit and calls an Alert if true.

Step 36: Change Hit Area Size

The selected hit area in the Options screen will be changed here on every worm using the scale properties of AS3.

Step 37: Stop Animation When Finished

A few milliseconds will pass where the Worm will be visible, when the MovieClip reached its last frame it will stop and return to the first frame.

Step 38: Hit Worm

This function handles when a Worm is clicked, it will basically play a sound, raise the score and hide the worm again.

Step 39: Check Worms Hit

You can add a custom bonus if all the Worms where hit by changing the next lines of code.

Step 40: Alert

This function will stop the game and reveal the final score, it also adds a mouse listener to reset the game when clicked.

Step 41: Restart

The next function will reload the swf, restarting any variable, method and returning to the Title Screen.


As you can see many of the game variables/parameters can be modified and adapted to your needs. Try creating your own version of the game!

I hope you liked this tutorial, thank you for reading!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.