A wet weekend, a couple of weeks back, my daughter and I 'invented' a simple board game. It's a collaborative D&D-like, discover-a-maze-kill-monsters-win-gems kind of thing. It was moderately fun to design and to play, but the paper-based version was a bit tedious when it came to locking all the maze tiles in place, and tracking the HP of each player and monster. So over the next few evenings I learnt how to build an interactive SVG version, supplied here as a working, single-file game for playing and hacking.
It is worth noting that this is a digital version of a regular game board - it facilitates game play but does not stop you cheating, just like on a physical board (specifically, you can walk through maze walls if you want - but you shouldn't).
Open in your browser or right-click-save a local copy to play or hack.
How To Play
Players take turns to build the maze and move/eat/heal/fight. After all players have completed their turn, the monsters (if any) attack any player they are collocated with (if any). The goal is to construct a maze path to visit each of the six yellow gems, using the minimum number of dice points.
Each player turn consists of two parts: placing and rotating a new maze tile on an adjacent hex (if a vacant hex is available); rolling a D6, and using the dice points to: move (tap a valid adjacent maze tile); eat (tap self to increase your HP by 1); heal (tap collocated team-mate to increase their HP by 1); fight (tap collocated monster to decrease its HP by 1).
Top, left: which player is up, and what they need to do;
Top, right: maze tile stack (here you can see the next tile is a 'M'onster tile);
Bottom, left: score - starts at 999, and counts down for every dice point used;
Bottom, right: logo (links to this page).
- Each maze corner contains a yellow gem, that will turn purple when visited.
- Each player is represented by a coloured circle.
- Each monster is represented by a black 'splat'.
- Each player and monster is emblazoned with its HP score.
- Players have a maximum HP of 13.
- Monsters get a D12-roll amount of HP upon instantiation.
- Transition from 'placing/rotating a maze tile' to 'rolling dice' by tapping your player icon.
- If your HP drops to zero, you will be respawned on the centre tile with full HP (and loose 100 score points!).
- After defeating a monster, the player gets to rotate the maze tile it was guarding, and then roll again.
- Unwanted dice points can be discarded by tapping your player icon (and don't count towards the score).
It is worth noting that hilighted hex or maze tiles represent possible placement or movement options, but may not always be valid moves (i.e. you can walk through maze walls if you want - but you shouldn't) - the game code does not currently prevent you from cheating.
How To Hack
- Bitbucket repository.
- I18N hacking of 'step', 'help' and 'alert' texts can be done by modifying the 'stepActions', 'stepHelp' and 'alertMessages' arrays.
- The number of players can be hacked by tweaking the C_NUM_PLAYERS constant, and then tweaking the start positions under the '-- players... --' SVG section. The maximum number of players supported is six.
- Player and monster icons can be hacked in the SVG 'defs' section. Colours, etc. are (mostly) defined in the CSS section. Game play can be hacked via the ECMAscript.
- The 'tileStack' array defines the relative proportions of each maze tile type. Each maze tile is prefixed with an 'M' (monster) or an 'X' (no monster). Currently 50% of the maze tiles are marked as having monsters. Tweak the maze tile type proportions and/or monster tags to change the game difficulty.
All SVG Hex Tile Game assets by Chris Molloy are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
¤ Copyright 1999-2024 Chris Molloy ¤ All rights reserved ¤