Tuesday, April 8, 2008

Play Super Mario Bros in 14kB Javascript

Here's an experiment in keeping things small and confined to one Javascript file. A piece of the old Super Mario Bros Nintendo classic. There are no external image or sound files, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE).

Hey! While you're here, why don't you also check out the new Games section, a section completely dedicated to online JavaScript web games! And subscribe to the feeds to get the latest updates and games! Now let's play Super Mario...

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.

There is also 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.


Play Super Mario Bros without music
Play Super Mario Bros with music

Or try the larger double size version:
Play Super Mario Bros (2X) without music or Play Super Mario Bros (2X) with music

The script has been compressed to 14kb with the YUI compressor.
Here's the uncompressed script (35kb), if anyone is interested. The structure may look a bit weird, a lot of things have been moved around to get better compression.


If you liked this, be sure to check out the Super Mario Kart JavaScript game as well. Have fun!
 
Copyright 2008-2009 Jacob Seidelin - Privacy Policy - Some icons by Bruno Maia, IconTexto