Advanced Memory Game

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.
Technologies used in this port:
  • 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.

Here is the game

comments powered by Disqus