Thursday, February 28, 2013

Maps and Boardgames (Part 4 - Creating a simple game)

After several months since part 3 I've decided to pick up my experiments and make a simple game out of them. "Why?" you may ask. Well, mostly because a friend of mine challenged me to, as his company, IBT, is promoting a contest for their core technology: xRTML.  Also, I thought it could be a fun experiment.

xRTML is a technology which allows developers to easily add real-time features to their websites and applications. It works flawlessly and is freaking fast. Hence should be a perfect match for any multiplayer web-based game in real-time, like the one I'm showing here.

So, what's the idea?

I wanted to do something very simple. Basic rules, player opens the browser and immediately starts to play.


  • There are 4 players on a map competing for hexagons, where each one has a set of units (starting with an helicopter, a tank and a shield):

  • You're not limited to the initial set, as you're able to build new units at the base.

  • The game ends when one of the players reaches 1000 points (by conquering hexagons) or the global timer expires.

  • The score mechanism follows the "Samegame" scoring: clusters of  n hexagons are scored as n2, thus promoting big sets of connected hexagons).

Total Points: 3

Total Points: 9

  • The game itself includes a mini-tutorial, so should be easy enough to grasp. Although being simple it should provide some strategic options as you'll have to take into account the unit-type differences:
UnitCooldown TimeOccupation TimeMovement RangeSpecial
Helicopter2 sec6 secs4 hexsFlies over obstacles
Tank4 sec3 secs2 hexsN/A
Shield1 secN/ATeleports to any player occupied hexagon, regardless of rangeCreates an influence radius of 1 hexagon

There's no server-code for this game. Everything runs in the browser + the real-time cloud stuff of xRTML. If you wish to see the full source-code of my game just go ahead and view the source of the web page (the Javascript isn't minified nor obfuscated).

The map:
I've tried different approaches to draw the hexagons (as discussed in previous posts) on a Leaflet map:
  • pre-rendered tiles with TileMill
  • tiles generated on the fly with HTML5 canvas

I eventually opted for the pre-rendered approach as its backwards-compatible with older browsers, although I was pretty satisfied with the client-side version (after several optimizations it now took about 1ms to draw each tile using HTML5 canvas).

Lots and lots of Javascript. Underscore and jQuery were invaluable. Underscore for all the low-level stuff and jQuery for the DOM manipulation.

Some sections were a little bit more challenging than others. For example:
  • As each type of unit has different movement capabilities: the helicopter flies over obstacles and the tank doesn't, determining the target hexagons, movement rules and occupation logic was an interesting challenge;
  • The shield has an area of influence effect. Creating an algorithm to correctly mix different areas and display them was also fun;
  • Tracking the state of each hexagon and painting them correctly;
  • Calculating the score: lots of Underscore goodness used there;

Anyway, some challenges but technically I'm happy with the result. The performance is pretty nice and I believe it shows that real-time gaming on the web could be a real trend in the future, especially with simple games like this.

I push every action that a player does to the xRTML servers. It automatically delivers everything to whoever is listening. You create a connection, bind to a channel, and just send/receive data. Nice and easy.
Also, xRTML includes some ready-to-use realtime controls, and I've used one of those to add a chat to the game.

The game supports any number of players watching but only 4 playing. Also, I've developed this for Chrome (although it should also work with IE10, Firefox and Safari). You can play it online at:

If you're all alone in there (very likely) you can open a new browser window/tab to simulate other players.

Also, a minor disclaimer: this isn't a "real" game, and I haven't really beta tested it, so it's very likely that the units are not properly balanced and some players have an unfair advantage over others :)


  1. Great stuff.
    But you know, there are so many great games, from Avalon Hill's "Panzer Blitz" boardgame through to PC-DOS and "Panzer General" ... it'd be a shame to plow too much energy into game design.
    The idea of fine interactive Web2.0 / RealTime in such an activity ... now that's thrilling! ;-)