Giter Club home page Giter Club logo

mancala's Introduction

MANCALA

Mancala is an African originated game played by 2 players. The game is performed on a Mancala Board which has 6 pits and 1 Mancala( score pit) per player. There are 48 peices of marble that are distributed evenly in each players'spit(4 per pit). The objective of each player is to collect as many marbles in their mancala as possible. Below is a picture of a more traditional game board: Traditional Board I however decided to get a bit more creative with the design of the game. Here is a look at the board I ceated:

The Home Page:

The homepage has 2 choices to either start the game or watch a quick video as an explanation of the game. I though it would be helpfule as I didn't even know of this game at time of picking it as my project.

Welcome Banner

Upon Start

This is how the marbles are distributed at the initial stage of the game . Inital State

The Rules:

  • The game starts with Player A,
  • Each player gets one trun
  • Players can only take the stones from their side of the board
  • If the last stone ends in the palyers Mancala, the player gets another round
  • The game is over when all the pits from one side are empty at this poit the remaining side will collect all the marbles from their side and add to their mancala.
  • The Player with most marbles in their Mancala is the Winner. Winner-Banner

Technologies Used.

  • JavaScript
  • CSS
  • HTML

YOU CAN PLAY HERE

https://t4r4n3h.github.io/Mancala/

ICE BOX ITEM:

  1. Create a sigle player game
  2. code marbles or stones to help visualize the number of marbles in the pit and have animation to slow down the movement of the numbers.
  3. Implement the second rule of the game : If a player's last marble ends in an empty pit on their side they get to take that marble and all the marbles of the opposite side and collect them in their Mancala.
  4. Implement some appropriate music.

I hope you enjoy this game! It was fun to write!

Cheers!

mancala's People

Contributors

t4r4n3h avatar

Watchers

 avatar

mancala's Issues

Feedback & Comments

Hey Tara! Great work on this project! I don't have too much to say, feedback-wise. Your code is nice and clean, and well organized.

Ternary Operators

You're using ternary operates throughout your code, which is great, but the real strength of them is to return a value or expression depending on the condition. So your lines like this:

playerTurn === 1 ? (playerTurn = -1) : (playerTurn = 1);

should probably be refactored into something that takes advantage of the return of a ternary operator

playerTurn = playerTurn === 1 ? -1 : 1

Consistency

In this code:

Mancala/js/script.js

Lines 63 to 69 in d8be798

if (playerTurn < 1) {
playerTurnEl.classList.add("Bturn");
playerTurnEl.innerText = "Player B turn";
} else {
playerTurnEl.textContent = "Player A turn";
playerTurnEl.classList.replace("Bturn", "Aturn");
}

it seems like we should be doing the same thing depending on which player it is. However you can see that we're only removing a class if it is player B's turn. You can even see in the dom that when it's player ones turn, both classes are being applied.
image
The other thing, is that you're using innerText first, and then textContent afterwards. Regardless of which you choose, you should make sure you're remaining consistent; both in using the correct methods, but also in making sure that you're doing the same thing for both turns. The other thing is that this code seems to effect the rendering of your app; does it make sense to have it in your handleClick function?

DRYing up your code

There's a handful of places that could be DRY'd up in your code. One of them was the code to toggle the players turn. You have this line of code scattered throughout your javascript, and it could definitely be wrapped in a function. There are other places too, where you have almost identical outcomes in if/else statements that could be refactored a bit.

All in all, very well done on this project.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.