Create a Whack-a-Mole Game in HTML5 With EaselJS

A few weeks ago, I showed you how to create a Whack-a-Mole (well, Whack-a-Worm) game using Flash and AS3. Now, following on from my introduction to EaselJS, we’ll see how to use that library to create the same game with the HTML5 canvas and JavaScript.

Step 1: Brief Overview

Using pre made graphics we will code an entertaining Whack A Mole like game in HTML5 using the EaselJS library.

The player will be able to click the worms on the screen and get points.

Step 2: Interface

A simple and friendly interface will be used, this involves multiple shapes, buttons, bitmaps and more. The worm graphic used in this tutorial was downloaded from here under a Creative Commons License.

The interface graphic resources necessary for this tutorial can be found in the attached download.

Step 3: Get EaselJS

The EaselJS library will be used to build our game – make sure you read the Getting Started tutorial if you’re new to this library.

You can download EaselJS from its official website.

Step 4: HTML Structure

Let’s prepare our HTML document, it is a simple HTML structure to begin writing our app.

<!DOCTYPE html>
<html>
	<head>
		<title>Whack A Worm</title>
	</head>
	<body>
	</body>
</html>

Step 5: Hide Mobile Hightlight

Let’s add a little bit of CSS too, this line will remove the default highlight when you tap on an element using a mobile browser; without this the mobile experience would decrease drastically.

<!DOCTYPE html>
<html>
	<head>
		<title>Whack A Worm</title>

		<style>*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}</style>

	</head>
	<body>
	</body>
</html>