@madpilot makes

Since 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 SitePoint article, which gets into the juicy bits – collision engines and physics as well as side scrolling screens. Go forth, read and learn.

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.