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

Part 1 - Introduction
Part 2 - Using server tiles
Part 3 - Client side drawing
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.



URL: http://psousa.net/games/xrtml

• 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 n², 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:

Unit	Cooldown Time	Occupation Time	Movement Range	Special
Helicopter	2 sec	6 secs	4 hexs	Flies over obstacles
Tank	4 sec	3 secs	2 hexs	N/A
Shield	1 sec	N/A	Teleports to any player occupied hexagon, regardless of range	Creates an influence radius of 1 hexagon

Architecture:
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).


Gameplay:
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.

Realtime:
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:
http://psousa.net/games/xrtml

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 :)