HTML5 / Javascript gamedev postmortem

Posted by
August 23rd, 2011 2:47 pm

So I chose to make a game with HTML5 / Javascript using the JawsJS html5 gamelib.

I used the <canvas>-tag since I wanted to make a freeform level with pixelperfect collisions, basically I made the whole thing in graphics gale, could as well have done it in paintbrush.

The new HTML5 <canvas> tag makes it easy to get the data in raw format, basically an array with RGBA values. From there on it’s to check collisions.. 1 pixel at the feet is a decent start.

The most annoying thing is probably the audio-formats that’s supported for the new <audio>-tag.

Safari doesn’t play OGGs for some lame reason, and Firefox doesn’t do MP3s. So all audio has to be provided in 2 formats.. also you wan’t detection at asset-loading time etc. I could have lived without that cruft.

Otherwise Javascript has become amazingly fast, I think V8 is faster then ruby and python. All browsers come with good debugging possibilites.

Javascript doesn’t have the traditional classes and inheritence, but rather prototypical inheritence.. which can be confusing at first.

What I love is the dynamic nature of objects in Javascript.. basically all objects are big key-value storages (hashes).

So you can whenever you want just set a new flag/property on whatever object.

/* Player.dead has never been defined or used at this point */

if(player.dead) { … do sometting …} // won’t throw any error.. played.dead will just return undefined

player.dead = true

if(player.dead) { … do something .. } // played.dead is now true and code will be executed

The biggest upside with javascript is ofcourse ppl not having to download anything. No virus-scan etc etc. Just instant gaming. And the big players are making the javascript engines faster on a daily basis.

Play my Javascript game here:

Here’s a teaser-shot from the game, you start in the “west prison” and have to find your way out of a huge castle.


Tags: , , ,

Leave a Reply

You must be logged in to post a comment.

[cache: storing page]