Mravenci as QetriX WebApp

6 years ago I made a remake of quite popular Czech card game Mravenci (inspired by Arcomage) for Pocket PC, written in C# for .NET Compact Framework. Because CF is a subset of regular .NET Framework, it worked on PC as well.

I was recently contacted, if there's an Android version of the game. I replied there isn't, because I tried and failed - as my experience with Android is shallow. But it got me thinking and then it hit me.

As I mentioned earlier, I have some experience with IBM Worklight MobileFirst Platform Foundation. Mobile side in the platform is based on Apache Cordova, which basically is a fullscreen chrome-less WebView (mobile browser), displaying the single page app, written in HTML, CSS and JavaScript.

I really like the idea, so I tried to make the game this way. All platforms have support for such apps, so I created basic WebView app in Swift and Objective-C (iOS), Java (Android) and C# (WinPhone). It worked really well and the final app is so tiny!

Everything is based on QetriX structure, with DataStores, "content" dir and such. I took the liberty of developing the game in Firefox on my PC. The development was nice and smooth.

Of course I had to reengineer some major stuff. Because of different aspect ratios, I had to make the whole game fluid (all sizes are percentage based). It may get little bit distorted on 3:2 displays though, so I added media queries.

Mravenci. Build your castle to 100 or destroy opponent's castle.

Also the original graphics was really low-res, which looks OK, but the blurring isn't that good so I decided to recreate everything possible in HTML (like cards). Besides I didn't want to make gray version of each card (when player doesn't have resources to play it) and grayscale filter doesn't work on Android 4.3 and older.

The sound is made by HTML5 Api, but causes some troubles, which I consider acceptable: it sometimes plays up to 1 sec later than it should and sometimes doesn't play at all.

You can download the game from Google Play and iTunes Store.