Developing Javascript Games for iPhone (part 1)

This is the my first serious attempt to do an iPhone application. Across the board, most of the smart cellphones support some kind of advance web browser that renders Javascript and HTML 5. Many people have already identified this as the common denominator. Webkit, an open source web browser engine is already part of iPhone and Android. It makes a lot of sense to build mobile applications in Javascript, HTML, and CSS and deploy them across multiple devices. Furthermore, frameworks such as PhoneGap and Titanium Appcelerator let you build Ajax applications and publish them as native apps on iPhone, Android and Blackberry.

What a great promise, right?. Mostly true, but there are a couple of things to keep in mind if we want to take advantage of the web browser capability and turn that into a game. I started this little exercise by choose a very simple game that I could write in Javascript in a few hours. The 15 Tile Puzzle game concept took about two hours to prototype.  Adding levels, creating some primitive graphics, debugging and testing, turned this little game into my weekend project.

Writing the game was pretty much as expected. Running the game in the iPhone was a bit disappointing. Although Webkit is an advance browser the game was not as responsive as the example that you see above. I used JQuery for some DOM manipulation as well as for animating the tiles in the game. Unfortunately, all this beauty of building web applications and running them on the iPhone comes with a price:

  • Rendering data is very easy but animating HTML element might be a little bit challenging, at least using JQuery ‘animate’.
  • Click, forget about it. The new devices introduced several new events that take priority over the well known ‘onclick’ event. Apple describe these new events and the sequence of executions in the Safari Web Content Guide.
  • When I used the ‘click’ event, there was a good ~0.5 second delay between the moment when I tap on the the screen and the moment when I saw my application responding. Some people recommend to use the JTouch plug-in, but I found a lot easier using JQuery to bind the new touch events ( $('#elem').bind('touchstart', {foo:123}, function(e){ ... 'e' is the new multitouch event ... }) ).
  • I missed Firebug when testing in the iPhone. Appcelerator has some debugging capability but probably I should look into the starndar iPhone development tools to get something better that ‘log()’.

On the bright side it is still exciting. With very little effort I was able to put together this little game and with the help of any of the framework that I mentioned earlier I will be able to turn my Tile Game into a real iPhone application.

For now if anyone wants to play it on the iPhone you can open Safari and go to

I will write the part 2 of this post if I get the Tile Game to the AppStore.

Leave a Reply