Check out my
new book!
HTML5 Games book
20 Lines JavaScript Super Mario Tribute The good inmates over at the Ozone Asylum have a monthly JavaScript contest where the goal is to create something interesting in just 20 lines of "effective" code, each month having its own theme. I've been following it for a while and since this month's theme was "Your favourite video game", I figured it was about time I submitted something.

You may or may not know that I have a certain affection for both JavaScript game development and Super Mario, so I saw this as a chance to go back, start from scratch and have another go at getting some JavaScript Mario action. However, rather than attempting a remake of the original SMB, this is a bit different. Each single-screen level has two pipes, start and finish. Before exiting you must bonk all the [?]-boxes, collect the coins they spit out and stomp all the Goombas. There are 6 levels after which you just get to play the same levels again.

As with the previous Mario game, the tiles and sprites are all generated with pure JavaScript and DOM elements, no image files have been used. For this reason, the game is rather slow in Firefox 2. It seems to run best with IE7 but is also playable with Firefox 3, Opera 9.5 or Safari.

Since the contest is still running for a few days, I'll probably be polishing it a bit until then.

Play JavaScript Super Mario Tribute!

Edit: For those wondering, the rules in these contests are rather lax as it's hard to define just what exactly defines a "line of code". Generally the rules say that literal object declarations count as one line. Function declaration do not count. Commas should not be used to put multiple instructions on a single line.

The code has been formatted for the sake of clarity, but within the context of this contest, it can be squeezed into 20 of these "effective lines of code".
⇓ 32 comments James Urquhart

Great work, as always. And only 20 lines? amazing.

Only criticism so far is that mario moves a little too fast. Other than that, plays fine.

July 29, 2008 at 6:47 AM
Jacob Seidelin

Browser?
He does seem to run a bit too fast in FF3 and the ground seems more slippery. I'll try to tweak it.

July 29, 2008 at 7:01 AM
Mathieu 'p01' Henri

James Urquhart: Our definition of "effective" line of code is rather lax, but you'd be surprised to see what's possible within these loose constraints. Just look at the previous editions of the 20 lines JavaScript contests.

Jacob Seidelin: Well done Sir. Too bad the setInterval(foo,40) and the DIV "soup" manipulation are killing most browsers.

In the context of a 20 liner, it would have been perfectly OK to use an actual image for the sprites, thus saving a couple of lines and lots of CPU power.

I'll dig up the WIP of SMB in 8k I did around your release of SMB in 14k. The Canvas based sprite generation was quite compact, more so than your base128 approach, and generated an actual image usable as CSS sprites.

July 29, 2008 at 7:38 AM
Jacob Seidelin

@p01: Thank you. It is indeed possible to do quite a lot given the current rules of the contests, more than I had imagined. It's really just a matter of what tricks you feel comfortable doing.

Yes, I know it would've been ok to use images but it just felt like taking a step backwards now that I'd already done the JS sprite generating.

I'd be very interested to see how far you got with yours. I remember seeing the post about your 8KB version on OA and laughing when my PNG compressed version coincidentally also ended up at 8KB. The compactness of the code in the 14KB version was rather half-assed, I admit, so it'd be cool to see what an expert like you could do.

July 29, 2008 at 7:54 AM
James Urquhart

jacob,

Running in safari 3.1.2 here.

July 29, 2008 at 8:19 AM
Anonymous

Great job, and a surprisingly challenging game (at least for me trying to get used to changing directions mid-jump with my laptop keyboard). One issue, in the third level, I fell off the first set of ? blocks (where you have 3 levels each with a ? block) to the left, and got stuck, as Mario couldn't jump high enough to get back on the ledge, and you walled off any other access. Besides that, nice work

July 29, 2008 at 8:27 AM
Mathieu 'p01' Henri

Jacob Seidelin : Let's say I was amused by how META your approach had become :

Sprites image --> base128 DOM String mangled in JS --> JS encoded as a PNG --> load the PNG in JS, read the pixels and build a DOM String --> eval the DOM String --> which regenerate all the sprites

July 29, 2008 at 9:01 AM
Anonymous

Theres a glitch in level three where you fall to the floor on the left side and you cant get back up

July 29, 2008 at 9:34 AM
Jacob Seidelin

@p01: Heh, you're right, it got kinda silly. Only thing left is to do is put the PNG in a data: uri and have everything in code again. :)

@anons: Yea, don't know how I missed that.. I'm certain I placed some ?-boxes there but I guess they went missing. Fixed.

July 29, 2008 at 10:08 AM
Oliver

Why do you recommend ie7 or firefox 3 over safari? Afaict it works fine...

July 29, 2008 at 1:17 PM
Anonymous

I am amazed. So where does one go to see the 20 lines of code that make this game?

July 29, 2008 at 2:07 PM
Anonymous

http://www.nihilogic.dk/labs/20_lines_javascript/july08_super_mario/20linesofmario.js

July 29, 2008 at 2:22 PM
Jacob Seidelin

oliver: It was just my experience that it played best in those browsers, YMMV.

July 29, 2008 at 3:18 PM
Free Xbox 360 Elite

That was fun for a bit. I was sad about two things though. 1.) You can't die. 2.) No music.

But still very fun and impressive.

July 29, 2008 at 3:23 PM
E$

how do I get to the negative world?

July 29, 2008 at 3:47 PM
Evan

Nice. I like the fact it's kind of like an easy puzzle game Mario. Someone should develop that idea further. Good work though. Runs a little slow but playable in Firefox 3 on Leopard.

July 29, 2008 at 4:15 PM
Anonymous

the code is longer than 20 lines

July 29, 2008 at 7:07 PM
Anonymous

I'm counting 393 lines of code minus comments and white space. Still impressive, but somewhat misleading.

July 29, 2008 at 8:04 PM
Yasser

That is a m a z i n g. Hats off to you.

July 30, 2008 at 3:39 PM
Jake

Works perfectly with Safara 3.1.2 as well.

Nice job, found one tiny glitch and that's the down arrow key moves the whole screen down one line for me. Don't know if that's browser specific or not.

But hey, the job was done and it works.

Good stuff

July 30, 2008 at 4:06 PM
Paul

20 lines? That's incredible. The game works great and is a ton of fun :D

July 31, 2008 at 2:06 PM
AJYU

Just wanted to echo the great job done. At the risk of asking a question that defeats the purpose of the contest, do you have an expanded non-20 line version of the game that I could look at?

August 18, 2008 at 4:26 PM
PascalAschwanden

This is really good for just 20 lines! That must be some really clean condensed code. Great Job!

Learn & Review programming languages:
http://www.codesplunk.com

August 22, 2008 at 2:31 PM
Ivan Voras

Though people looking at the code see more than 20 lines, it's perfectly acceptable under the imposed rules: all those lines marked as a single "line" in the comment are logically one expression or statement. There are no multiple statements per marked line so the code is perfectly acceptable as being 20-line. The way expressions are formulated it's almost like you're doing functional programming :)

August 23, 2008 at 5:17 AM
JoKiv

Works great with Google Chrome.

September 5, 2008 at 1:25 AM
Anonymous

do you test it on chrome??? amazing!

September 25, 2008 at 7:48 PM
Mario

You are my hero!

January 15, 2009 at 8:56 AM
FreePS3

Nice job on this amazing! :P

March 6, 2009 at 2:50 PM
Anonymous

Thanks to a good explanation ..

July 2, 2009 at 2:48 AM
lida diyet

Thanks to a good explanation ..

July 2, 2009 at 2:48 AM
Porter

I'm trying to imagine how this is possible in 20 lines, and it's just not clicking. Even if it isn't that great, for what's there, it's amazing to be that compact.

October 26, 2009 at 8:14 PM
Anonymous

About browsers..
IE 8: very slow. In standalone-version speed is acceptable..
Opera 10: medium speed both in full and stanalone mode.
Chrome 3: very fast and smooth! ;) but goombas don't move in Chrome!!

Conclusion: the goombas slow down Mario :)

Philip.

January 17, 2010 at 7:13 AM
Post a Comment