Check out my
new book!
HTML5 Games book
8 kilobytes of Mario
So, I had this stupid idea for a rather alternative way to compress things like Javascript using the canvas element. Using this technique, the small 14 KB Super Mario game I previously posted now only takes up about 8 KB.
The files involved are a PNG file and a small Javascript file. In short, the real Javascript is embedded in the PNG file and then read and executed by the small JS file. I will post more about this compression later.
The reason it's a somewhat stupid idea (or one of the reasons, anyway), is that it's only supported by canvas enabled browsers and only those that implement the getImageData method, which renders it pretty useless for real life use at this point.

For now, that means only Firefox, Opera Beta and the recent WebKit nightlies work.

Check it out here
⇓ 19 comments Michel

Your work is absolutely incredible. I'm a big fan.

May 4, 2008 at 7:08 AM
Execvator

Problems using Fx3 (Build: 2008050206)

syntax error
http://www.nihilogic.dk/labs/mario8kb/m.js
Line 3

May 4, 2008 at 7:13 AM
Zim

Amazing!

May 4, 2008 at 8:32 AM
Jacob Seidelin

Thanks.

@execvator: Works fine for me. Don't know what causes your error.

May 4, 2008 at 10:35 PM
Alexander

nihilogic - the best!

May 5, 2008 at 2:15 AM
Execvator

Sorry about that, works great now with build 2008050406. The previous one just gave me something that looked like utf-8 'encoded' as us-ascii.
Anyway, really great idea and nice work as always!

May 5, 2008 at 5:05 AM
Schill

You sir, are crazy! Keep up the good work. Much respect. Unfortunately you're probably going to get a few hacker types fiddling with this idea now for embedding exploit code - though since IE doesn't support this, perhaps it's still fairly safe. ;)

May 5, 2008 at 8:36 AM
Mathieu 'p01' Henri

FWIW the irony of encoding a PNG in JS, encode the JS in PNG then decode the PNG in JS to generate a PNG is not lost on me :)

May 6, 2008 at 1:45 AM
Jacob Seidelin

Hah, you're quite right.

Hm. Maybe I can rework it to have code, sprites and music stored next to each other in the same PNG and just reference the offsets from the code.

May 6, 2008 at 2:08 AM
Aral

Awesome! :)

May 12, 2008 at 8:28 AM
Free Xbox 360 Elite

Aww, no flag at the end ? :(

Still, awesome that you made it even smaller than the last time.

May 15, 2008 at 3:08 AM
Sean

You sir, are a genius!
It's a pity so many people still use IE/non-canvas browsers, otherwise the web could advance much further, and with something like processing.js, do away with flash. Keep up the great experimentation.

August 23, 2008 at 6:14 AM
Freestuff

Marie the best !!

August 26, 2008 at 8:26 AM
Phobos

Amazing :) cool idea

November 17, 2008 at 6:26 AM
Prince_Porter

That's absolutely insane, I really need to increase my programming knowledge, this is exactly the kind of stuff I want to be able to do.

October 26, 2009 at 8:17 PM
Anonymous

Amazing work, it's just a shame that you hide the source code so that others can learn from you.

This has everything you need to make a real game. Image loading, image moving, good use of variables, basic collision, and terrain scrolling.

Could you please make the source public so that we can learn?

November 25, 2009 at 9:29 PM
hearn

Neat, but this is just gzip compressing the code in a less efficient way than using the browsers built in gzip support (which runs on all browsers):

$ ls -lh mario_compressed.js.gz
-rw-r----- 1 hearn eng 7.1K Apr 9 2008 mario_compressed.js.gz

So you can have this size improvement just by tweaking your server config. No PNGs required.

March 2, 2010 at 5:23 AM
Jacob Seidelin

whooooosh

March 2, 2010 at 5:48 AM
Anonymous

I had problems.
1. Every block, even ones with mushrooms, give you coins.
2. I got ahead of the scroll and it locked up.
3. At the end, there was a block, no flagpole, and a big white space.

January 26, 2011 at 12:32 PM
Post a Comment