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 38dfd91

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

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+
}
28 KB
Loading[フレーム]

‎index.html

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

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