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 1b3b5a7

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

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