Mancalamoji is a two-player Mancala game built with HTML, CSS, and jQuery. Players select their stones (emojis) and have six pits that start filled with four stones. On their turn, one player removes the stones from a pit on their side and redistributes one seed to each pit on the board, going counter-clockwise, until they have no more seeds in their hand (click the pit you want to empty and redistribute). The game follows the regular rules of Mancala and ends when one side of the board runs out of stones. Then the points are counted and a player is crowned the winner!

I wanted it to be easy to iterate through each space on the board, so I made objects representing the pits and banks and put them in an array. I also wanted the HTML to match up well with the .js file, so the id’s of each board space correspond to the objects created in Javascript. Each space also had an attribute of “owner” which let me add them to the correct bank and compare scores.

I used flexbox to style the board, which made it easy to create grids for the pits. It also let the board be scaleable regardless of screensize.

Play the game here: