Swing your hands from side to side - how to abuse JavaScript
09
Apr
Tags: javascript
What is a developer to do with all of that spare time between 1am and 3am? Write a JavaScript platform game of course! I’ve been sitting on this for the last couple of months, waiting for a good time to release it, but as this guy just released his (freaking awesome) canvas element version, I didn’t want to be out done. So as a proof of concept of how far you can push semantic HTML, CSS and JavaScript, I present to you: JavaScript Mario Brothers!
- The level is built using plain old HTML and CSS. Using absolute positioning and class names give each sprite a location and look (Yes, I know it should be in a separate CSS file - it was just easier for debugging at the time), so no cheating with the canvas element
- Sprite actions are determined by class names - so all divs with the class name koopa-sprite instantly start acting like koopas.
- The collision engine and animation is all done via un-obtrusive JavaScript (Except for a few bits that I couldn’t get running after window.onload for various reasons).
The JavaScript is based on the Prototype JS library, and the level is a complete write from scratch (which is why it isn’t quite correct), but as a proof of concept in both game development and pushing the limits of JS, I think it’s pretty cool.
April 9th, 2008 at 3:08 pm
That’s awesome, Myles. A definite candidate for SUYS next month, if everybody hasn’t seen it by then
April 10th, 2008 at 3:32 pm
Nice myles, very nice.
April 10th, 2008 at 8:18 pm
Bloody hell! That’s pretty awesome.
April 11th, 2008 at 1:51 pm
It does not work! ;-(
I want to play Mario! I want to! I wan to! I want to! *buhuhuhuuu*….
Okay, lets be serious
I’m using FF3 beta 5 on Ubuntu. the browser want me to download MZ-Player plugin but it doesn’t work. It says that i must run dpkg –configuer -a and then i do that then it seems like nothing happens… my CPU activity is below 3%
And the first second everything looks like it should then everything gets moved around to a complete mess…
April 11th, 2008 at 1:53 pm
Hi Frankie,
I’ve been told it doesn’t work in FF3b5 - I’m still running 2, so I must admit I haven’t tested it.
August 24th, 2008 at 3:03 pm
[…] See the blog entry here: Swing Your Hands From Side to Side - How to Abuse Javascript […]
November 5th, 2008 at 9:32 am
[…] WDS08 I discussed using Javascript to create games with Miles Eftos, who created a version Super Mario Bros in Javascript. Matt Wescott has gone one better to create a ZX Spectrum emulator in JavaScript. Now, how about a […]
November 21st, 2008 at 9:03 am
[…] I’m trying to milk the Mario Brothers in JavaScript thing for all it’s worth, I’d like to announce part two of my […]
March 17th, 2009 at 3:58 am
well done, I love it.