Wednesday, April 9th, 2008

Super Mario; 14KB of JavaScript

Category: Canvas, Fun, Games, JavaScript

Jacob Seidelin is doing great work, and for something fun, he build a piece of Super Mario in just 14KB of JavaScript:

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.

Posted by Dion Almaer at 12:39 am
15 Comments

+++++
2.5160689200723E+48 rating from 127 votes

15 Comments »

Comments feed TrackBack URI

What can I say Mario, …..Super! :-)

Comment by OndraM — April 9, 2008

I

Comment by jdalton — April 9, 2008

+10, I heart Mario! I did something similar back in 1999 but it was probably larger than 14kb (used images) and definitely wasnt as cool. Very nice!

Comment by jdalton — April 9, 2008

but does it work on the wii?

Comment by genericallyloud — April 9, 2008

Very impressive!! only 14KB, *without* gzip compression!

I ran your JS through the compressorrater (http://compressorrater.thruhere.net) and

It looks like you could get that to under 7KB with gzip compression!

Now if only I could get ExtJs down to that size (am I dreaming?)

Comment by ArthurBlake — April 9, 2008

Wow, the performance is significantly better then I anticipated.

Comment by tj111 — April 9, 2008

@ArthurBlake: Thanks. I actually used your compressor rater trying to decide which compression technique to use. It’s very nice!

Comment by CupBoy — April 9, 2008

Cool, a perfect excuse to play mario at work! Just tell people you’re researching javascript, hehe ;)

Comment by RichardReddy — April 9, 2008

A few JS animals have written crazy stuff like this, Mathieu “P01” Henri (of Opera) has a 3D Tomb game in

Comment by Schill — April 9, 2008

Hm, broken HTML because I said “in < 4 KB” of JS. (Again).

Comment by Schill — April 9, 2008

Ah hell, while I’m at it, this JS/Canvas game is also quite nifty.

Comment by Schill — April 9, 2008

Whoa, good job! but it seems like some of the data has not been properly encoded in base64 because I got a broken Mario when I first opened it with UTF-8. Anyways, looks really good!

Comment by nagoon97 — April 9, 2008

This is very cool. I did something similar, I ported a version of Freecell in written in javascript / DHTML to work on the iPhone. Then put the whole thing into a bookmarklet using data:URI so its all in the URL and can play without an internet connection. See http://jonathanleech.blogspot.com.

Comment by JonathanLeech — April 10, 2008

my childhood love, quite nice to see it with javascript

Comment by seanlin — April 12, 2008

just awesome and really smooth…

Comment by maximeguilbot — April 14, 2008

Leave a comment

You must be logged in to post a comment.