Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d07b75f

Browse files
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

Lines changed: 28 additions & 0 deletions
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

Lines changed: 15 additions & 0 deletions
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

Lines changed: 124 additions & 0 deletions
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

Lines changed: 86 additions & 0 deletions
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+
}
69.7 KB
Loading[フレーム]

‎index.html

Lines changed: 13 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /