I’d like to introduce a HTML5 port of my flash-based game for android. It’s a variation on Memory game with modern mobile game features such as
- different types of game. Actually there 2 types of game: time challenge and tap challenge;
- levels. 150 level for each type of game = 300 levels in total;
- 0-1-2-3 stars as score for each level.
That’s why there is “Advanced” in the title. Now it’s available right in browser. Tested in:
- Chrome 21 (also available as chrome extension via Chrome Store);
- Chrome Mobile(Android 4, on tablet and phone);
- Firefox 15;
- IE 10.
- Haxe for code. Haxe is very similar to ActionScript 3 so there wasn’t any problem to port code.
- JSFL to convert resources from swf to png. Common resources (menus, stars, card’s covers etc) of android game were in swf which was compiled from fla-file. I wrote simple JSFL script to convert all assets from this fla to png images. There wasn’t any complex animation so were not any problems to use them in HTML5 version.
- CreateJS for working with canvas (EaselJS), for tweening (TweenJS), for sounds (SoundJS) and for loading resources (PreloadJS);
- HTML5 Local Storage API as alternative to flash SharedObject to store user’s progress and settings;
- HTML5 FullScreen API (not available in IE);
- HTML5 App Cache API for caching resources to play offline;
- Google Analytics for statistics;
- Google Web Font API for custom font (for some reason in my case it works only in Chrome, IE and Firefox fallbacks to default font);
- Google Closure Compiler to optimize JS code. Final code weighs 43KB (excluding CreateJS toolkit);
- PNGCrush to reduce size of images;
- Apache Ant to automate the building of game.
Well, I hope I didn’t forget anything. For me the main goal of this port was researching of current state of HTML5. Now I can say with confidence that in 90% cases flash could be replaced with HTML5 + JS. Of course I choose quite simple game to port but that was enough for me to get the big picture. The main problem with HTML5 development - it requires more resources than flash development. There plenty of browsers and each browser has it’s own implementation of HTML5 and JS. Even in such simple game I need to use several hooks to make it work in different browsers:
- load and play .ogg instead of .mp3 in Firefox;
- using default fonts in IE and Firefox instead Google Fonts. Automatic fallback doesn’t work in Firefox for me so I did it manual;
- disable fullscreen functionality in IE.
While flash game works fine without any tricks in all browsers that support flash plugin.