Swing your hands from side to side – how to abuse 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.