Skip to content

Commit 1b3b5a7

Browse files
saketh-05saketh-05
committed
2 parents e489d31 + 38dfd91 commit 1b3b5a7

File tree

10 files changed

+460
-0
lines changed

10 files changed

+460
-0
lines changed

‎122 - Lights Out/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Lights Out</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<h1>Lights Out</h1>
11+
<div id="grid"></div>
12+
<div class="btns">
13+
<button onclick="startGame()">Start</button>
14+
<button onclick="resetGame()">Reset</button>
15+
</div>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎122 - Lights Out/script.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
function createGrid(rows, cols) {
2+
const grid = document.getElementById('grid');
3+
grid.innerHTML = ''; // Clear any existing grid
4+
5+
for (let r = 0; r < rows; r++) {
6+
for (let c = 0; c < cols; c++) {
7+
const light = document.createElement('div');
8+
light.classList.add('light');
9+
light.dataset.row = r;
10+
light.dataset.col = c;
11+
light.addEventListener('click', () => toggleLights(r, c));
12+
grid.appendChild(light);
13+
grid.style.gridTemplateColumns = `repeat(${level}, 60px)`;
14+
}
15+
}
16+
}
17+
18+
function toggleLights(row, col) {
19+
toggleLight(row, col);
20+
toggleLight(row - 1, col); // Up
21+
toggleLight(row + 1, col); // Down
22+
toggleLight(row, col - 1); // Left
23+
toggleLight(row, col + 1); // Right
24+
checkWin();
25+
}
26+
27+
function toggleLight(row, col) {
28+
const light = document.querySelector(`.light[data-row='${row}'][data-col='${col}']`);
29+
if (light) {
30+
light.classList.toggle('off');
31+
}
32+
33+
}
34+
35+
function resetGame() {
36+
const lights = document.querySelectorAll('.light');
37+
lights.forEach(light => light.classList.remove('off'));
38+
}
39+
40+
let level = 3;
41+
const levelLimit = 9;
42+
43+
function startGame() {
44+
createGrid(level, level);
45+
const lights = document.querySelectorAll('.light');
46+
}
47+
48+
function checkWin() {
49+
const lights = document.querySelectorAll('.light');
50+
const isWin = Array.from(lights).every(light => light.classList.contains('off'));
51+
if (isWin) {
52+
if (level === levelLimit) {
53+
alert('Congratulations! You have won all the levels!');
54+
} else {
55+
alert('You win!');
56+
level++; // Increase the level
57+
resetGame();
58+
startGame(); // Start the next level
59+
}
60+
}
61+
}

‎122 - Lights Out/styles.css

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/* style.css */
2+
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
3+
4+
body {
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
height: 100vh;
10+
margin: 0;
11+
font-family: Arial, sans-serif;
12+
background-color: #333;
13+
}
14+
15+
#grid {
16+
display: grid;
17+
gap: 5px;
18+
}
19+
20+
.light {
21+
width: 60px;
22+
height: 60px;
23+
background-color: yellow;
24+
border: 1px solid #000;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
cursor: pointer;
29+
transition: background-color 0.3s, box-shadow 0.3s;
30+
}
31+
32+
.light.on {
33+
box-shadow: 0 0 20px 10px yellow;
34+
}
35+
36+
.light.off {
37+
background-color: black;
38+
box-shadow: none;
39+
}
40+
41+
button {
42+
margin-top: 20px;
43+
padding: 10px 20px;
44+
font-size: 16px;
45+
cursor: pointer;
46+
border: none;
47+
border-radius: 5px;
48+
background-color: #555;
49+
color: white;
50+
transition: background-color 0.3s;
51+
}
52+
53+
button:hover {
54+
background-color: #777;
55+
}
56+
57+
h1{
58+
font-family: 'Press Start 2P', cursive;
59+
color: white;
60+
text-align: center;
61+
animation: lightOnOff 2s infinite;
62+
}
63+
64+
@keyframes lightOnOff {
65+
0% {
66+
opacity: 1;
67+
text-shadow: 0 0 10px yellow;
68+
}
69+
25% {
70+
opacity: 0;
71+
text-shadow: none;
72+
}
73+
50% {
74+
opacity: 0;
75+
text-shadow: none;
76+
}
77+
75% {
78+
opacity: 1;
79+
text-shadow: 0 0 10px yellow;
80+
}
81+
100% {
82+
opacity: 0;
83+
text-shadow: none;
84+
}
85+
}

‎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();

0 commit comments

Comments
 (0)