Check out my
new book!
HTML5 Games book
Play Super Mario Kart game in Javascript

Seems I just can't let go of Super Mario. This is a prototype of a Javascript Mario Kart-like racing game .

It uses the canvas element to do most of the rendering and should work in both FF2, FF3, Opera(9.27 and 9.5) and Safari 3.1+. There are a few glitches in Safari (at least in 3.1.1) in the kart sprites, but other than that it should be playable. I haven't even considered getting IE support, sorry. There's just no way.

The (minified) code weighs in at about 11 Kb, but unlike the Mario game from last month, this one uses several external image files. This was more a test of how smooth I could get a game like this to feel, anyway, so filesize wasn't an issue. I think it runs pretty ok, though.

There are a couple of rendering settings you can play with. "Quality" controls how many horizontal lines are rendered, "Screen scale" controls the size of the screen (duh). Both trade visual appearance for performance.


There are also two different rendering modes. The "Single canvas" mode seems the fastest for all browsers (EDIT: People in the comments have reported better performance with "Per-line" when using FF3 beta). For the technically curious, the difference is in the way each horizontal line is rendered. In the single canvas mode every line is drawn unto the same large canvas, whereas in the "Per-line canvas" mode, each line has it's own canvas. They both give different visual appearances, so try them out if you want.

The sprites were all found at The Shyguy Kingdom and the maps were found at Rick N. Bruns' snesmaps.com, so thanks to those two sites!

So far, it's just racing. No weapons or any of that fancy stuff. At the moment, you can choose from 3 different drivers (Mario, Luigi and Princess Peach) and 2 different maps (Mushroom Cup Round 1 and 2). There is no lap count, no timer and no finish. You can just race around forever and try to beat the others (it's not hard, especially if cut a few corners). The AI is rather crude, but seems to work ok for the time being.

There is (simple) collision detection against the boundaries of the map and the colored "blocking" blocks, but not against the karts, so you can't crash into the other drivers. Drive safely, anyway!

Click here to race!


Edit: Just found some Mario Kart music for added atmosphere (sequenced by Jarel Jones and Anthony Bouchereau). Also, it appears the graphical glitch with the karts is not limited to Safari. Oh well.

⇓ 60 comments Alejandro

As always, awesome!!

May 21, 2008 at 4:36 AM
null-byte

Man, I'm ur fan. U r god of JS =P

May 21, 2008 at 10:59 AM
Steve Streza

Your work continues to impress. Fantastic!

May 21, 2008 at 1:45 PM
Casidiablo

Oh my gosh... Dude: YOU ROCK.

You are amazing!!!

May 21, 2008 at 4:18 PM
Russell

Oh, cool enough to be linked on reddit now, are we?

Where was this javascript-fu when the ShipCalc needed it?

-ZZ

May 21, 2008 at 9:34 PM
Christian Heilmann

Very cool. As to the blurryness of the game field, are you using mode 7?
http://www.mattmcguire.co.uk/?page_id=13

May 22, 2008 at 12:38 AM
Makken Skeyes

Will you let us take a look at the source? ;)

May 22, 2008 at 12:44 AM
Jacob Seidelin

@Christian Heilmann: It's pretty much the same principle as mode 7, I believe. The blurryness is because of the scaling done by the canvas and the low res map used.

@makken skeyes: Sure.
http://www.nihilogic.dk/labs/mariokart/mariokart.js

May 22, 2008 at 1:37 AM
creaothceann

The maps were obtained via vSNES. :)

Btw. the AI of the game is explained here: http://www.dirty.plus.com/ai/ai.html

May 22, 2008 at 1:49 AM
Anonymous

Heh, in true Mario style it's possible to pass through walls: bump into a 90° inward wall corner so you can't move left nor right, then wiggle a lot. It seems to have something to do with the exact alignment of your cart. You still can't get out of the playing field though, there seems to be an extra check for that.

May 22, 2008 at 8:18 AM
Annikin

I am totally AMAZED with your work. I've been following your blog since the very beginning. I would love to have the time to help in any way or to do some research in javascript that would be so encouraging.

Keep on teaching us, please. And thank you very much for your effort :-)

May 23, 2008 at 12:39 AM
John Dyer

This is awesome!

May 23, 2008 at 8:04 AM
toxik

It works in WebKit, HEAD of trunk as of 17:04, 23rd of May.

Nice job.

May 23, 2008 at 8:04 AM
Mahtieu 'p01' Henri

In "... controls how many vertical lines are rendered ...", I believe you mean how many horizontal lines are rendered.

The first script tag is missing the > closing token ;)

Why the try{}catch{} for each and every drawImage() ? is it left over debug ?

May 23, 2008 at 8:24 AM
Marin

I think this is the best as feel from u've done up to now, that's really a great job

May 23, 2008 at 8:37 AM
Jacob Seidelin

@p01: Of course. Thanks!

The try-catch was a debugging thing, yea. The drawImage call threw an exception every now and then (still does, I guess) and I was too tired to figure out why, so I just left it in.

May 23, 2008 at 9:00 AM
Jason Kirst

Incredible job. I'd kill for a tutorial...

May 23, 2008 at 9:56 AM
termoPilucco

Very nice, work!
Please add a timer and the time trial mode, so that the Mario Kart community can challenge on it!

May 23, 2008 at 11:04 AM
Gene Vayngrib

Super! You know what would be cool - to use accelerometer, tilt, and may be the compass sensors on Google Android phones to control the cart. We have just released the first version of open source Browser Bhoost (see http://bhoost.com) to give JavaScript access to all the cell phone hardware. Let's work together on getting Mario to Android!

May 23, 2008 at 1:52 PM
James Urquhart

Must....resist....temptation...to....implement....graphics....on....javascript....SCUMM....interpreter.

May 23, 2008 at 2:08 PM
masayang

excelent
SUGOI SUGOI !!

May 23, 2008 at 4:15 PM
Hao

can u add arrows on the page so we can play on the iPhone? Thanks.

May 23, 2008 at 4:16 PM
pinandita

you're the man...

May 23, 2008 at 11:37 PM
think!!

Each Line Canvas mode ist faster in FF3

May 24, 2008 at 5:01 AM
Anonymous

Impressive!

May 24, 2008 at 2:01 PM
Giuseppe

..simply fantastic.. Impressive! Good Work..

May 25, 2008 at 8:48 AM
James Urquhart

True to my word, here's my SCUMM interpreter - running in JavaScript!

http://www.cuppadev.co.uk/2008/05/28/scumm-in-javascript/

Enjoy, and happy JavaScript'ing! :)

May 28, 2008 at 12:30 PM
bawb

On FF3B5/Kubuntu, I get much better performance in the per-line canvas mode.

May 30, 2008 at 10:39 AM
mario999UP

Please make effective this game only to IE.

Because it is translated what, it is likely not to see easily.

May 31, 2008 at 6:26 PM
Luis

Man, u're awesome ... It's amazing that you can do all this with just Javascript ...

June 4, 2008 at 9:10 AM
Joe G.

Nice. Good way to kill some time. Does it just loop? I played for 10 minutes and no end.

June 5, 2008 at 2:25 PM
Jani Syed

Great game. Nice job

Jani Syed

June 7, 2008 at 10:29 PM
Anonymous

It doesn't work in IE. Not good

June 10, 2008 at 5:45 AM
DMonk

Works in Opera 9.02! (Win)

Amazing!

June 17, 2008 at 7:59 PM
scott

Nicely done!

June 24, 2008 at 9:20 PM
caiden

Its great. Nice one. But why this does not work in IE?

September 24, 2008 at 6:26 AM
Bigismall

Great job. You're master of JS

November 26, 2008 at 1:20 PM
Anonymous

I found your link from www.mario-kart.net

Your game is very cool!

December 8, 2008 at 12:18 PM
SEO Test

Superb Job. I am totally AMAZED with your work.

January 4, 2009 at 8:48 AM
read

Very nice work! Please more :)

January 23, 2009 at 4:29 AM
Busby SEO Test

Excellent

January 23, 2009 at 9:24 AM
Busby SEO Test Gamer

very nice game, excellent modification.

January 23, 2009 at 9:41 PM
Anonymous

nice dude.. thanks..

January 26, 2009 at 11:35 AM
Inventory Management Software

The script work great for me..
thanks dude.. nice :)

January 26, 2009 at 11:36 AM
adrien

I have working a bit with Javascript and I managed to make some cool stuff.

But this.... It's totaly new, totaly fresh, never done before...

Really awesome!

January 30, 2009 at 5:19 AM
Dota map 6.59

nice work guys :D

January 31, 2009 at 9:10 PM
Famous Watch Brand

nice work guys :D

February 4, 2009 at 5:46 AM
Discount Montres

I have working a bit with Javascript and I managed to make some cool stuff.

But this.... It's totaly new, totaly fresh, never done before...

Really awesome!

February 4, 2009 at 5:58 AM
Photoe Et Camescopes

very nice game, excellent modification.

February 4, 2009 at 5:58 AM
Audio Video Tv

Each Line Canvas mode ist faster in FF3

February 4, 2009 at 5:59 AM
Bella

really great! i couldn't have done it...but when does it stop?

February 16, 2009 at 6:38 AM
Marketing Blog Guy

It's really amazing that you can resurrect Mario into a new amazing game. I do appreciate of what you've. Great job and keep on working.

February 17, 2009 at 6:49 AM
Tukang Nggame

looks like simple game and cool, nice game, I like it

March 6, 2009 at 8:27 PM
Inventory Management Software

I want try it.. :)

March 28, 2009 at 8:05 AM
Anonymous

Thanks you

Konya Sohbet Muhabbet Medyum

March 30, 2009 at 3:17 AM
Melayu Boleh

ermm.. this is awesome.. i want to try this..

April 22, 2009 at 1:57 AM
Anonymous

very nice game, excellent modification.
---------------------------------------------
SohbetchatSohbet

April 26, 2009 at 9:06 AM
Anonymous

this game is a classic wonderful game.
Facebook~ film izle

May 1, 2009 at 9:20 AM
n0m0z

wow, greats.
i'll try it

May 13, 2009 at 11:19 PM
Chat Odaları

thanks

May 18, 2009 at 12:04 AM
Post a Comment