Skip to content

Commit c1eec0b

Browse files
Praneeth-2602Praneeth-2602
committed
adding the Lights Out game
1 parent 5f3eb0c commit c1eec0b

File tree

5 files changed

+178
-0
lines changed

5 files changed

+178
-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: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
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+
text-shadow: 0 0 10px yellow;
63+
}
64+
65+
@keyframes lightOnOff {
66+
0% {
67+
opacity: 1;
68+
text-shadow: 0 0 10px yellow;
69+
}
70+
25% {
71+
opacity: 0;
72+
text-shadow: none;
73+
}
74+
50% {
75+
opacity: 0;
76+
text-shadow: none;
77+
}
78+
75% {
79+
opacity: 1;
80+
text-shadow: 0 0 10px yellow;
81+
}
82+
100% {
83+
opacity: 0;
84+
text-shadow: none;
85+
}
86+
}

‎30DaysOfJavaScript/assets/122 - Lights Out.png

28 KB
Loading

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1488,6 +1488,19 @@ <h4>Taash Game</h4>
14881488
</div>
14891489
</div>
14901490

1491+
<div class="maincard">
1492+
<div class="card1">
1493+
<img src="30DaysOfJavaScript/assets/122 - Lights Out.png" alt="Taash Game">
1494+
</div>
1495+
<div class="card">
1496+
<h4>Lights Out</h4>
1497+
<p>
1498+
Turn off all the lights on the board to win the game.
1499+
</p>
1500+
<a href="122 - Lights Out/index.html" target="_blank"><button class="button">Live</button></a>
1501+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/122%20-%20Lights%20Out" target="_blank"><button class="button">Github</button></a>
1502+
</div>
1503+
</div>
14911504
</div>
14921505

14931506

0 commit comments

Comments
 (0)