8bitrocket.com
26Oct/100

Geo Blaster Basic on the HTML5 Canvas

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.

Play It Here

16Mar/100

Blaster Mines (Essential Flash Games book demo) (2010)

Game Demo From Essential Guide To Flash Games Book (2010)

Filed under: Games, Shooter No Comments
16Mar/100

No Tanks! (Essential Flash Games book demo) (2010)

Game Demo From Essential Guide To Flash Games Book (2010)

Filed under: Games, Shooter No Comments
16Mar/100

Flak Cannon (Essential Flash Games book demo) (2010)

Game Demo From Essential Guide To Flash Games Book (2010)

Filed under: Games, Shooter No Comments
16Mar/100

Pixel Shooter (Essential Flash Games book demo) (2010)

Game Demo From Essential Guide To Flash Games Book (2010)

Filed under: Games, Shooter No Comments
15Feb/100

Blaster Mines

Survive each level by blasting all of the mines in the 360 degree scrolling sector. When your shield is depleted, your game is over. Your ship will follow the mouse and auto fire.

Filed under: Games, Shooter No Comments
   
This site is protected by Comment SPAM Wiper.