HTML 5 game: catch the ball

(demo game)

Well, I decided to add on to my "project" only to find that my app threw an exception if the user hadn't logged in to Facebook yet. Oops. Guess that's only one of the many reasons nobody's reading my blog.

Anyway, after getting that fixed, I decided it's about time to start playing around with HTML 5. Here in Japan, there's talk of big social networks including Gree and Mobage moving towards platforms that integrate with smartphones. What a better time than to understand canvas and SVG?

In this blog, I'm going to start simple and create some basic interactions using canvas and SVG.

To get started I shamelessly copied a blogger's code - this time it was Disorganized's demo canvas Pong game.

The code worked beautifully on the first try. I just made a few tweaks. First, I changed the game from "Pong" to a kind of rescue game, where you need to catch the ball before it falls to the bottom. This involved adding some event listeners to let the user control the direction of the catcher.

Since I want this game to work on my iPhone, I can't use the traditional "mouseup" or "mousedown" operations for standard browsers. Instead, I used the "a" tag with an "onclick" to call a Javascript function. The onclicks called functions like so:

Pretty straight-forward. To fully jump on the HTML 5 bandwagon, I also wanted to play with some SVG. Inside the "moveLeft" and "moveRight" tags, I added some polygons in the shape of arrows using the HTML 5 "polygon" tag.

To play with the HTML 5 SVG elements, I downloaded the beta version of Firefox 4. Unfortunately, since these tags aren't yet supported in most browsers, I also had to add standard "left" and "right" buttons as pngs as well.

The game moves much slower on iPhone, but works nonetheless.

Here's the game in action, and the source, if you are curious. It's not finished yet, but I hope to improve on it next time I get a chance. Again, thanks to Disorganized for the original pong game source, which you can get here.