willhart.io ALL POSTS ALL TAGS

HTML5 Game using easel.js

Posted by Will Hart on 2012-06-05

As an exercise I recently wrote an HTML5 game using Easel.js, which is a relatively cool javascript library that helps when working with canvas objects. Although I did find the easel documents a little confusing to begin with, it only took a handful of hours before I had a working Connect Four game!

For those with a short attention span, you can find out what Connect Four is, view the source code, or play the game.

The easel.js code is actually a lot simpler than it looks. Basically a spritesheet is used for the graphics and BitmapAnimation objects are used to show the particular image on screen. The animations are set to single frames without repeating.

Connect Four Spritesheet

A Timer is used to call stage.update() at about 60 frames per second, and then some mouse event handlers are added for:

  1. Hovering over the top of a row
  2. Clicking on the top of a row to place a disc

Connect Four screenshot

Finally a function had to be written to determine if there was a winner when a disc was placed. This was done with some basic recursion - have a look at the checkForWinner() function in the source code.