![]() It might not be intuitive to click on the different holes in order to get the game moving. When users first load the page, it would be nice to have some sort of greeting or quick explanation about how to start the game. The fact that the colors randomly change may confuse some players. Right now, the marble elements in the game are removed and re-created at each move around the board so the gradient colors are reassigned. Future Enhancements Static marble colors: Because there are an even number of marbles (48), there is the potential for a tied game. Once the marbles have been tallied, users are welcome to quit the game or continue another one. The winner is determined by the total number of marbles each user ends with (in their row of holes and their mancala). Any marbles left in a row should be added to the corresponding player’s mancala, but for the sake of presentation, this game leaves these marbles in place. The game is over when one row of holes, not the mancalas, are completely empty. If this last marble is also added to a hole that was previously empty, all of the marbles in the opponent’s hole directly across the board are added to that hole automatically. When marbles are distributed and the last marble is added to a hole on that player’s side, that player takes another turn (opponent’s holes are disabled and corresponding text is grayed-out). Only one marble will be placed in a hole and the opponent’s mancala is always skipped. The marbles will automatically distribute themselves among the other holes and macalas in a counter-clockwise direction. The mancalas are always disabled because marbles cannot be moved from these.Ī player makes their move by clicking one of their holes where they would like to distribute marbles from. When it is player 2’s turn, the same behavior will occur, but for player 1. Player 2’s holes are disabled during this time so the user cannot click any of them, and the “PLAYER 2” text is grayed-out. At this point, the game is set up so that player 1 will always go first. From there I focused on moving the marbles about the board using event listeners and functions with jQuery, and lastly, included restart logic along with some finishing touches (CSS, “How to Play” modal window, etc.)Įach player is set up with their own row of 6 holes and a mancala (player 1 on the right, player 2 on the left). Under the first story I worked on, I built out the board in HTML and CSS first, before adding in jQuery elements to simulate the marbles. In working through these stories, I began with those in bold, but made sure to start with the most basic, functional pieces first. I bolded the stories that were required in order to produce the minimum viable product, while leaving the others there as stretch goals. To manage the creation of the game, I roughly framed out a series of user stories that are listed in the document below. Next, I took some time to pseudocode the steps involved in a single round of pla in order to loop that logic to simulate multiple turns and eventually multiple games. There is also a feature I included here, the score section, that was intended to keep a running tally of player 1 and player 2 scores over multiple games, but I decided to remove that functionality I thought it cluttered the page design. Because the board is the only real focus of the game, there wasn’t much need to develop more mockups. Once I had decided on the game, I created the wireframe below to lay out the board and the navigation. This being said, I hadn’t played Mancala for a few years so I refreshed myself with the rules of the game, referencing the site below, and wrote up my own interpretation as well that served as the basis for the “How to Play” content on the game’s page: Immediately, I thought back to my younger days as a swimmer, playing mancala with friends at meets. I wanted to avoid a typical board game for this project, but I still wanted to pick one that was familiar and with simple enough rules that would allow for some time to focus on really perfecting the CSS and logical components. Animations (scaling and fade out of mancala text).Location of the starting and ending holes on a given turn.Number of marbles to distribute in a single turn.Determining the color of marbles and location within their holes/mancalas.Determining hover behavior on mouse leaving and entering holes.Marble holes (moving marbles on click, providing marble count on hover).Technologies Used JQuery/JavaScript: Event listeners: This is an interactive mancala game that can be played right on your desktop! In order to play, simply grab a friend and load the Github link found in this markdown in your browser window.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |