Skip to content

Commit d59c4b4

Browse files
msrihanreddy5-codemsrihanreddy5-code
authored
Add files via upload
1 parent 2f7b405 commit d59c4b4

File tree

1 file changed

+355
-0
lines changed

1 file changed

+355
-0
lines changed

‎Memory Game JavaScript.txt‎

Lines changed: 355 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,355 @@
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>Memory Challenge</title>
7+
<link rel="stylesheet" href="t.css">
8+
</head>
9+
<body>
10+
<div class="game-container">
11+
<h1>Memory Challenge</h1>
12+
<p class="tagline">Test how sharp your brain is!</p>
13+
14+
<div class="stats">
15+
<span id="moves">Moves: 0</span>
16+
<span id="timer">Time: 0s</span>
17+
<span id="score">Score: 0</span>
18+
</div>
19+
20+
<div id="game-board" class="game-board"></div>
21+
22+
<div id="ai-message" class="ai-message"> Let's test your memory</div>
23+
24+
<button id="restart-btn" class="hidden">Restart Game</button>
25+
</div>
26+
27+
<script src="e.js"></script>
28+
</body>
29+
</html>
30+
31+
const gameBoard = document.getElementById("game-board");
32+
const movesDisplay = document.getElementById("moves");
33+
const timerDisplay = document.getElementById("timer");
34+
const scoreDisplay = document.getElementById("score");
35+
const aiMessage = document.getElementById("ai-message");
36+
const restartBtn = document.getElementById("restart-btn");
37+
38+
let firstCard, secondCard;
39+
let hasFlippedCard = false;
40+
let lockBoard = false;
41+
let moves = 0;
42+
let matchedPairs = 0;
43+
let time = 0;
44+
let timerInterval;
45+
46+
const icons = ["😊", "😂", "😁", "😒", "👌", "👍", "😉", "😜"];
47+
let cards = [...icons, ...icons];
48+
49+
function shuffleCards() {
50+
cards.sort(() => Math.random() - 0.5);
51+
}
52+
53+
function createBoard() {
54+
shuffleCards();
55+
cards.forEach((icon) => {
56+
const card = document.createElement("div");
57+
card.classList.add("card");
58+
card.innerHTML = `
59+
<div class="front">${icon}</div>
60+
<div class="back">?</div>
61+
`;
62+
card.addEventListener("click", flipCard);
63+
gameBoard.appendChild(card);
64+
});
65+
}
66+
67+
function flipCard() {
68+
if (lockBoard || this === firstCard) return;
69+
70+
this.classList.add("flip");
71+
72+
if (!hasFlippedCard) {
73+
hasFlippedCard = true;
74+
firstCard = this;
75+
startTimer();
76+
return;
77+
}
78+
79+
secondCard = this;
80+
checkForMatch();
81+
}
82+
83+
function checkForMatch() {
84+
moves++;
85+
movesDisplay.textContent = `Moves: ${moves}`;
86+
87+
if (moves === 10) {
88+
restartBtn.classList.remove("hidden");
89+
}
90+
91+
let isMatch =
92+
firstCard.querySelector(".front").textContent ===
93+
secondCard.querySelector(".front").textContent;
94+
95+
isMatch ? disableCards() : unflipCards();
96+
aiReact();
97+
}
98+
99+
function disableCards() {
100+
firstCard.removeEventListener("click", flipCard);
101+
secondCard.removeEventListener("click", flipCard);
102+
matchedPairs++;
103+
104+
if (matchedPairs === icons.length) {
105+
setTimeout(() => gameOver(), 800);
106+
}
107+
108+
resetBoard();
109+
}
110+
111+
function unflipCards() {
112+
lockBoard = true;
113+
setTimeout(() => {
114+
firstCard.classList.remove("flip");
115+
secondCard.classList.remove("flip");
116+
resetBoard();
117+
}, 800);
118+
}
119+
120+
function resetBoard() {
121+
[hasFlippedCard, lockBoard] = [false, false];
122+
[firstCard, secondCard] = [null, null];
123+
}
124+
125+
function aiReact() {
126+
const msg = aiComments[Math.floor(Math.random() * aiComments.length)];
127+
aiMessage.textContent = `AI: ${msg}`;
128+
}
129+
130+
function startTimer() {
131+
if (!timerInterval) {
132+
timerInterval = setInterval(() => {
133+
time++;
134+
timerDisplay.textContent = `Time: ${time}s`;
135+
}, 1000);
136+
}
137+
}
138+
139+
function calculateScore() {
140+
return Math.max(1000 - (moves * 10 + time * 2), 0);
141+
}
142+
143+
function gameOver() {
144+
clearInterval(timerInterval);
145+
const finalScore = calculateScore();
146+
scoreDisplay.textContent = `Score: ${finalScore}`;
147+
148+
const overlay = document.createElement("div");
149+
overlay.classList.add("game-over-overlay");
150+
overlay.innerHTML = `
151+
<div class="game-over-box">
152+
<h2> Game Over </h2>
153+
<p>Your Score: <strong>${finalScore}</strong></p>
154+
<p>${finalScore > 800 ? "Impressive" : "Not bad Try again?"}</p>
155+
<button id="play-again">Play Again</button>
156+
</div>
157+
`;
158+
159+
document.body.appendChild(overlay);
160+
161+
document.getElementById("play-again").addEventListener("click", () => {
162+
overlay.remove();
163+
restartGame();
164+
});
165+
}
166+
167+
function restartGame() {
168+
clearInterval(timerInterval);
169+
timerInterval = null;
170+
[moves, matchedPairs, time] = [0, 0, 0];
171+
gameBoard.innerHTML = "";
172+
movesDisplay.textContent = "Moves: 0";
173+
timerDisplay.textContent = "Time: 0s";
174+
scoreDisplay.textContent = "Score: 0";
175+
aiMessage.textContent = "Let's see if you can beat me this time...";
176+
restartBtn.classList.add("hidden");
177+
createBoard();
178+
}
179+
180+
restartBtn.addEventListener("click", restartGame);
181+
createBoard();
182+
183+
body {
184+
background: radial-gradient(circle at top, #0a0f1e, #000);
185+
color: #00ffcc;
186+
font-family: "Poppins", sans-serif;
187+
display: flex;
188+
align-items: center;
189+
justify-content: center;
190+
height: 100vh;
191+
margin: 0;
192+
overflow: hidden;
193+
}
194+
195+
.game-container {
196+
text-align: center;
197+
width: 90%;
198+
max-width: 550px;
199+
height: 90vh;
200+
display: flex;
201+
flex-direction: column;
202+
align-items: center;
203+
justify-content: space-between;
204+
position: relative;
205+
}
206+
207+
h1 {
208+
font-size: 2rem;
209+
letter-spacing: 2px;
210+
text-shadow: 0 0 10px #00ffcc;
211+
margin: 0;
212+
}
213+
214+
.tagline {
215+
font-size: 0.9rem;
216+
color: #66ffe0;
217+
margin: 0 0 10px 0;
218+
}
219+
220+
.stats {
221+
display: flex;
222+
justify-content: space-around;
223+
width: 100%;
224+
margin-bottom: 10px;
225+
}
226+
227+
.game-board {
228+
display: grid;
229+
grid-template-columns: repeat(4, 1fr);
230+
gap: 10px;
231+
width: 100%;
232+
flex-grow: 1;
233+
max-height: 60vh;
234+
justify-items: center;
235+
align-items: center;
236+
}
237+
238+
.card {
239+
width: 100%;
240+
aspect-ratio: 1 / 1;
241+
position: relative;
242+
cursor: pointer;
243+
transform-style: preserve-3d;
244+
transition: transform 0.5s;
245+
}
246+
247+
.card.flip {
248+
transform: rotateY(180deg);
249+
}
250+
251+
.card .front,
252+
.card .back {
253+
position: absolute;
254+
width: 100%;
255+
height: 100%;
256+
border-radius: 10px;
257+
backface-visibility: hidden;
258+
display: flex;
259+
align-items: center;
260+
justify-content: center;
261+
font-size: 1.6rem;
262+
box-shadow: 0 0 10px #00ffcc;
263+
}
264+
265+
.card .front {
266+
transform: rotateY(180deg);
267+
background: #001a1a;
268+
}
269+
270+
.card .back {
271+
background: #00ffcc;
272+
color: #001f1f;
273+
}
274+
275+
.ai-message {
276+
font-size: 1rem;
277+
margin: 10px 0;
278+
color: #00ffee;
279+
}
280+
281+
button {
282+
position: absolute;
283+
right: 15px;
284+
bottom: 15px;
285+
background: #00ffcc;
286+
color: #001f1f;
287+
border: none;
288+
padding: 10px 20px;
289+
border-radius: 8px;
290+
cursor: pointer;
291+
font-weight: bold;
292+
transition: 0.3s;
293+
}
294+
295+
button:hover {
296+
background: #00cca3;
297+
box-shadow: 0 0 15px #00ffcc;
298+
}
299+
300+
.hidden {
301+
display: none;
302+
}
303+
304+
.game-over-overlay {
305+
position: fixed;
306+
inset: 0;
307+
background: rgba(0, 0, 0, 0.85);
308+
display: flex;
309+
align-items: center;
310+
justify-content: center;
311+
z-index: 100;
312+
animation: fadeIn 0.5s ease-in-out;
313+
}
314+
315+
.game-over-box {
316+
background: #001f1f;
317+
color: #00ffcc;
318+
border: 2px solid #00ffcc;
319+
border-radius: 15px;
320+
padding: 30px 40px;
321+
text-align: center;
322+
box-shadow: 0 0 20px #00ffcc;
323+
}
324+
325+
.game-over-box h2 {
326+
font-size: 2rem;
327+
margin-bottom: 15px;
328+
}
329+
330+
.game-over-box p {
331+
font-size: 1rem;
332+
margin: 10px 0;
333+
}
334+
335+
.game-over-box button {
336+
background: #00ffcc;
337+
color: #001f1f;
338+
border: none;
339+
padding: 10px 25px;
340+
border-radius: 8px;
341+
font-weight: bold;
342+
cursor: pointer;
343+
margin-top: 15px;
344+
transition: 0.3s;
345+
}
346+
347+
.game-over-box button:hover {
348+
background: #00cca3;
349+
box-shadow: 0 0 15px #00ffcc;
350+
}
351+
352+
@keyframes fadeIn {
353+
from { opacity: 0; }
354+
to { opacity: 1; }
355+
}

0 commit comments

Comments
 (0)