Steve and I are currently working on an HTML5 Canvas book for O’Reilly (in our spare time). It is giving us a chance to investigate the Canvas in detail and we are applying our game development skills to small and medium sized projects as examples for the book. Geo Blaster Basic is one such example project. It is a very thinly veiled copy of Asteroids (my favorite all-time video game). There are actually quite a few versions of HTML5 Asteroids out on the internet, but I didn’t want to consult any of them before I built my own.
(click to play it – it will open a new page)
This gave me a chance to really dive into how the Canvas operates as a display mechanism. For the uninitiated, the HTML5 Canvas is akin to having a single Sprite object in Flash AS3. That’s right, you only have one object per Canvas. This means that the developer needs to use all of the tricks in the proverbial book (hopefully our book) to make a game with multiple objects. Luckily, the Canvas architects understood this and added just enough functionality to make Flash-like games a possibility.
Geo Blaster Basic has been built with pure “paths”. This means that everything is drawn as vector-like lines onto the Canvas and transformed “on-the-fly” on each frame. I have set the FrameRate to 40 and it seems to run pretty well on my 2.5 year old iMac using Safari, Chrome (some sound delay problems), Firefox, and Opera.
Game sound is a big challenge when working with HTML5 and the Canvas. Steve goes to great lengths in his sound chapter to create a sound management set of code to help alleviate some of these problems. This game features an early version of his code that is used to help sound play pretty well across the listed browsers (we have not tried it in IE 9).
A version of this game using pure tile-sheets is going to be my next project and it will be also be featured in the book. This will help alleviate the calculations necessary for drawing and transforming on each frame and hopefully make the game play better on hand-held devices.
The controls are simple: arrows (left, right, and up for thrust) and Space Top Fire.