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 Issues

If you’re using Microsoft Internet Explorer 7.0 or higher the game will run awfully slow (Update: The game now supports the Google Chrome Frame plug-in.  If you are using Internet Explorer you should install this plug-in, otherwise the game will run slowly).

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 support for the necessary parts of the HTML5 specification.  Please upgrade your browser.

Controls

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

Play!

Click the link above to play the game.

Technical Details

The game you are playing here is a port of the original game to HTML5/Javascript.  This means it now runs within 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.

Video: Games I’ve written in MHEG

MHEG is a programming language & middleware found in digital set top boxes in the UK and elsewhere around the world.  This video briefly shows a few games I have written in MHEG while working at the BBC.

The games shown in the video are:-

1. ‘Nibbler’ – a Snake clone.
2. ‘Bounce!’ – really more of a tech demo than a finished game, but surprisingly fun.  Catch the green blobs but avoid the red one.
3. ‘Ping Pong’ – pretty self explanatory I think.

The games have never been broadcast.  I am hoping the powers that be at the BBC will let them go to air.  What do you think?  Would you like to be able to ‘Press Red’ and play games such as these?

Obviously the graphics could do with some work, but these games do at least prove the technology…

Leave a comment if you’d like to see the BBC do classic arcade style games on interactive TV.