Making Mario - Creating a pixel rendering scheme with CSS and JQuery

I decided to try a fun thought experiment. With the advent of HTML 5 and technologies like canvas and OpenGL, browser based video games are going to become more prevalent. However, what if you want to do a browser based video game without HTML 5 technologies? What about the poor unfortunate souls who are stuck on IE 7? (Feel free to insert tsk tsk sounds here).

Is it possible? Is it easy? Let's find out!
I decided to approach this from the glory days of my youth: Super Mario Brothers. I wasted countless hours on that game and remember it fondly. How difficult would it be to re-create the first level in a browser using only CSS and Javascript? Turns out, it may not be so difficult.

The trick is that those games were decidedly ...blocky. So how is that an advantage? Well, we have some great building blocks at our disposal. I'm talking of course, about divs. They are after all, just rectangles that we can specify their height and with attributes, so why not turn them into pixels?


But why not use divs with background images? Because dammit, that's why ^__^ . Actually, the spirit of this is to avoid images. I want everything to be rendered like it was on an old 8-bit Nintendo. The goal of this experiment is to see if it's possible and to see how easy/difficult it may be.

To accomplish this, I set forth a base set of criteria:

• Any object on screen must be from a map
• The way they are rendered must be repeatable and easy
• It has to be nerdtastic (totally optional)

Here's what I came up with:

You'll have noticed a few things. One is that it is _very_ obvious what the sprites are. You can also see that I am creating an insane amount of divs. That's OK. Think of them not as divs, but as really inefficient pixels. Lastly, you can see this doesn't do much. In fact, here's what it does:

Well, it's kinda neat, right? Basically the tl;dr version is that the Marios that you see _aren't_ images. They're being generated by the sprite generator. (Or they would be if Blogger let me include the Javascript :p . You can run it locally and see what I mean though. For reals.)

For me, that's really neat. Like in a nerdgasm sorta way.

So what's the ultimate goal here? I plan on generating the entire first level. I hope you come with me on the journey. There will be some fun stumbling blocks along the way.

Next time: Let's make Mario move!!!

Have fun everyone!