An onslaught of mobile HTML games
Perhaps porting is too strong a word here. Onslaught! runs and performs reasonably well on my Nexus One running Android 2.2.1. The only problem is that the game uses keyboard input, making it completely unplayable on mobile devices. Luckily, the controls are quite simple, and only require a directional pad and two buttons. So I decided to build an on-screen virtual game controller, not unlike those found in many native iPhone games. At first I was inclined to build the controls by extending the game itself (using the canvas element), but then decided that an HTML-based approach is better (since it saves the trouble of hit detection), and might even work as a generic controller for other games.
I ran into a few stumbling blocks as I was developing and testing this port, most of which involve the Android browser on Nexus One running Android 2.2.1.
- Very immature touch event (ontouchstart, ontouchend, etc) support. In fact, the browser doesn't seem to support multi-touch at all (ie. only one touch can be registered at a time). In contrast, Safari for iOS supports multitouch events quite well. For complete details, see this quirksmode writeup and this bug report.
- The Android browser completely ignores many properties in the meta viewport element's content attribute. Specifically, the browser doesn't react to initial-scale, minimum-scale, maximum-scale and width. As a result, I had to hack around this issue by abusing an Android-only property called target-densityDpi. I suspect that I may be doing something wrong here, since it's a pretty fundamental issue. Still I logged a bug.
- Less significant but still noteworthy, the CSS :active selector does not activate on the Android browser (at least for div elements). The reference implementation is iOS, where a touchstart event on a div element causes it to become :active until a touchend event.
In the short term, HTML as a gaming platform is emerging as a real Flash killer. In the long term, I wouldn't be surprised if HTML games will be widely played on Mac, PC, TV console, and mobile phone platforms. Whatever happens, browsers will continue to be pushed to conform to modern specifications and perform ever better, making mobile rich web applications more and more feasible.