Skip to content

Commit cc0c45b

Browse files
he-is-talhahe-is-talha
committed
Added 30-Simon-Says-Game
1 parent c212fae commit cc0c45b

File tree

4 files changed

+380
-31
lines changed

4 files changed

+380
-31
lines changed

‎30-Simon-Says-Game/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>Talha - Simon Says Game</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<script src="script.js" defer></script>
9+
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg" />
10+
11+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
12+
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
13+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
14+
15+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
16+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
17+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
18+
</head>
19+
<body>
20+
<h1>Simon Says Game</h1>
21+
<div id="game-container">
22+
<div class="color-btn" id="green"></div>
23+
<div class="color-btn" id="red"></div>
24+
<div class="color-btn" id="yellow"></div>
25+
<div class="color-btn" id="blue"></div>
26+
</div>
27+
<div id="game-status">
28+
<p class="my-text" id="sequence" style="display: none;">
29+
Current Sequence: <span id="sequence-display">-</span>
30+
</p>
31+
<p class="my-text" id="clicks" style="display: none;">
32+
Click Count: <span id="click-count">0</span>
33+
</p>
34+
<p class="my-text" id="status" style="display: none;">
35+
Game Status: <span id="status">Waiting...</span>
36+
</p>
37+
</div>
38+
<button id="start-btn">Start Game</button>
39+
<p id="level-message" style="display: none;"></p>
40+
</body>
41+
</html>

‎30-Simon-Says-Game/script.js

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
const colors = ["green", "red", "yellow", "blue"];
2+
let gamePattern = [];
3+
let userPattern = [];
4+
let level = 0;
5+
let clickCount = 0;
6+
let gameStarted = false;
7+
8+
document.getElementById("start-btn").addEventListener("click", startGame);
9+
10+
function startGame() {
11+
if (!gameStarted) {
12+
gameStarted = true;
13+
level = 0;
14+
gamePattern = [];
15+
userPattern = [];
16+
clickCount = 0;
17+
document.getElementById("status").textContent = `Level ${level}`;
18+
document.getElementById("click-count").textContent = clickCount;
19+
20+
showMyTexts();
21+
nextSequence();
22+
}
23+
}
24+
25+
function nextSequence() {
26+
userPattern = [];
27+
clickCount = 0;
28+
document.getElementById("click-count").textContent = clickCount;
29+
level++;
30+
document.getElementById("status").textContent = `Level ${level}`;
31+
32+
// Clear the sequence display at the start of each level
33+
document.getElementById("sequence-display").textContent = "-";
34+
35+
// Generate a random color and push it to the gamePattern
36+
const randomColor = colors[Math.floor(Math.random() * colors.length)];
37+
gamePattern.push(randomColor);
38+
39+
animateSequence();
40+
}
41+
42+
function animateSequence() {
43+
let i = 0;
44+
const interval = setInterval(() => {
45+
flashButton(gamePattern[i]);
46+
i++;
47+
if (i === gamePattern.length) {
48+
clearInterval(interval);
49+
enableUserInput();
50+
}
51+
}, 600);
52+
}
53+
54+
function flashButton(color) {
55+
const button = document.getElementById(color);
56+
button.classList.add("active");
57+
setTimeout(() => {
58+
button.classList.remove("active");
59+
}, 300);
60+
}
61+
62+
function enableUserInput() {
63+
colors.forEach((color) => {
64+
document.getElementById(color).addEventListener("click", handleUserClick);
65+
});
66+
}
67+
68+
function disableUserInput() {
69+
colors.forEach((color) => {
70+
document
71+
.getElementById(color)
72+
.removeEventListener("click", handleUserClick);
73+
});
74+
}
75+
76+
function handleUserClick(event) {
77+
const clickedColor = event.target.id;
78+
userPattern.push(clickedColor);
79+
flashButton(clickedColor);
80+
clickCount++;
81+
document.getElementById("click-count").textContent = clickCount;
82+
83+
// Update the current sequence display and set the text color to the box clicked
84+
const sequenceDisplay = document.getElementById("sequence-display");
85+
sequenceDisplay.innerHTML = ""; // Clear the previous content
86+
87+
// Iterate through the userPattern and display each color with its own color
88+
userPattern.forEach((color) => {
89+
const span = document.createElement("span");
90+
span.style.color = color; // Set the color of the span to match the button color
91+
span.textContent = color.toUpperCase() + " "; // Convert the color name to uppercase
92+
sequenceDisplay.appendChild(span); // Append the span to the display
93+
});
94+
95+
checkAnswer(userPattern.length - 1);
96+
}
97+
98+
function checkAnswer(currentLevel) {
99+
if (userPattern[currentLevel] === gamePattern[currentLevel]) {
100+
if (userPattern.length === gamePattern.length) {
101+
disableUserInput();
102+
setTimeout(() => {
103+
// Show the congrats message when the level is passed
104+
showCongratsMessage();
105+
setTimeout(() => {
106+
hideCongratsMessage();
107+
setTimeout(() => {}, 1000); // Delay before starting the next level
108+
nextSequence();
109+
}, 2000); // Hide congrats message after 2 seconds
110+
}, 1000);
111+
}
112+
} else {
113+
document.getElementById("status").textContent = `Game Over!`;
114+
115+
setTimeout(() => {
116+
flashButton(missedColor);
117+
}, 1000);
118+
setTimeout(() => {
119+
hideMyTexts();
120+
}, 1000);
121+
122+
showLoseMessage();
123+
setTimeout(() => {
124+
hideLoseMessage();
125+
}, 2000);
126+
127+
// Disable further input
128+
gameStarted = false;
129+
130+
// Reset the game state after a brief delay
131+
setTimeout(() => {
132+
level = 0;
133+
gamePattern = [];
134+
document.getElementById("sequence-display").textContent = "-";
135+
document.getElementById("click-count").textContent = 0;
136+
}, 1500);
137+
}
138+
}
139+
140+
function showCongratsMessage() {
141+
const message = `Congrats! You passed level ${level}!`;
142+
const congratsMessageElement = document.getElementById("level-message");
143+
congratsMessageElement.textContent = message;
144+
congratsMessageElement.style.display = "block"; // Ensure it's displayed
145+
setTimeout(() => {
146+
congratsMessageElement.classList.add("show"); // Show the message with animation
147+
}, 50); // Small delay to trigger the animation
148+
}
149+
150+
function hideCongratsMessage() {
151+
const congratsMessageElement = document.getElementById("level-message");
152+
congratsMessageElement.classList.remove("show"); // Remove animation class
153+
setTimeout(() => {
154+
congratsMessageElement.style.display = "none"; // Hide the message after animation
155+
}, 1000); // Delay hiding it after the fade-out effect
156+
}
157+
158+
function showLoseMessage() {
159+
const message = `Game Over! Correct color was ${
160+
gamePattern[userPattern.length - 1]
161+
}.`;
162+
const loseMessageElement = document.getElementById("level-message");
163+
loseMessageElement.textContent = message;
164+
// set color to red
165+
loseMessageElement.style.color = "red";
166+
loseMessageElement.style.display = "block"; // Ensure it's displayed
167+
setTimeout(() => {
168+
loseMessageElement.classList.add("show"); // Show the message with animation
169+
}, 50); // Small delay to trigger the animation
170+
}
171+
172+
function hideLoseMessage() {
173+
const loseMessageElement = document.getElementById("level-message");
174+
loseMessageElement.classList.remove("show"); // Remove animation class
175+
setTimeout(() => {
176+
loseMessageElement.style.display = "none"; // Hide the message after animation
177+
}, 1000); // Delay hiding it after the fade-out effect
178+
}
179+
180+
function showMyTexts() {
181+
const texts = document.getElementsByClassName("my-text");
182+
183+
for (let i = 0; i < texts.length; i++) {
184+
texts[i].style.display = "block";
185+
texts[i].classList.add("show");
186+
}
187+
}
188+
189+
function hideMyTexts() {
190+
const texts = document.getElementsByClassName("my-text");
191+
192+
for (let i = 0; i < texts.length; i++) {
193+
texts[i].classList.remove("show");
194+
texts[i].style.display = "none";
195+
}
196+
}

‎30-Simon-Says-Game/style.css

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, Helvetica, sans-serif;
9+
background-color: #f4f4f9;
10+
text-align: center;
11+
padding: 50px;
12+
}
13+
14+
h1 {
15+
font-size: 3rem;
16+
margin-bottom: 30px;
17+
color: #333;
18+
}
19+
20+
#game-container {
21+
display: flex;
22+
justify-content: center;
23+
margin-bottom: 30px;
24+
}
25+
26+
.color-btn {
27+
width: 100px;
28+
height: 100px;
29+
border-radius: 10px;
30+
margin: 10px;
31+
cursor: pointer;
32+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
33+
transition: transform 0.2s;
34+
}
35+
36+
#green {
37+
background-color: green;
38+
}
39+
40+
#red {
41+
background-color: red;
42+
}
43+
44+
#yellow {
45+
background-color: yellow;
46+
}
47+
48+
#blue {
49+
background-color: blue;
50+
}
51+
52+
.color-btn.active {
53+
transform: scale(1.1);
54+
}
55+
56+
#game-status {
57+
margin-top: 20px;
58+
font-size: 1.2rem;
59+
color: #333;
60+
}
61+
62+
#start-btn {
63+
margin-top: 20px;
64+
padding: 10px 20px;
65+
font-size: 1.2rem;
66+
background-color: #4caf50;
67+
color: white;
68+
border: none;
69+
border-radius: 5px;
70+
cursor: pointer;
71+
transition: background-color 0.3s;
72+
}
73+
74+
#start-btn:hover {
75+
background-color: #45a049;
76+
}
77+
78+
#status {
79+
font-weight: bold;
80+
}
81+
82+
#level-message {
83+
font-size: 24px;
84+
font-weight: bold;
85+
color: green;
86+
text-align: center;
87+
margin-top: 20px;
88+
opacity: 0; /* Initially hidden */
89+
transition: opacity 0.5s ease-in-out;
90+
display: none; /* Make sure it's hidden initially */
91+
}
92+
93+
#level-message.show {
94+
opacity: 1; /* Fade in the message */
95+
display: block; /* Make it visible */
96+
}
97+
98+
.my-text {
99+
font-size: 1.5rem;
100+
margin-top: 20px;
101+
color: #333;
102+
opacity: 0;
103+
transition: opacity 0.5s ease-in-out;
104+
display: none;
105+
}
106+
.my-text.show {
107+
opacity: 1;
108+
display: block;
109+
transition: opacity 0.5s ease-in-out;
110+
}

0 commit comments

Comments
 (0)