A JavaScript browser game of skill and shellfish.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
Abalone Grid.ai
Abalone Grid.vp
Jimdiagram.jpg
README.md
firebase.json
stories.md

README.md

Abalone

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


Screenshot

Screenshot

Features

  • Functions just like the board game, with lateral moves of strings of marbles.

Anti-features

The game does not include the following features, but pull requests are welcome.

  • Countdown timer
  • AI

Requirements

None.

Alternatives

Tools & Technologies

Design Approach

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.

References

Rules

Development

To develop this game, I wrote user stories on Pivotal Tracker.

Initial concept

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.

Challenges

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.

Credits

Thanks to these developers for their contributions.

Abalone Game

Next steps

  • Animation for moving marbles around
  • Deselect marbles