diff --git a/Index.md b/Index.md index 5fb8d6d5c..40ecf77a9 100644 --- a/Index.md +++ b/Index.md @@ -111,3 +111,4 @@ | [Pomodoro Timer](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Pomodoro-Timer) | A simple Pomodoro Timer using React.js, where you can track the time spent on work and break. | | [TravelPro](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/TravelPro) | A simple static website to enhance HTML & CSS skills | |[Audio Visualization with three.js](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Audio%20Visualization%20with%20three.js) | audio visualization using the powerful 3D graphics library, three.js | +|[LIGHTS OUT PUZZLE](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/puzzle-lights-out) | A simple Lights out puzzle using HTML, CSS & JS. | diff --git a/puzzle-lights-out/README.md b/puzzle-lights-out/README.md new file mode 100644 index 000000000..caa27460d --- /dev/null +++ b/puzzle-lights-out/README.md @@ -0,0 +1,84 @@ +# 🌟 Lights Out Puzzle Game + +## 🎮 Game Overview + +Lights Out is an engaging puzzle game that challenges your strategic thinking. Your mission is to turn off all the lights on a 5x5 grid by cleverly toggling lights. + +## 🎯 Objective + +Turn off ALL lights on the game board in the fewest moves possible! + +## 📷Screenshots + ![Image 1](/puzzle-lights-out/assets/Lights-Out-Puzzle1.png "screenshot-1") + ![Image 2](/puzzle-lights-out/assets/Lights-Out-Puzzle2.png "screenshot-2") + +## 💻Tech Stack +
+ +![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) +![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) +![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + +
+ +## 🕹️ How to Play + +### Basic Rules +- Click on any light to toggle it and its adjacent lights (up, down, left, right) +- Your goal is to turn off every single light +- The game tracks your moves, so try to solve the puzzle efficiently + +### Gameplay Mechanics +1. When you click a light, it changes state: + - Lit lights turn off + - Unlit lights turn on +2. Clicking a light also affects its neighboring lights +3. Keep clicking until all lights are off + +### Winning the Game +- Successfully turn off ALL lights +- The fewer moves you use, the better your performance +- A congratulations message will appear when you win + +## 🚀 Game Features +- Responsive 5x5 light grid +- Move counter +- Reset game functionality +- Intuitive, clean interface +- Challenging puzzle mechanics + +## 💡 Strategies +- Think ahead before clicking +- Observe how lights interact +- Some moves will be more effective than others +- There's always a solution! + + +## 📜 License +Open-source project. Feel free to fork and modify! + +## 🤝 Contributions +Suggestions and improvements are welcome! +Open an issue or submit a pull request. + + +### How to get the website on your local machine: + +--- + +- Download or clone the repository + +``` +git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git +``` + +- Go to the directory +``` +cd Band Website +```` + - Run the index.html file and see the results + +
+ + +## Happy Coding! diff --git a/puzzle-lights-out/assets/Lights-Out-Puzzle1.png b/puzzle-lights-out/assets/Lights-Out-Puzzle1.png new file mode 100644 index 000000000..3841c3087 Binary files /dev/null and b/puzzle-lights-out/assets/Lights-Out-Puzzle1.png differ diff --git a/puzzle-lights-out/assets/Lights-Out-Puzzle2.png b/puzzle-lights-out/assets/Lights-Out-Puzzle2.png new file mode 100644 index 000000000..c4e103fce Binary files /dev/null and b/puzzle-lights-out/assets/Lights-Out-Puzzle2.png differ diff --git a/puzzle-lights-out/assets/text.txt b/puzzle-lights-out/assets/text.txt new file mode 100644 index 000000000..265d6788c --- /dev/null +++ b/puzzle-lights-out/assets/text.txt @@ -0,0 +1 @@ +images files uploaded diff --git a/puzzle-lights-out/index.html b/puzzle-lights-out/index.html new file mode 100644 index 000000000..b9ff2b3d0 --- /dev/null +++ b/puzzle-lights-out/index.html @@ -0,0 +1,57 @@ + + + + + + Lights Out Puzzle + + + +
+

Lights Out Puzzle

+ + + + +
+ +
Moves: 0
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/puzzle-lights-out/script.js b/puzzle-lights-out/script.js new file mode 100644 index 000000000..191264727 --- /dev/null +++ b/puzzle-lights-out/script.js @@ -0,0 +1,138 @@ +class LightsOutGame { + constructor(size = 5) { + this.size = size; + this.board = []; + this.moves = 0; + this.initializeBoard(); + this.renderBoard(); + this.addEventListeners(); + } + + initializeBoard() { + // Create a random initial board state + this.board = Array.from({ length: this.size }, () => + Array.from({ length: this.size }, () => Math.random() < 0.5) + ); + } + + renderBoard() { + const gameBoard = document.getElementById('game-board'); + gameBoard.innerHTML = ''; + gameBoard.style.gridTemplateColumns = `repeat(${this.size}, 1fr)`; + + for (let row = 0; row < this.size; row++) { + for (let col = 0; col < this.size; col++) { + const light = document.createElement('div'); + light.classList.add('light'); + light.dataset.row = row; + light.dataset.col = col; + if (this.board[row][col]) { + light.classList.add('on'); + } + gameBoard.appendChild(light); + } + } + } + + addEventListeners() { + const gameBoard = document.getElementById('game-board'); + gameBoard.addEventListener('click', this.handleLightClick.bind(this)); + + const resetBtn = document.getElementById('reset-btn'); + resetBtn.addEventListener('click', this.resetGame.bind(this)); + } + + handleLightClick(event) { + const light = event.target.closest('.light'); + if (!light) return; + + const row = parseInt(light.dataset.row); + const col = parseInt(light.dataset.col); + + this.toggleLight(row, col); + this.toggleAdjacentLights(row, col); + + this.moves++; + document.getElementById('moves-counter').textContent = `Moves: ${this.moves}`; + + this.checkWinCondition(); + } + + toggleLight(row, col) { + if (row >= 0 && row < this.size && col >= 0 && col < this.size) { + this.board[row][col] = !this.board[row][col]; + this.updateLightDisplay(row, col); + } + } + + toggleAdjacentLights(row, col) { + const directions = [ + [0, 1], // right + [0, -1], // left + [1, 0], // down + [-1, 0] // up + ]; + + directions.forEach(([dx, dy]) => { + this.toggleLight(row + dx, col + dy); + }); + } + + updateLightDisplay(row, col) { + const light = document.querySelector(`.light[data-row="${row}"][data-col="${col}"]`); + light.classList.toggle('on'); + } + + checkWinCondition() { + const allLightsOff = this.board.every(row => + row.every(light => !light) + ); + + if (allLightsOff) { + setTimeout(() => { + alert(`Congratulations! You solved the puzzle in ${this.moves} moves!`); + this.resetGame(); + }, 100); + } + } + + resetGame() { + this.initializeBoard(); + this.renderBoard(); + this.moves = 0; + document.getElementById('moves-counter').textContent = 'Moves: 0'; + } +} + +// Initialize the game when the page loads +document.addEventListener('DOMContentLoaded', () => { + new LightsOutGame(); +}); + +// Add to existing script.js, at the end of the file +document.addEventListener('DOMContentLoaded', () => { + // Initialize the game + const game = new LightsOutGame(); + + // Modal functionality + const modal = document.getElementById('instructions-modal'); + const instructionsBtn = document.getElementById('instructions-btn'); + const closeBtn = document.querySelector('.close-btn'); + + // Open modal + instructionsBtn.addEventListener('click', () => { + modal.style.display = 'block'; + }); + + // Close modal when clicking X + closeBtn.addEventListener('click', () => { + modal.style.display = 'none'; + }); + + // Close modal if clicked outside of it + window.addEventListener('click', (event) => { + if (event.target === modal) { + modal.style.display = 'none'; + } + }); +}); \ No newline at end of file diff --git a/puzzle-lights-out/styles.css b/puzzle-lights-out/styles.css new file mode 100644 index 000000000..a9bf756a0 --- /dev/null +++ b/puzzle-lights-out/styles.css @@ -0,0 +1,143 @@ +:root { + --background-color: #2c3e50; + --light-off-color: #34495e; + --light-on-color: #f1c40f; + --text-color: #ecf0f1; + --button-color: #3498db; + --button-hover-color: #2980b9; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Arial', sans-serif; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 20px; +} + +.container { + background-color: rgba(44, 62, 80, 0.8); + border-radius: 15px; + padding: 30px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); + text-align: center; + max-width: 600px; + width: 100%; +} + +h1 { + color: var(--text-color); + margin-bottom: 20px; + font-size: 2.5em; + text-transform: uppercase; + letter-spacing: 2px; +} + +.game-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +#game-board { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 10px; + margin: 20px 0; +} + +.light { + width: 80px; + height: 80px; + background-color: var(--light-off-color); + border-radius: 10px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); +} + +.light.on { + background-color: var(--light-on-color); + box-shadow: 0 0 20px var(--light-on-color); +} + +.controls { + display: flex; + justify-content: center; + gap: 20px; +} + +button { + background-color: var(--button-color); + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: var(--button-hover-color); +} + +#moves-counter { + font-size: 18px; + font-weight: bold; +} + +/* Modal Styles */ +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.7); +} + +.modal-content { + background-color: var(--background-color); + margin: 10% auto; + padding: 30px; + border-radius: 15px; + max-width: 600px; + position: relative; +} + +.close-btn { + color: var(--text-color); + float: right; + font-size: 30px; + font-weight: bold; + cursor: pointer; +} + +.instructions-section { + margin-bottom: 20px; +} + +.instructions-section h3 { + color: var(--light-on-color); + margin-bottom: 10px; +} + +.instructions-section ul { + list-style-type: disc; + padding-left: 30px; +} \ No newline at end of file