HTML5 has been around for a little while now, and since then there’s been a surge in the development of HTML5-based games. There’s even an entire website devoted entirely to HTML5 game development. My interest in HTML5 primarily stems from the fact that Runescape, a browser-based MMORPG that I enjoy playing is getting its own HTML5 client. So, I decided to do some research and try it out for myself.

My First HTML5 GameIn reality, HTML5 games are primarily programmed in Javascript. However, it is impossible to create one without the use of the HTML5 canvas tag. I built a very basic HTML5 game by following a tutorial online. Its simply a small little game where you try and get the ball across the columns to the platform on the right. This is built on a Javascript port of the Box2D physics engine, and can also be downloaded from Github if you like (though its virtually identical to the original tutorial).


Although that tutorial was nice and it was fun getting started off, I did some research and discovered Seth Ladd’s Intro to Box 2D. Once I got to the part that talks about the version of Box2D to use, it recommends another port called Box2DWeb. This version has the Javascript compiled all into one file and is a newer, more up-to-date port of Box2D than the one I mentioned above.

html5_box2d_debugI followed a quick useful tutorial on Box2DWeb (which oddly I can’t seem to find anymore) just to get into the basics of doing games in Box2DWeb. However, Box2D is only a PHYSICS engine. Its not a graphics engine, and the internal graphical capabilities are for debug purposes only. They aren’t very advanced at all. Instead, if you want to generate graphics, you need to additionally grab a graphics engine, too.


Luckily, the Box2DWeb site also provides a link to IvanK, a nice Javascript-based graphical engine that runs off of the canvas tag. The demos were useful, primarily the Box2D one. However, there’s not really a lot of full explanations on how to do other things with it. For example, I didn’t have any images. The Box2D example doesn’t have any examples on how to apply a color fill instead of bitmaps.

Box2D IvanK DemoIts a real annoyance, there’s only one page on how to connect IvanK to Box2DWeb, and I couldn’t find much of anything else online for this, either. I went and applied the IvanK code to my existing example above (so I could have one function to generate boxes and circles), and after working out the bugs, what did I find? A blank canvas.

I had it set to create a circle. However, I could not get the circle to appear. Nothing showed up. I ended up spending most of my Sunday this weekend just trying to figure how to connect IvanK to Box2D (half of it just trying to get a single circle to appear). I finally went and grabbed the images from the IvanK website (don’t worry, I deleted them) just to try and get this working. I copied the default code, ran it on my site, and it WORKED FINE. So obviously something was missing.

Typical programmer move, after spending hours pouring over it, I finally realized that I had missed one small piece of code that actually added the Sprite to the Stage:

// Add To Array

That second line? That’s the one I missed.Yes, “stage” is defined further up in the file.

Ball DropI worked on this for about another hour trying to work out some remaining bugs in it once I finally got it to appear on the stage. I still had other problems, though, mostly relating to the fact that the graphics did not appear in the same spot as the actual element was at. I managed to fix it, though, but since it was so late by that point right now I just have a ball dropping onto a blank background.

In any case, that was my first experience working with HTML5. I actually had hoped to try this out last weekend, but I never got the opportunity to do so. So instead I had to put it off until this weekend and I basically spent my weekend working on this little project.

When I have more time, I’ll go back and try to actually finish a basic ball rolling platformer puzzle game. I need to finish the ball, though, so it looks like its actually rolling, probably just adding a small line in it like the first one. If you are interested in trying this our yourself, I linked to all the articles I used as reference in my post. You can also download my current code from Github to see my progress.