@madpilot rants

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.

9 comments

  1. That's awesome, Myles. A definite candidate for SUYS next month, if everybody hasn't seen it by then :)
  2. Nice myles, very nice.
  3. Bloody hell! That's pretty awesome.
  4. 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...
  5. 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.
  6. Pingback: Misha’s Tech Playground » Blog Archive » Cool Javascript Mario Games
  7. Pingback: Seriously impressive. at Mad Web Skills - Web design in Melbourne and Shepparton
  8. Pingback: Get the skinny on the Mario Brothers in Javascript | Bloggy Hell
  9. well done, I love it.

Leave a comment