XNA Platformer, HTML5 Style

Sign in to queue


Today's project is a cool and fun example on the power of HTML5 and the canvas element. It shows how a game that was originally created in XNA, C# can be ported over to HTML5 and JavaScript. Yep, you read that right, a complete port of the game from XNA/C# to HTML5/JavaScript.

Plus it's not just a port, but also a detailed series on how it was done.

Oh yeah, and you also download the source too.

HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS

After a couple of hours coding with JavaScript, I’ve finally finished porting the XNA 4.0 Platformer game sample to HTML5/Canvas with the help of the EaselJS gaming framework. This article will provide you the game and the story of some of the questions I’ve asked myself while coding it. If you’d like to know how the game works, simply read the JavaScript commented code available at the end of this article. Please note that my main goal was to better learn JavaScript by writing pure JS code (with no form of dependency to the DOM) and to write a cross-browsers working game and cross HTML5 compatible devices when possible also.


And we're not talking just IE or desktops either...

Note: this game has been tested with success under IE9/10, Chrome, Firefox 6+, Opera 11+, IE9 on WP7 Mango and iPad 2. The text elements are not displayed under Opera as there is a bug with EaselJS on this topic. At last, if you really want to play to the game, an hardware accelerated browser is highly recommended. I’ve got 60 FPS in these conditions on my Sony Vaio Z13.

At the end of this article, you’ll find the complete non-minified source code of this game inside a ZIP archive to download. I’ve tried to comment as much as possible the code to make it self-explicit. I hope you’ll learn some interesting things while reading it. If you have any feedbacks and/or suggestions on it, feel free to add it as a comment to this blog’s post.

I’ve also already written 2 articles covering the basics of the logic behind this game here:

- HTML5 Gaming: animating sprites in Canvas with EaselJS
- HTML5 Gaming: building the core objects & handling collisions with EaselJS


Building the content manager

In the previous article, the download content manager wasn’t notifying the user of the progression of the download process which was very bad. Hopefully, adding this feature was pretty straight forward as you just have to have a tick() method to your object and update a text element on the stage to show the progression. You can find that by reading the ContentManager.js file.

Moreover, as my objective was to be compatible with all browsers, I’ve then encoded the music & audio elements both in MP3 and OGG. If you’d like to know more about this HTML5 Audio tag codecs story, I recommend you having a look to my colleague’s article: 5 Things You Need to Know to Start Using Video and Audio Today

Then, I’m downloading either the MP3 or OGG version using the following code:



Though if you're using IE9, there's added stuff just for you...


Here's some snips from the source;




Non-minified source code

As promised, you can download the source code and all the assets of the game here: HTML5 Platformer Non-minified.

I hope you’ve enjoyed this series of 3 articles around HTML5 Gaming. Maybe this will help you transforming your gaming ideas into an HTML5 reality!

If you're wondering what that canvas thing is in HTML5 and what you can do with it, if you're wondering if HTML5 is "ready", if you're wondering if there's a reason beyond all the recent HTML5/JavaScript chatter you might of been hearing, you should check this project out...

The Discussion

Add Your 2 Cents