Skip to content

Commit 6728425

Browse files
Kanavpreet-Singhsumn2u
Kanavpreet-Singh
authored and
sumn2u
committed
added source code in examples folder
1 parent 570fd56 commit 6728425

4 files changed

Lines changed: 179 additions & 0 deletions

File tree

‎examples/Simon-Says/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Simon Says — Memory Game 🎮
2+
3+
This is a fun and interactive **Simon Says** memory game built using **HTML, CSS, and modern JavaScript (ES Modules)**.
4+
Players must observe and repeat an increasingly long sequence of colors — testing their memory and focus!
5+
6+
## Features
7+
8+
- 🎨 **Colorful animated buttons** for each level.
9+
- 🧠 **Progressive difficulty** — sequence length increases with each correct round.
10+
- ❌ **Game over feedback** with flashing animations.
11+
- 🔁 **Restart option** to play again after losing.
12+
- ⚡ Built using **plain HTML, CSS, and JS (no libraries or frameworks)**.
13+
14+
## Files
15+
16+
- `index.html` — main markup and game layout
17+
- `styles.css` — visual design, colors, and animations
18+
- `index.mjs` — core game logic using ES modules (sequence generation, user input, and level progression)
19+
20+
## How to Play
21+
22+
1. Open `index.html` in your browser (Chrome, Edge, or Firefox recommended).
23+
2. Press 'Start Game' button to start the game.
24+
3. Watch the color sequence shown by the game.
25+
4. Repeat the sequence by clicking the color buttons in the same order.
26+
5. Each level adds one more color to the sequence — try to remember them all!
27+
6. If you click the wrong color, the game ends — press any key to restart.
28+
29+
## Notes
30+
31+
- The game uses **JavaScript timing functions** to display sequences with smooth delays.
32+
- Fully responsive — works well on both **desktop and mobile** browsers.
33+
34+
---
35+
36+
✨ **Enjoy testing your memory skills with Simon Says!**

‎examples/Simon-Says/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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>Simon Says Game</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<h1>Simon Says Game</h1>
11+
<div class="game-container">
12+
<div class="color-button" id="green"></div>
13+
<div class="color-button" id="red"></div>
14+
<div class="color-button" id="yellow"></div>
15+
<div class="color-button" id="blue"></div>
16+
</div>
17+
<button id="start-btn">Start Game</button>
18+
<p id="message"></p>
19+
20+
<script type="module" src="index.mjs"></script>
21+
</body>
22+
</html>

‎examples/Simon-Says/index.mjs‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const buttons = Array.from(document.querySelectorAll(".color-button"));
2+
const startBtn = document.getElementById("start-btn");
3+
const message = document.getElementById("message");
4+
5+
let sequence = [];
6+
let playerSequence = [];
7+
let level = 0;
8+
let acceptingInput = false;
9+
10+
// Flash a button visually
11+
function flashButton(button) {
12+
return new Promise((resolve) => {
13+
button.classList.add("active");
14+
setTimeout(() => {
15+
button.classList.remove("active");
16+
setTimeout(resolve, 200);
17+
}, 500);
18+
});
19+
}
20+
21+
// Start next round: add new button and flash only it
22+
async function nextRound() {
23+
acceptingInput = false;
24+
const newButton = buttons[Math.floor(Math.random() * buttons.length)];
25+
sequence.push(newButton);
26+
await flashButton(newButton); // flash only the new button
27+
playerSequence = []; // reset player input for new round
28+
acceptingInput = true;
29+
message.textContent = `Level ${level}: Repeat the sequence`;
30+
}
31+
32+
// Check player input
33+
function checkPlayerInput() {
34+
const currentIndex = playerSequence.length - 1;
35+
if (playerSequence[currentIndex] !== sequence[currentIndex]) {
36+
message.textContent = `Game Over! You reached level ${level}`;
37+
startBtn.disabled = false;
38+
sequence = [];
39+
playerSequence = [];
40+
level = 0;
41+
acceptingInput = false;
42+
return false;
43+
}
44+
45+
if (playerSequence.length === sequence.length) {
46+
level++;
47+
message.textContent = `Level ${level} completed!`;
48+
setTimeout(nextRound, 800); // small delay before next round
49+
}
50+
return true;
51+
}
52+
53+
// Button click handler
54+
buttons.forEach((btn) => {
55+
btn.addEventListener("click", async () => {
56+
if (!acceptingInput) return;
57+
playerSequence.push(btn);
58+
await flashButton(btn);
59+
checkPlayerInput();
60+
});
61+
});
62+
63+
// Start button
64+
startBtn.addEventListener("click", () => {
65+
level = 1;
66+
message.textContent = `Level ${level}: Repeat the sequence`;
67+
sequence = [];
68+
playerSequence = [];
69+
nextRound();
70+
startBtn.disabled = true;
71+
});

‎examples/Simon-Says/styles.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background: #222;
5+
color: #fff;
6+
}
7+
8+
h1 {
9+
margin-top: 20px;
10+
}
11+
12+
.game-container {
13+
display: grid;
14+
grid-template-columns: repeat(2, 150px);
15+
grid-gap: 20px;
16+
justify-content: center;
17+
margin: 40px auto;
18+
}
19+
20+
.color-button {
21+
width: 150px;
22+
height: 150px;
23+
border-radius: 15px;
24+
cursor: pointer;
25+
transition: transform 0.1s, opacity 0.2s;
26+
}
27+
28+
#green { background: #0f0; }
29+
#red { background: #f00; }
30+
#yellow { background: #ff0; }
31+
#blue { background: #00f; }
32+
33+
.color-button.active {
34+
transform: scale(1.1);
35+
opacity: 0.7;
36+
}
37+
38+
#start-btn {
39+
padding: 10px 20px;
40+
font-size: 16px;
41+
cursor: pointer;
42+
border: none;
43+
border-radius: 5px;
44+
margin-top: 20px;
45+
}
46+
47+
#message {
48+
margin-top: 20px;
49+
font-size: 18px;
50+
}

0 commit comments

Comments
 (0)