Super Mario fully implemented in HTML5

Full Screen Mario is Josh Goldberg's complete remake of the classic Super Mario Brothers in HTML5. You can play re-creations of the original levels, make your own in an HTML5-based level editor, or play any of an infinite number of randomly generated levels. The code is on GitHub for your happy hacking, too. It's a pretty impressive example of what HTML5, in-browser functionality can do.

Full Screen Mario is a purely HTML5 remake of the original Super Mario Brothers. You can play the original levels, play through some of literally millions of possible random maps, or create your own using the level editor. This whole project is open source and free - if you would like to use the code, check out the Github or email me.

Full Screen Mario (via Waxy)

Notable Replies

  1. I'm going to rant a little plus ask for clarification, as my rant may not be entirely on point. Shouldn't we be calling this Super Mario fully Implemented in JavaScript? It's my understanding that HTML provides little more toward this new form of game development than the canvas element, which offers up a flat pixel drawing surface to plop images and draw bitmaps and vectors onto (unless the Javascript is manipulating DOM elements, but that would be insane, and also, would have been able to be implemented in previous versions of HTML...). That's a great advance for HTML, but I think this gives too much credit to HTML5, as if it suddenly has interactivity baked in. The lion's share of the work of creating a game here is done with JavaScript. In fact, 99% of the files in the github are JavaScript files, and I would venture to say that not a whole lot of them are generating what anyone would recognize as "html" they're managing image assets and placing them all on the canvas element. Once placed, the assets on the canvas can't be address or changed, so the assets are being continuously juggled in that JavaScript code, waiting to paint the next state onto the canvas. Maybe this is nit-picky, but all of the JavaScript written here is near identical to the functional code you would write in any other environment, and indeed could have written for years in JavaScript, the canvas just gives you a place to paint it all in-browser. I'm not sure what power I speaking truth to with this little screed, but let me put it this way. If I had two people working on a project, an "HTML5 person" and a "JavaScript person" I know who would get top billing. (not that this would be a sensible division of labor)

  2. wygit says:

    But is it DRM'd?

  3. Jorpho says:

    Open source and free and entirely unencumbered by bothersome copyrights and trademarks. Oh wait.

    ...I do have to hand it to Nintendo for not coming down hard on Super Mario Crossover and Mari0 and the various other creative concepts that have cropped up over the years, but then they're probably well aware of the Streisand Effect.

  4. Well, yes, you are right.

    However, the Javascript could have been written for years and without the mechanism (i.e., canvas) that HTML5 provides, there was no way to actually have the Javascript DO anything from the end-user's point of view.

    So, HTML5 has become a shorthand way of saying, "HTML5/Javascript" as both parts are absolutely essential to making this work.

  5. I suspect that 'HTML 5' made its primary contribution(aside from the canvas element, which is about the world's least efficient framebuffer) in spurring an arms race among javascript engines such that it is now possible to duplicate the power of bare-metal programming on a 1.79 MHz 6502 (with some hardware sprite acceleration) and 2KiB of RAM on a contemporary computer of merely modest specs...

    In theory, (while it would be vile) you could 'implement' an NES in any browser modern enough to support a 256x240 cell HTML table and twiddle cell background colors (or 1 pixel images of different colors stretched to fill the cell, if you feel horrid); it would just be...not fast... on a level that mortals cannot truly comprehend until the javascript benchmark wars began in earnest.

    (speaking of 6502s and javascript; nothing says "plenitudo potestatis, I haz it" like executing code, in-browser, on a virtual model of a once-current CPU (model built from actual die shots no less. No mere instruction set emulation here...))

Continue the discussion

15 more replies