The simplest game that came to my mind was a number guessing game. In fact, I always make this game when I learn a new language, or want to test something out :) It is really very simple: the computer picks a number from a certain range, gives you x attempts to guess it, and only hints you if you should aim lower, or higher with your guesses. For the JS implementation I decided to go with AngularJS, and I put together the game basics during a Sunday afternoon. Here I found out a small limitation in HTML5 and a problem with cross-browser support of the <input type=”range”/> tag. It isn’t supported in Firefox, and in Android Gingerbread’s native browser.
As next step, I implemented Clay.io login, and leaderboards to the game, and also added two small achievements, just to try out also this feature of this nice platform. Here came another problem with 2.3 Android’s browser, and Clay.io login overlay. The overlay element keeps moving higher/lower on mobile screen in this browser, and you have to tap the login button quickly in order to make the shaking stop. It’s a huge UX flaw, but it’s still usable with a bit of effort. Otherwise Clay.io worked great, and implementation was really quick and painless.
The last step in my hocus-pocus was to build a native app. Using Phonegap was simple and easy as usually, I just got stuck on a small problem with linking the AngularJS library – in HTML code I used the link without specifying a protocol, thus starting with src=“//angular…..” . In the native app, of course, the protocol had to be specified. In performance matter the native app was working well, only the same problem with Android Gingerbread and Clay.io login overlay occurred, which was expected.
One test is still left to be done, and that’s testing out canvas graphics on mobile devices, but my conclusion so far is, that developing games on HTML5 can already be done nowadays. The worst problem is the cross-browser and cross-version optimization on mobile devices, but I think that it’s still worthy, because of the cross-platform support you get back. I think maintaining one codebase while your game is published on Android, iOS, Facebook, Chrome store, etc., etc. is priceless. I still would recommend using Clay.io if you want to do common game-related tasks quickly, but the older, but still widely used devices would need a little extra effort optimizing all the glitches present. You certainly need to consider own implementation based on the needs of your game.
You can check/play with the game source code on GitHub or play the published version. Or you can download the Android APK.