diff --git a/assets/simon-says-preview.png b/assets/simon-says-preview.png new file mode 100644 index 00000000..cbe9146a Binary files /dev/null and b/assets/simon-says-preview.png differ diff --git a/en/beginner-projects/simon-says.md b/en/beginner-projects/simon-says.md new file mode 100644 index 00000000..b0a55cf6 --- /dev/null +++ b/en/beginner-projects/simon-says.md @@ -0,0 +1,39 @@ +# 🎮 Simon Says Game + +![Simon Says Preview](../../assets/simon-says-preview.png) + +## Description + +A memory game where players repeat sequences of colored buttons. Each round adds a new color to the sequence, and the player must remember and repeat it correctly to advance levels. + +## Features + +- Start button to begin the game +- Colored buttons (Green, Red, Yellow, Blue) that flash +- Adds a new color each level +- Level tracking and Game Over message + +## Concepts Practiced + +- DOM manipulation +- Event listeners +- Async functions and Promises +- Game logic and sequence handling +- CSS animations and visual feedback + +## Bonus Challenge + +- Show the **score** after the game is over (score = number of levels completed). +- Add **sound effects** for each button click. +- Add **glowing animation** for each button to make the game more interactive. + +## Live Demo + +
+ +
diff --git a/examples/Simon-Says/README.md b/examples/Simon-Says/README.md new file mode 100644 index 00000000..04f7e109 --- /dev/null +++ b/examples/Simon-Says/README.md @@ -0,0 +1,36 @@ +# Simon Says — Memory Game 🎮 + +This is a fun and interactive **Simon Says** memory game built using **HTML, CSS, and modern JavaScript (ES Modules)**. +Players must observe and repeat an increasingly long sequence of colors — testing their memory and focus! + +## Features + +- 🎨 **Colorful animated buttons** for each level. +- 🧠 **Progressive difficulty** — sequence length increases with each correct round. +- ❌ **Game over feedback** with flashing animations. +- 🔁 **Restart option** to play again after losing. +- ⚡ Built using **plain HTML, CSS, and JS (no libraries or frameworks)**. + +## Files + +- `index.html` — main markup and game layout +- `styles.css` — visual design, colors, and animations +- `index.mjs` — core game logic using ES modules (sequence generation, user input, and level progression) + +## How to Play + +1. Open `index.html` in your browser (Chrome, Edge, or Firefox recommended). +2. Press 'Start Game' button to start the game. +3. Watch the color sequence shown by the game. +4. Repeat the sequence by clicking the color buttons in the same order. +5. Each level adds one more color to the sequence — try to remember them all! +6. If you click the wrong color, the game ends — press any key to restart. + +## Notes + +- The game uses **JavaScript timing functions** to display sequences with smooth delays. +- Fully responsive — works well on both **desktop and mobile** browsers. + +--- + +✨ **Enjoy testing your memory skills with Simon Says!** diff --git a/examples/Simon-Says/index.html b/examples/Simon-Says/index.html new file mode 100644 index 00000000..eeb059c6 --- /dev/null +++ b/examples/Simon-Says/index.html @@ -0,0 +1,22 @@ + + + + + + Simon Says Game + + + +

Simon Says Game

+
+
+
+
+
+
+ +

+ + + + diff --git a/examples/Simon-Says/index.mjs b/examples/Simon-Says/index.mjs new file mode 100644 index 00000000..61630d39 --- /dev/null +++ b/examples/Simon-Says/index.mjs @@ -0,0 +1,71 @@ +const buttons = Array.from(document.querySelectorAll(".color-button")); +const startBtn = document.getElementById("start-btn"); +const message = document.getElementById("message"); + +let sequence = []; +let playerSequence = []; +let level = 0; +let acceptingInput = false; + +// Flash a button visually +function flashButton(button) { + return new Promise((resolve) => { + button.classList.add("active"); + setTimeout(() => { + button.classList.remove("active"); + setTimeout(resolve, 200); + }, 500); + }); +} + +// Start next round: add new button and flash only it +async function nextRound() { + acceptingInput = false; + const newButton = buttons[Math.floor(Math.random() * buttons.length)]; + sequence.push(newButton); + await flashButton(newButton); // flash only the new button + playerSequence = []; // reset player input for new round + acceptingInput = true; + message.textContent = `Level ${level}: Repeat the sequence`; +} + +// Check player input +function checkPlayerInput() { + const currentIndex = playerSequence.length - 1; + if (playerSequence[currentIndex] !== sequence[currentIndex]) { + message.textContent = `Game Over! You reached level ${level}`; + startBtn.disabled = false; + sequence = []; + playerSequence = []; + level = 0; + acceptingInput = false; + return false; + } + + if (playerSequence.length === sequence.length) { + level++; + message.textContent = `Level ${level} completed!`; + setTimeout(nextRound, 800); // small delay before next round + } + return true; +} + +// Button click handler +buttons.forEach((btn) => { + btn.addEventListener("click", async () => { + if (!acceptingInput) return; + playerSequence.push(btn); + await flashButton(btn); + checkPlayerInput(); + }); +}); + +// Start button +startBtn.addEventListener("click", () => { + level = 1; + message.textContent = `Level ${level}: Repeat the sequence`; + sequence = []; + playerSequence = []; + nextRound(); + startBtn.disabled = true; +}); diff --git a/examples/Simon-Says/styles.css b/examples/Simon-Says/styles.css new file mode 100644 index 00000000..d9520668 --- /dev/null +++ b/examples/Simon-Says/styles.css @@ -0,0 +1,50 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background: #222; + color: #fff; +} + +h1 { + margin-top: 20px; +} + +.game-container { + display: grid; + grid-template-columns: repeat(2, 150px); + grid-gap: 20px; + justify-content: center; + margin: 40px auto; +} + +.color-button { + width: 150px; + height: 150px; + border-radius: 15px; + cursor: pointer; + transition: transform 0.1s, opacity 0.2s; +} + +#green { background: #0f0; } +#red { background: #f00; } +#yellow { background: #ff0; } +#blue { background: #00f; } + +.color-button.active { + transform: scale(1.1); + opacity: 0.7; +} + +#start-btn { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + margin-top: 20px; +} + +#message { + margin-top: 20px; + font-size: 18px; +}