Skip to content

Commit d07b75f

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #1767 from manishh12/master
Added Mancala Game
2 parents 5f3eb0c + 1ab86f0 commit d07b75f

File tree

6 files changed

+266
-0
lines changed

6 files changed

+266
-0
lines changed

‎122-Mancala Game/README.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# **Mancala_Game**
2+
3+
---
4+
5+
## **Description 📃**
6+
7+
- **Mancala** is a classic two-player board game that involves strategic thinking and counting skills. In this version of Mancala, each player has 6 pits, and each pit starts with 6 stones. The objective of the game is to collect the most stones in your Mancala (the large pit at the end of your side).
8+
9+
## **Functionalities 🎮**
10+
<!-- add functionalities over here -->
11+
- Distribute stones from your pits counterclockwise, one by one.
12+
- If the last stone falls into your Mancala, you get another turn.
13+
- If the last stone lands in an empty pit on your side, you capture that stone along with any stones in the opposite pit and place them in your Mancala.
14+
-The board rotates according to player's turn.
15+
- The game ends when all pits on one side are empty. The player who has the most stones in their Mancala wins.
16+
17+
## **How to Play? 🕹️**
18+
<!-- add the steps how to play games -->
19+
- Each player starts their turn by selecting one of their pits.
20+
- The player then distributes the stones from the selected pit counterclockwise, placing one stone in each pit until they run out.
21+
- If the last stone lands in their Mancala, they get another turn.
22+
- If the last stone lands in an empty pit on their side, they capture that stone along with any stones in the opposite pit and place them in their Mancala.
23+
- The game continues until all pits on one side are empty. The player with the most stones in their Mancala wins.
24+
25+
## **Screenshots 📸**
26+
27+
![image](https://github.com/swapnilsparsh/30DaysOfJavaScript/assets/97523900/fe94b0c0-2875-4317-a449-ee9cedce2720)
28+

‎122-Mancala Game/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Mancala</title>
6+
<link rel="stylesheet" href="style.css" charset="utf-8">
7+
</head>
8+
<body>
9+
<h1>Mancala</h1>
10+
<div class="container">
11+
</div>
12+
<div class="info">Welcome to Mancala</div>
13+
<script type="text/javascript" src="script.js"></script>
14+
</body>
15+
</html>

‎122-Mancala Game/script.js

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
var gameBoard = [
2+
0, 6, 6, 6, 6, 6, 6,
3+
0, 6, 6, 6, 6, 6, 6
4+
];
5+
6+
var currentPlayer = 'one';
7+
var readOut = document.querySelector('div.info');
8+
9+
function renderBoard() {
10+
var gameContainer = document.querySelector('.container');
11+
gameContainer.innerHTML = ''; // Clear previous content
12+
13+
for (var i = 0; i < gameBoard.length; i++) {
14+
if (i % 7 === 0) {
15+
var row = document.createElement('div');
16+
gameContainer.appendChild(row);
17+
}
18+
19+
var button = document.createElement('button');
20+
button.setAttribute('class', 'pit' + i);
21+
button.setAttribute('id', i);
22+
button.innerHTML = gameBoard[i];
23+
row.appendChild(button);
24+
}
25+
26+
var playerClass = document.querySelectorAll('.container div');
27+
playerClass[0].setAttribute('class', 'playerTwo');
28+
playerClass[1].setAttribute('class', 'playerOne');
29+
30+
setListeners();
31+
}
32+
33+
function moveStones(pitIndex) {
34+
var stonesInHand = gameBoard[pitIndex];
35+
var pitNextIndex = pitIndex + 1;
36+
gameBoard[pitIndex] = 0;
37+
var lastIndex;
38+
if (stonesInHand > 0) {
39+
for (var i = pitNextIndex; i < stonesInHand + pitNextIndex; i++) {
40+
lastIndex = i % gameBoard.length;
41+
gameBoard[lastIndex] += 1;
42+
}
43+
}
44+
45+
var nextTurn = bankStones(lastIndex);
46+
if (!nextTurn) {
47+
setPlayer();
48+
}
49+
updateBoard();
50+
}
51+
52+
function bankStones(lastIndex) {
53+
var inverse = gameBoard.length - lastIndex;
54+
if ((lastIndex !== 0) && (lastIndex !== 7) && (gameBoard[lastIndex] === 1)) {
55+
if (currentPlayer === 'two') {
56+
if (1 <= lastIndex && lastIndex <= 6) {
57+
gameBoard[7] = gameBoard[7] + gameBoard[inverse] + 1;
58+
gameBoard[lastIndex] = 0;
59+
gameBoard[inverse] = 0;
60+
}
61+
} else {
62+
if (8 <= lastIndex && lastIndex <= 13) {
63+
gameBoard[0] = gameBoard[0] + gameBoard[inverse] + 1;
64+
gameBoard[lastIndex] = 0;
65+
gameBoard[inverse] = 0;
66+
}
67+
}
68+
}
69+
70+
// Check if the last stone landed in the player's bank
71+
if ((currentPlayer === 'one' && lastIndex === 0) || (currentPlayer === 'two' && lastIndex === 7)) {
72+
return true; // The player gets another turn
73+
}
74+
return false;
75+
}
76+
77+
function updateBoard() {
78+
for (var i = 0; i < gameBoard.length; i++) {
79+
var pit = document.querySelectorAll('button');
80+
pit[i].textContent = gameBoard[i];
81+
}
82+
83+
checkWin();
84+
}
85+
86+
function checkWin() {
87+
var playerOneStones = gameBoard[1] + gameBoard[2] + gameBoard[3] + gameBoard[4] + gameBoard[5] + gameBoard[6];
88+
var playerTwoStones = gameBoard[8] + gameBoard[9] + gameBoard[10] + gameBoard[11] + gameBoard[12] + gameBoard[13];
89+
if (playerOneStones === 0 || playerTwoStones === 0) {
90+
var playerOneTotal = playerOneStones + gameBoard[0];
91+
var playerTwoTotal = playerTwoStones + gameBoard[7];
92+
93+
if (playerOneTotal > playerTwoTotal) {
94+
readOut.textContent = 'Player One Wins!';
95+
} else {
96+
readOut.textContent = 'Player Two Wins!';
97+
}
98+
}
99+
}
100+
101+
function setPlayer() {
102+
var gameContainer = document.querySelector('.container');
103+
104+
if (currentPlayer === 'one') {
105+
currentPlayer = 'two';
106+
gameContainer.classList.add('rotated');
107+
readOut.textContent = 'It is player ' + currentPlayer + '\'s turn';
108+
} else {
109+
currentPlayer = 'one';
110+
gameContainer.classList.remove('rotated');
111+
readOut.textContent = 'It is player ' + currentPlayer + '\'s turn';
112+
}
113+
}
114+
115+
function setListeners() {
116+
for (var i = 0; i < gameBoard.length; i++) {
117+
var pit = document.querySelectorAll('button');
118+
pit[i].addEventListener('click', function (eventObject) {
119+
moveStones(Number(eventObject.target.id));
120+
});
121+
}
122+
}
123+
124+
renderBoard();

‎122-Mancala Game/style.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
body {
2+
font-family: "Verdana", sans-serif;
3+
font-size: 20pt;
4+
color: #2C3E50;
5+
text-align: center;
6+
background-color: #68c7df;
7+
}
8+
9+
h1 {
10+
font-size: 50pt;
11+
color: #d6dbdd;
12+
}
13+
14+
div {
15+
display: block;
16+
}
17+
18+
.container {
19+
width: 880px;
20+
margin: 0 auto;
21+
background-color: #F5F5F5;
22+
border: 2px solid #7F8C8D;
23+
border-radius: 20px;
24+
padding: 20px;
25+
transition: transform 0.5s ease;
26+
}
27+
28+
.playerTwo button {
29+
float: right;
30+
}
31+
32+
button {
33+
width: 100px;
34+
height: 100px;
35+
background-color: #BDC3C7;
36+
border: 2px solid #7F8C8D;
37+
border-radius: 50px;
38+
margin: 5px;
39+
font-size: 20pt;
40+
color: #2C3E50;
41+
box-shadow: 2px 2px 20px 5px #7F8C8D inset;
42+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
43+
}
44+
45+
button:hover {
46+
background-color: #3498DB;
47+
box-shadow: 2px 2px 20px 5px #2980B9 inset;
48+
color: #FFFFFF;
49+
}
50+
51+
button.pit0 {
52+
width: 100px;
53+
height: 210px;
54+
float: right;
55+
background-color: #E74C3C;
56+
color: #FFFFFF;
57+
}
58+
59+
button.pit7 {
60+
width: 100px;
61+
height: 210px;
62+
float: left;
63+
background-color: #E74C3C;
64+
color: #FFFFFF;
65+
}
66+
67+
.info {
68+
width: 880px;
69+
height: 100px;
70+
margin: 20px auto;
71+
line-height: 100px;
72+
text-align: center;
73+
border: 2px dotted #2980B9;
74+
border-radius: 20px;
75+
background-color: #F5F5F5;
76+
color: #2C3E50;
77+
}
78+
79+
.rotated {
80+
transform: rotate(180deg);
81+
transition: transform 0.5s;
82+
}
83+
84+
.rotated button {
85+
transform: rotate(180deg);
86+
}

‎30DaysOfJavaScript/assets/122-Mancala Game.jpeg

69.7 KB
Loading

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -1487,6 +1487,19 @@ <h4>Taash Game</h4>
14871487
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/121%20-%20Taash%20Game" target="_blank"><button class="button">Github</button></a>
14881488
</div>
14891489
</div>
1490+
<div class="maincard">
1491+
<div class="card1">
1492+
<img src="30DaysOfJavaScript/assets/122-Mancala Game.jpeg" alt="Taash Game">
1493+
</div>
1494+
<div class="card">
1495+
<h4>Mancala Game</h4>
1496+
<p>
1497+
Play a classic game of Mancala between two players.
1498+
</p>
1499+
<a href="122-Mancala Game/index.html" target="_blank"><button class="button">Live</button></a>
1500+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/122-Mancala%20Game" target="_blank"><button class="button">Github</button></a>
1501+
</div>
1502+
</div>
14901503

14911504
</div>
14921505

0 commit comments

Comments
 (0)