diff --git a/122 - Lights Out/index.html b/122 - Lights Out/index.html new file mode 100644 index 00000000..477033b1 --- /dev/null +++ b/122 - Lights Out/index.html @@ -0,0 +1,18 @@ + + + + + + Lights Out + + + +

Lights Out

+ + +

+ + + diff --git a/122 - Lights Out/script.js b/122 - Lights Out/script.js new file mode 100644 index 00000000..9b4f23b1 --- /dev/null +++ b/122 - Lights Out/script.js @@ -0,0 +1,61 @@ +function createGrid(rows, cols) { + const grid = document.getElementById('grid'); + grid.innerHTML = ''; // Clear any existing grid + + for (let r = 0; r < rows; r++) { + for (let c = 0; c < cols; c++) { + const light = document.createElement('div'); + light.classList.add('light'); + light.dataset.row = r; + light.dataset.col = c; + light.addEventListener('click', () => toggleLights(r, c)); + grid.appendChild(light); + grid.style.gridTemplateColumns = `repeat(${level}, 60px)`; + } + } +} + +function toggleLights(row, col) { + toggleLight(row, col); + toggleLight(row - 1, col); // Up + toggleLight(row + 1, col); // Down + toggleLight(row, col - 1); // Left + toggleLight(row, col + 1); // Right + checkWin(); +} + +function toggleLight(row, col) { + const light = document.querySelector(`.light[data-row='${row}'][data-col='${col}']`); + if (light) { + light.classList.toggle('off'); + } + +} + +function resetGame() { + const lights = document.querySelectorAll('.light'); + lights.forEach(light => light.classList.remove('off')); +} + +let level = 3; +const levelLimit = 9; + +function startGame() { + createGrid(level, level); + const lights = document.querySelectorAll('.light'); +} + +function checkWin() { + const lights = document.querySelectorAll('.light'); + const isWin = Array.from(lights).every(light => light.classList.contains('off')); + if (isWin) { + if (level === levelLimit) { + alert('Congratulations! You have won all the levels!'); + } else { + alert('You win!'); + level++; // Increase the level + resetGame(); + startGame(); // Start the next level + } + } +} \ No newline at end of file diff --git a/122 - Lights Out/styles.css b/122 - Lights Out/styles.css new file mode 100644 index 00000000..d29c9b1d --- /dev/null +++ b/122 - Lights Out/styles.css @@ -0,0 +1,85 @@ +/* style.css */ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + font-family: Arial, sans-serif; + background-color: #333; +} + +#grid { + display: grid; + gap: 5px; +} + +.light { + width: 60px; + height: 60px; + background-color: yellow; + border: 1px solid #000; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background-color 0.3s, box-shadow 0.3s; +} + +.light.on { + box-shadow: 0 0 20px 10px yellow; +} + +.light.off { + background-color: black; + box-shadow: none; +} + +button { + margin-top: 20px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #555; + color: white; + transition: background-color 0.3s; +} + +button:hover { + background-color: #777; +} + +h1{ + font-family: 'Press Start 2P', cursive; + color: white; + text-align: center; + animation: lightOnOff 2s infinite; +} + +@keyframes lightOnOff { + 0% { + opacity: 1; + text-shadow: 0 0 10px yellow; + } + 25% { + opacity: 0; + text-shadow: none; + } + 50% { + opacity: 0; + text-shadow: none; + } + 75% { + opacity: 1; + text-shadow: 0 0 10px yellow; + } + 100% { + opacity: 0; + text-shadow: none; + } +} \ No newline at end of file diff --git a/30DaysOfJavaScript/assets/122 - Lights Out.png b/30DaysOfJavaScript/assets/122 - Lights Out.png new file mode 100644 index 00000000..32e171e2 Binary files /dev/null and b/30DaysOfJavaScript/assets/122 - Lights Out.png differ diff --git a/index.html b/index.html index e087edaa..bc35abfe 100644 --- a/index.html +++ b/index.html @@ -1488,6 +1488,19 @@

Taash Game

Lights Out

+ Turn off all the lights on the board to win the game. +

+ + +