Skip to content

Commit 38dfd91

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #1776 from Praneeth-2602/master
Added the Lights Out game
2 parents d07b75f + 1746d23 commit 38dfd91

File tree

5 files changed

+177
-0
lines changed

5 files changed

+177
-0
lines changed

‎122 - Lights Out/index.html

+18
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

+61
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

+85
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+
}

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

28 KB
Loading

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -1501,6 +1501,19 @@ <h4>Mancala Game</h4>
15011501
</div>
15021502
</div>
15031503

1504+
<div class="maincard">
1505+
<div class="card1">
1506+
<img src="30DaysOfJavaScript/assets/122 - Lights Out.png" alt="Taash Game">
1507+
</div>
1508+
<div class="card">
1509+
<h4>Lights Out</h4>
1510+
<p>
1511+
Turn off all the lights on the board to win the game.
1512+
</p>
1513+
<a href="122 - Lights Out/index.html" target="_blank"><button class="button">Live</button></a>
1514+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/122%20-%20Lights%20Out" target="_blank"><button class="button">Github</button></a>
1515+
</div>
1516+
</div>
15041517
</div>
15051518

15061519

0 commit comments

Comments
 (0)