A Platform Game Using HTML5 Canvas

Nearly 15 years ago, when I was all of 15 years old, I wrote this little platform game which I have recently ported to Javascript/HTML5.  It is a kind of Mario clone and at the time I named it “Fred Jones in Adventureland”… hmm, not a great name.

It was a fun game to write and I learned a lot about game development and even game design in the process of writing it, some of which I occasionally put in to practice in my current job.

The game remains somewhat incomplete; the player has unlimited lives and unfortunately there are only 5 levels.  But as it stands it is a playable game and hopefully a little bit of fun.  There are a couple of small surprises in the levels along the way too.

Browser Compatibility

If you’re using Microsoft Internet Explorer 7 or 8 the game will run painfully slow (Update: The game now supports the Google Chrome Frame plug-in.  If you are using Internet Explorer I recommend you install this plug-in.).

It also will not run at all in earlier versions of Internet Explorer, Firefox 1.0 and I believe Opera 9 and earlier.  This is because these browsers do not implement the necessary parts of the HTML5 specification.  Please upgrade or switch to a different browser.

Controls

Left Arrow: move left
Right Arrow: move right
Spacebar: jump

Play!

Click the link above to play the game.

Technical Details

This is a port of the original game to HTML5/Javascript.  This means it now runs in any web modern browser.

Unlike most web games the game does not use Flash.  The <canvas> HTML5 element is used to draw all the visual elements.

All the code for the game is all available to read if you hit “view source” in your browser and I invite you to take a look.

I was pleasantly surprised by the performance of the <canvas> drawing operations and the modern javascript implementations, it runs at the same framerate it always has on pretty much all browsers except Internet Explorer.