Project story
Jackal Dungeon Web is a web version of a board game Jackal: The dungeon. The project followed Munchkin Web project and had similar goals and prerequisites: have fun with friends and practice my dev skills. Jackal was a very good fit because game mechanics differs significantly from Munckin’s so there were new challenges to solve.
Key requirements
Here is the list of key requirements
- It should work in a browser.
- Game requirements:
- It should sync well between players.
- It should have a dungeon map composed of tiles by players during the game.
- Players should be able to drag and drop tiles to build the map (dungeon map).
- Players should be able to rotate tiles.
- Players should be able to attach/detach/remove tiles from the map.
- Only the player who has taken the tile should have controls over its position. Other players can see where the tile is being moved.
- Each player should have its own chip to be moved around the map.
- Synced tile and chip moves should be animated.
- Coins should be automatically placed into treasure room tiles.
- A player should be able to take coin only from the same tile.
- A player should be able to initiate a “competition” according to game rules.
- Each player should be able to move the dungeon map on the screen locally without affecting other players.
- A player should be able to join/return the game without an account by using the same nickname and passphrase.
- There should be several game rooms.
Research & Design
I was satisfied using the Meteor framework for Munchkin Web so decided to use it again as it was a very good fit for this project as well. However, ui and the controls in this project were absolutely different. The most interesting and difficult part was an implementation of a map builder, and I considered two different approaches: HTML markup vs canvas. I was already familiar with drag-n-drop features of HTML so I decided to try an alternative way of creating such a game. That’s why I’ve chosen canvas as a foundation of a map builder.
Native canvas API is not that easy to use directly so I decided to use some canvas library. I’ve searched and checked multiple canvas libraries and have chosen FabricJs for this project. It has a very nice set of features (object model, a rich event system, animation support, etc) matching project requirements and good documentation.
In this project, the main focus was on the game room, so the lobby page was made pretty simple without any sophisticated design or features.
The lobby page has a basic intro and a list of game rooms with basic information about players in the room. Bootstrap toolkit is used for styling elements of the page.
Game room page has several functional areas:
- Navbar with general game controls.
- List of players with their game state (name, chip colour, number of coins, and “competition” attempts left).
- Map area where main interaction takes place. It has the following components:
- Deck of tiles
- Map
- Players chips
- Two sets of dice (single and double)
Blaze is used as a view engine because it was a primary view engine for Meteor at that time. Map area of the game room is implemented with FabricJs canvas library.
Routing is implemented with the iron-router package – recommended routing solution at that time.
Deployment
The demo app is deployed on Heroku. The deployment process is automated via integration with GitHub. The app is deployed for demonstration purposes only and for personal usage.
Conclusion
This project allowed me to learn and experiment with HTML canvas and get more experience with amazing framework Meteor. The development of this game supported the course set by Munchkin app: use new technologies to bring fun and common leisure to people distributed around the country.
Vasily Belolapotkov 