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.
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.
As always, awesome!!
May 21, 2008 at 4:36 AM AnonymousMan, I'm ur fan. U r god of JS =P
May 21, 2008 at 10:59 AM SteveYour work continues to impress. Fantastic!
May 21, 2008 at 1:45 PM AnonymousOh my gosh... Dude: YOU ROCK.
May 21, 2008 at 4:18 PM RussellYou are amazing!!!
Oh, cool enough to be linked on reddit now, are we?
May 21, 2008 at 9:34 PM AnonymousWhere was this javascript-fu when the ShipCalc needed it?
-ZZ
Very cool. As to the blurryness of the game field, are you using mode 7?
May 22, 2008 at 12:38 AM Anonymoushttp://www.mattmcguire.co.uk/?page_id=13
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.
May 22, 2008 at 1:37 AM Anonymous@makken skeyes: Sure.
http://www.nihilogic.dk/labs/mariokart/mariokart.js
The maps were obtained via vSNES. :)
May 22, 2008 at 1:49 AM AnonymousBtw. the AI of the game is explained here: http://www.dirty.plus.com/ai/ai.html
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 AnonymousI 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.
May 23, 2008 at 12:39 AM John DyerKeep on teaching us, please. And thank you very much for your effort :-)
This is awesome!
May 23, 2008 at 8:04 AM AnonymousIt works in WebKit, HEAD of trunk as of 17:04, 23rd of May.
May 23, 2008 at 8:04 AM AnonymousNice job.
In "... controls how many vertical lines are rendered ...", I believe you mean how many horizontal lines are rendered.
May 23, 2008 at 8:24 AM AnonymousThe first script tag is missing the > closing token ;)
Why the try{}catch{} for each and every drawImage() ? is it left over debug ?
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!
May 23, 2008 at 9:00 AM Jason KirstThe 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.
Incredible job. I'd kill for a tutorial...
May 23, 2008 at 9:56 AM termoPiluccoVery nice, work!
May 23, 2008 at 11:04 AM Gene VayngribPlease add a timer and the time trial mode, so that the Mario Kart community can challenge on it!
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 AnonymousMust....resist....temptation...to....implement....graphics....on....javascript....SCUMM....interpreter.
May 23, 2008 at 2:08 PM Anonymousexcelent
May 23, 2008 at 4:15 PM UnknownSUGOI SUGOI !!
can u add arrows on the page so we can play on the iPhone? Thanks.
May 23, 2008 at 4:16 PM Anonymousyou're the man...
May 23, 2008 at 11:37 PM AnonymousEach Line Canvas mode ist faster in FF3
May 24, 2008 at 5:01 AM AnonymousImpressive!
May 24, 2008 at 2:01 PM Anonymous..simply fantastic.. Impressive! Good Work..
May 25, 2008 at 8:48 AM AnonymousTrue to my word, here's my SCUMM interpreter - running in JavaScript!
May 28, 2008 at 12:30 PM Bradenhttp://www.cuppadev.co.uk/2008/05/28/scumm-in-javascript/
Enjoy, and happy JavaScript'ing! :)
On FF3B5/Kubuntu, I get much better performance in the per-line canvas mode.
May 30, 2008 at 10:39 AM AnonymousPlease make effective this game only to IE.
May 31, 2008 at 6:26 PM UnknownBecause it is translated what, it is likely not to see easily.
Man, u're awesome ... It's amazing that you can do all this with just Javascript ...
June 4, 2008 at 9:10 AM AnonymousNice. 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 AnonymousGreat game. Nice job
June 7, 2008 at 10:29 PM AnonymousJani Syed
It doesn't work in IE. Not good
June 10, 2008 at 5:45 AM AnonymousWorks in Opera 9.02! (Win)
June 17, 2008 at 7:59 PM AnonymousAmazing!
Nicely done!
June 24, 2008 at 9:20 PM AnonymousIts great. Nice one. But why this does not work in IE?
September 24, 2008 at 6:26 AM AnonymousGreat job. You're master of JS
November 26, 2008 at 1:20 PM AnonymousI found your link from www.mario-kart.net
December 8, 2008 at 12:18 PM AnonymousYour game is very cool!
Superb Job. I am totally AMAZED with your work.
January 4, 2009 at 8:48 AM AnonymousVery nice work! Please more :)
January 23, 2009 at 4:29 AM AnonymousExcellent
January 23, 2009 at 9:24 AM Anonymousvery nice game, excellent modification.
January 23, 2009 at 9:41 PM Anonymousnice dude.. thanks..
January 26, 2009 at 11:35 AM AnonymousThe script work great for me..
January 26, 2009 at 11:36 AM Unknownthanks dude.. nice :)
I have working a bit with Javascript and I managed to make some cool stuff.
January 30, 2009 at 5:19 AM AnonymousBut this.... It's totaly new, totaly fresh, never done before...
Really awesome!
nice work guys :D
January 31, 2009 at 9:10 PM Anonymousnice work guys :D
February 4, 2009 at 5:46 AM AnonymousI have working a bit with Javascript and I managed to make some cool stuff.
February 4, 2009 at 5:58 AM AnonymousBut this.... It's totaly new, totaly fresh, never done before...
Really awesome!
very nice game, excellent modification.
February 4, 2009 at 5:58 AM AnonymousEach Line Canvas mode ist faster in FF3
February 4, 2009 at 5:59 AM vampiregirl32really great! i couldn't have done it...but when does it stop?
February 16, 2009 at 6:38 AM AnonymousIt'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 Anonymouslooks like simple game and cool, nice game, I like it
March 6, 2009 at 8:27 PM Inventory Management SoftwareI want try it.. :)
March 28, 2009 at 8:05 AM AnonymousThanks you
March 30, 2009 at 3:17 AM Melayu BolehKonya Sohbet Muhabbet Medyum
ermm.. this is awesome.. i want to try this..
April 22, 2009 at 1:57 AM Anonymousvery nice game, excellent modification.
April 26, 2009 at 9:06 AM Anonymous---------------------------------------------
SohbetchatSohbet
this game is a classic wonderful game.
May 1, 2009 at 9:20 AM n0m0zFacebook~ film izle
wow, greats.
May 13, 2009 at 11:19 PM Chat Odalarıi'll try it
thanks
May 18, 2009 at 12:04 AM