Lemieux Design

Play the game now

The HTML5 Canvas element is a container that can be used to dynamically draw graphics with a lot of help from JavaScript. The canvas tag itself is very simple:


<canvas id="gamespace" width="800" height="600"></canvas>


An ID is given to the canvas so that we can reference it with JavaScript and a width and height is defined. Since the canvas is a graphical space, you’ll notice that when you right click on it, your browser will allow you to save it as an image.

You can draw some basic shapes and text into the canvas with JavaScript. You can also import graphics into the canvas. This makes the canvas a dynamic environment for building games, dynamic charts, and other web applications.

EaselJS

The native code for working with canvas is a little cumbersome. Having come from a Flash/ActionScript background, EaselJS is a much better way to work with canvas. Part of CreateJS, a robust JavaScript library specifically geared towards developers coming from an ActionScript background, EaselJS has a tremendously easy to read API and syntax that’s immediately recognizable.

Along with EaselJS, you can add animation to objects in the canvas with TweenJS. If you’ve ever worked with TweenLite from Greensock, you’ll feel right at home with TweenJS.

No HTML game is complete without sound effects and cheezy soundtracks. You can add audio to the canvas with SoundJS. Very similar to how AS3 handles sound, SoundJS lets you load sounds, and has complete and progress methods.

Finally, you can create attractive preloaders for loading all of the game content with PreloadJS. PreloadJS can monitor load events and can track the progress of loaded objects.

The online documentation and downloadable samples are a great starter. You can get the code via CDN, github, or zip.

Game Setup

In this example, I’m creating a simple guessing game using Star Wars as a theme. There will be a few visual questions presented to the user. If they answer correctly or incorrectly, visual and audio feedback will be provided. If they get all of the questions correct, they are presented with a congratulatory screen with visual and audio feedback. If they answer incorrectly on any questions, they are presented with a different screen with negative visual and audio feedback.

The HTML

There isn’t a lot going on in the HTML file itself. A few styles and a lot of JavaScript library loading. Here, I am keeping everything local, but you can use the CDN links for the libraries. It took a little while to figure out exactly which files needed to be loaded and in which order. I looked at the example files for help. These files were minified, but I changed the names before linking them to the HTML file. In total, there are 6 libraries I’m pulling in and my own script file, which contains all of the logic for the game. The JS files are loaded in as follows:

• js/easeljs.js
• js/tweenjs.js
• js/game.js
• js/Sound.js
• js/HTMLAudioPlugin.js
• js/WebAudioPlugin.js
• js/preloadjs.js

Imagery and Sounds

I didn’t spend a great deal of time on the imagery, but was able to quickly find what I needed on Google Images. I made the buttons and the interface features in Photoshop and exported as PNGs. Then I used imageOptim to compress the files further to make them smaller. Some of the splash screens are pretty big. Fortunately, there’s a lot of sound bites all over the web, so I also made quick work of finding quotes from the Star Wars movie for the game. In the SoundJS example files, I noticed that 2 file formats were being used: MP3 and OGG. The MP3′s were easy to find, but I had to convert to the OGG format. So I used Media.io in order to do the conversions and download them. The audio files are very small.

The JavaScript

The initial setup of the game is in the init() function at the top of the code. Here, a bunch of variables are being set for game parameters, text, bitmaps to import, an array of sounds to import, and the preloader code.

The variables are a comma separated list of constants. I start by declaring the canvas:


stage = new createjs.Stage(canvas)


Next we need the constructors for all of the images to be loaded. EaselJS has a bitmap class for that. Here’s an example:


logo = new createjs.Bitmap("img/logo.png")


For creating text, EaselJS has a Text class. The constructor is very similar to the Bitmap class as seen above:


inst = new createjs.Text()


For those times when we need to center objects on the canvas, we declare a variable for the centerX and centerY positions on the canvas:


centerX = canvas.width/2,
centerY = canvas.height/2


For game progress, there are a few variables that need to be set:


questionPosition = 0,
numCorrect = 0,
numWrong = 0,


questionPosition will help us keep track of which question we’re on. numCorrect and numWrong will keep track of the question answered correctly and incorrectly.

We create an array of sounds called manifest that we’ll be using in the game with paths to the different versions (MP3 and OGG). Each sound is given an id that we can call on later when we want to play that sound.


assetPath = "snd/",
manifest = [{src:assetsPath+"Theme - Star Wars.mp3|"+assetsPath+"Theme - Star Wars.ogg", id:"theme"},
{src:assetsPath+"blaster.mp3|"+assetsPath+"blaster.ogg", id:"buttonSnd"},
{src:assetsPath+"powrweak.mp3|"+assetsPath+"powrweak.ogg", id:"powerWeak"},
{src:assetsPath+"cocky.mp3|"+assetsPath+"cocky.ogg", id:"cocky"},
{src:assetsPath+"haveyou.mp3|"+assetsPath+"haveyou.ogg", id:"haveYou"},
{src:assetsPath+"strong.mp3|"+assetsPath+"strong.ogg", id:"strong"}],


Each sound is inserted in brackets and the two types of sounds are separated by a pipe.

For preloading the images, we need to set up a queue and make an array. PreloadJS can do more than preload images, but I was only interested in preloading the image content, since the sound files are very small.

The queue looks like this:


queue.loadManifest(["img/starfield.png","img/logo.png","img/START-GAME.png"...]);


Then, we tell the queue to load. You can fire functions with event listeners to watch for complete, progress, Here, I’m only reporting the results to the console:


queue.load();
queue.addEventListener("complete", showManifest);
queue.addEventListener("progress", showProgress);
function showProgress(evt) {
var perc = evt.loaded / evt.total;
console.log(Math.ceil(perc*100).toString());
}
function showManifest() {
console.log("Files are loaded");
}


For all the sounds to play, a listener is added and the sound manifest is then registered. You can create fancy progress bars for the sounds to load and such with a progress handler. I didn’t need that here, so the function fileload() is simply reporting to the console when the files are all loaded:


createjs.Sound.addEventListener("fileload", createjs.proxy(soundLoaded, this));
createjs.Sound.registerManifest(manifest);

function soundLoaded(event) {
console.log("sounds loaded");
}


At the beginning of the game, the Star Wars theme music plays as the logo fades in and then the instructions appear. To play any sound with SoundJS we use the play() function and feed it the id of the sound as a string:


createjs.Sound.play("theme");


Just as in the original Star Wars movie, the logo is seen on a starfile up close and then fades off into the distance. This effect is achieved using TweenJS and EaselJS. Much like the setInterval class in AS3, the Ticker class in EaselJS allows you to set up simple animations of canvas objects. Here, the starfile and logo are added to the stage:


stage.addChild(bg,logo);


The Ticker class is started with a frame rate of 30fps and then the logo is animated with the scaleX and scaleY properties – which should be very familiar to AS3 developers.


createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", startAnim);
function startAnim(e) {
logo.x = centerX;
logo.y = centerY;
logo.scaleX -= 0.005;
logo.scaleY -= 0.005;

stage.update();
}


In addition to scaling down in size, the logo fades out. I decided to try this with TweenJS. First, we set the alpha of the logo to 1, just as in ActionScript the alpha values are on a range from 0 – 1. Then, we perform the tween. This is a long, slow tween over 3 and a half seconds long. TweenJS allows you to chain animations together. In this case, I’m calling an onComplete() function which brings in the instructions and the start button:


createjs.Tween.get(logo).to({alpha: 0},3600).call(onComplete);


This is very similar to the way we construct tweens with TweenLite in AS3:


TweenLite.to(mc, 3.5, {alpha:0});


In TweenLite you specify the object to be tweened, the duration and the property or properties to be tweened. In TweenJS you specify the object, the property or properties to be tweened and the duration.

Finally, we come to then end of the game initialization with the onComplete handler. This will bring in the instruction text and the start button. As in ActionScript, event handlers need to be removed for garbage collection. I didn’t come across anything in the online documentation for this, but I know it’s a best practice.


removeEventListener("tick", startAnim);


The start button and the instruction text are both tweened in with TWeenJS. In EaselJS, there are several text properties that can be set. Here, I’m setting some basic settings like font, color, and lineHeight. For the font and color settings, you can specify those as you would with CSS. Once the text properties are set, the text is added to the stage and the alpha property is tweened.


stage.addChild(startButton);
createjs.Tween.get(startButton).to({y:370}, 1000);
startButton.x = 245;
startButton.y = 620;

stage.addChild(inst);

inst.alpha = 0;
createjs.Tween.get(inst).to({alpha:1},1000);


Questions

The question functions are very similar. A question area is dynamically drawn on the stage using the drawRoundRect() method. There are 5 parameters, X, Y, Width, Height, and Radius. The question text is added to the stage and 3 images related to the question are shown. The user clicks on the image they think is correct. We increment questionPosition. Either the answerCorrect() or answerWrong() functions will be called when they do that. TweenJS is used again to fade in the images:


questionPosition++;
stage.removeChild(inst,startButton);

ewok.onClick = function() {
answerWrong();
}
gungan.onClick = function() {
answerWrong();
}
wookie.onClick = function() {
answerCorrect();
}


The order in which you add items to the stage is pretty important here. For example, if I added the question area last, it would hide all of the text and graphics. By adding it first, the text and graphics are loaded on top of it.

Again, garbage collection is important. I created a clearScreen() function to remove the some of the basic stuff and additionally removed objects in each subsequent question using removeChild().

Of course, the user starts the game by clicking the start button. Here, there are no rollover effects on the button. Those certainly could’ve been added with EaselJS, but rollovers don’t translate for tablet and mobile use anyway. Clicking the start button calls the question1() function and game play begins with the sound of a blaster!


startButton.onClick = function() {
question1();
createjs.Sound.play("buttonSnd");
}


Checking the Answers

When a question is answered, it will be handled by answerCorrect() or answerWrong() methods, which will: play a sound, show a visual and allow the user to continue to the next question. If all of the questions have been answered, the continueFinal function is called.


function answerCorrect() {
// console.log("The force is strong with this one!");
createjs.Sound.play("strong");
questionCorrect = true;
numCorrect++;
stage.addChild(rightAnswer);
rightAnswer.x = 50;
rightAnswer.y = 87;

if(questionPosition==3) {
continueFinal();
}
}


The answerWrong() method is very similar only it plays a different sound, has a different text message, and shows a different image.

Ending the Game

If all of the questions have been answered, continueFinal() is fired, which basically shows a continue button. Once again, TweenJS is used to animate the button into place. When the user clicks on that button, the endGame() method is called.


function continueFinal() {
stage.addChild(continueButton);
continueButton.regX = 384/2;
continueButton.regY = 56/2;
continueButton.x = centerX;
continueButton.y = 0;
continueButton.alpha = 0;
createjs.Tween.get(continueButton).to({y:520, alpha: 1}, 1000);

continueButton.onClick = function() {
endGame();
}
}


At the end of the game if you’ve answered all of the questions correctly, you’ll see an image of Luke, Leia, and Han and hear some audio. If you’ve missed any questions, then you’ll see Darth Vader and Obi-Wan Kenobi dueling with their lightsabers and hear Darth say “Your powers are weak old man”.


function endGame() {
clearScreen();
stage.removeChild(continueButton);
var results = new createjs.Text();
results.text = "";
results.font = "normal 24px Myriad Pro, 'MyriadPro', sans-serif";
results.color = "#298FC2";
results.textAlign = "center";

results.text = "Your powers are weak old man!";
stage.addChild(results);
results.x = 400;
results.y = 450;
}
}


And that’s the end of the code review. There’s only 3 questions in here, but other questions can easily be added here. I suppose the questions could be randomized too. The point of this whole thing was to get a handle on CreateJS and see what it could do and to compare it with ActionScript.

Summary

I’ll admit, that the first time I looked at CreateJS, it was daunting and I was skeptical. But once I looked at the examples and really dug into the code, I could immediately see the potential and I hope you can too.

Download the source files below:

Download