Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cc0c45b

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /