Skip to content

Commit 7f7003e

Browse files
tajulafreentajulafreen
authoredAug 8, 2024··
Merge pull request #35 from tajulafreen/Memory_Card_Game
50Projects-HTML-CSS-JavaScript : Memory card game
2 parents 88ae6d4 + 4282bf2 commit 7f7003e

File tree

4 files changed

+224
-0
lines changed

4 files changed

+224
-0
lines changed
 

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,17 @@ In order to run this project you need:
364364
</details>
365365
</li>
366366

367+
<li>
368+
<details>
369+
<summary>Memory Card Game</summary>
370+
<p>The Memory Card Game is a classic card-matching game designed to enhance cognitive skills and memory. Players are presented with a grid of face-down cards. The goal is to find and match all pairs of cards. This project demonstrates fundamental web development skills using HTML, CSS, and JavaScript.</p>
371+
<ul>
372+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/MemoryCard/">Live Demo</a></li>
373+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/MemoryCard">Source</a></li>
374+
</ul>
375+
</details>
376+
</li>
377+
367378
</ol>
368379

369380
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/MemoryCard/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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 Card Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Memory Card Game</h1>
12+
<div id="game-board" class="game-board">
13+
<!-- Cards will be dynamically inserted here -->
14+
</div>
15+
<button class="btn">Start New Game</button>
16+
</div>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎Source-Code/MemoryCard/script.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
const cardValues = [
2+
'🍎',
3+
'🍎',
4+
'🍌',
5+
'🍌',
6+
'🍮',
7+
'🍮',
8+
'🎂',
9+
'🎂',
10+
'🍟',
11+
'🍟',
12+
'🍫',
13+
'🍫',
14+
'🍇',
15+
'🍇',
16+
'🥝',
17+
'🥝',
18+
];
19+
let shuffledValues = [];
20+
let cardElements = [];
21+
let flippedCards = [];
22+
let matchedCards = [];
23+
24+
const shuffleArray = (array) => {
25+
let currentIndex = array.length;
26+
let temporaryValue;
27+
let randomIndex;
28+
29+
while (currentIndex !== 0) {
30+
randomIndex = Math.floor(Math.random() * currentIndex);
31+
currentIndex -= 1;
32+
33+
temporaryValue = array[currentIndex];
34+
array[currentIndex] = array[randomIndex];
35+
array[randomIndex] = temporaryValue;
36+
}
37+
38+
return array;
39+
};
40+
41+
const checkMatch = () => {
42+
const [card1, card2] = flippedCards;
43+
44+
if (
45+
card1.querySelector('.card-back').textContent
46+
=== card2.querySelector('.card-back').textContent
47+
) {
48+
matchedCards.push(card1, card2);
49+
} else {
50+
card1.classList.remove('flipped');
51+
card2.classList.remove('flipped');
52+
}
53+
flippedCards = [];
54+
55+
if (matchedCards.length === cardElements.length) {
56+
alert('Congratulations! You found all pairs!');
57+
}
58+
};
59+
60+
const flipCard = (card) => {
61+
if (
62+
flippedCards.length < 2
63+
&& !card.classList.contains('flipped')
64+
&& !matchedCards.includes(card)
65+
) {
66+
card.classList.add('flipped');
67+
flippedCards.push(card);
68+
69+
if (flippedCards.length === 2) {
70+
setTimeout(checkMatch, 1000);
71+
}
72+
}
73+
};
74+
const startGame = () => {
75+
shuffledValues = shuffleArray(cardValues);
76+
const board = document.getElementById('game-board');
77+
board.innerHTML = '';
78+
matchedCards = [];
79+
cardElements = [];
80+
for (let i = 0; i < shuffledValues.length; i += 1) {
81+
const card = document.createElement('div');
82+
card.classList.add('card');
83+
84+
const cardInner = document.createElement('div');
85+
cardInner.classList.add('card-inner');
86+
87+
const cardFront = document.createElement('div');
88+
cardFront.classList.add('card-front');
89+
90+
const cardBack = document.createElement('div');
91+
cardBack.classList.add('card-back');
92+
cardBack.textContent = shuffledValues[i];
93+
94+
cardInner.appendChild(cardFront);
95+
cardInner.appendChild(cardBack);
96+
card.appendChild(cardInner);
97+
98+
card.addEventListener('click', () => flipCard(card));
99+
board.appendChild(card);
100+
cardElements.push(card);
101+
}
102+
};
103+
104+
const btn = document.querySelector('.btn');
105+
btn.addEventListener('click', startGame);
106+
// Initialize the game when the page loads
107+
window.onload = startGame;

‎Source-Code/MemoryCard/style.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
margin: 0;
8+
background-color: #eeddf0;
9+
}
10+
11+
h1 {
12+
color: #d38692;
13+
font-size: 2em;
14+
}
15+
16+
.container {
17+
text-align: center;
18+
background-color: #a7f1c5;
19+
padding: 20px;
20+
border-radius: 8px;
21+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22+
}
23+
24+
.game-board {
25+
display: grid;
26+
grid-template-columns: repeat(4, 100px);
27+
grid-template-rows: repeat(4, 100px);
28+
gap: 10px;
29+
margin-bottom: 20px;
30+
}
31+
32+
.card {
33+
width: 100px;
34+
height: 100px;
35+
background-color: #eee;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
font-size: 2em;
40+
cursor: pointer;
41+
color: transparent;
42+
perspective: 1000px; /* Added for 3D effect */
43+
}
44+
45+
.card-inner {
46+
width: 100%;
47+
height: 100%;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
transition: transform 0.6s;
52+
transform-style: preserve-3d;
53+
position: relative;
54+
}
55+
56+
.card-front,
57+
.card-back {
58+
position: absolute;
59+
width: 100%;
60+
height: 100%;
61+
backface-visibility: hidden;
62+
}
63+
64+
.card-front {
65+
background-color: #e68ce0;
66+
}
67+
68+
.card-back {
69+
background-color: #fff;
70+
font-size: 60px;
71+
color: #000;
72+
transform: rotateY(180deg);
73+
}
74+
75+
.card.flipped .card-inner {
76+
transform: rotateY(180deg);
77+
}
78+
79+
button {
80+
padding: 15px 20px;
81+
font-size: 18px;
82+
font-weight: 600;
83+
color: rgb(228, 240, 240);
84+
border: none;
85+
cursor: pointer;
86+
background-color: #008cba;
87+
}

0 commit comments

Comments
 (0)
Please sign in to comment.