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.
A Timer is used to call
stage.update() at about 60 frames per second, and then some mouse event handlers are added for:
- Hovering over the top of a row
- Clicking on the top of a row to place a disc
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 .