A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

Javascript Super Mario in 14kb Code

Here’s an experiment in keepings things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.

We also have MIDI music embedded as base64-encoded data: URI’s. No music for IE, though, and it seems all the other browsers each have different, minor problems with it, but it sort of works.

It is by no means a complete clone or anything, it’s not even an entire level and several key things are missing, such as mushrooms, Koopas and stuff. It was merely done as a sort of proof-of-concept and to see how small it could get.

Performance varies somewhat between the different browsers, but Firefox, Opera, Safari and IE are all playable. The latest WebKit nightly seems to give Safari a speed boost.

Be sure to click the mouse on the game if Mario won’t move. When you die, you have to reload the page to start over. And yes, you can move left. Sorry.

I tried to download the Javascript file and simulate it in my local machine to see if it really works, and it does! Amazing!

This entry was posted in General and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>