A playable, in-browser version of the strategy game Abalone.
Abalone is a challenging game of strategy that for two players. Each take turns moving marbles around the board, with the objective to remove other player's marbles.
Deployed on firebase for multi-player enjoyment using firebase dB.
You can play with anyone online if you both visit the hosted version on firebase, since it has a firebase dB backend.
Table of contents
- Tools & Technologies
- Design Approach
-- Initial concept
- Next steps
- Functions just like the board game, with lateral moves of strings of marbles.
The game does not include the following features, but pull requests are welcome.
- Countdown timer
Tools & Technologies
Since Abalone is a relatively little-known game, user experience is foremost. Rather than showing all moves and alerting the user when they pick an invalid move, the UI only shows arrows for possible move directions. In addition, arrows turn red when you are interacting with opponent marbles for further user education.
Another facet of the user experience design is the highlighted marbles to show valid next selections. For users who are unfamiliar with the rules of Abalone, this helps to educate them on how many of their own marbles they can select to move.
To develop this game, I wrote user stories on Pivotal Tracker.
I planned to use the official notation for marble coordinates, similar to chess notation. This would mean that cells are oriented along an A-I and 1-9 axis. However, this kind of notation didn't lend itself well to an array data structure, so I decided to use rows and columns, in an array of cell objects.
Abalone is a complex game because each player can select up to three marbles, and can move in as many as six directions. In addition, interactions with other players follow a strict set of rules and a lot of logic had to be written in to include those rules.
Thanks to these developers for their contributions.
- Animation for moving marbles around
- Deselect marbles