Skip to content

Commit 1685880

Browse files
swapnilsparshswapnilsparsh
committed
Day 27 - Memory Matching Game
1 parent 91abdc1 commit 1685880

File tree

5 files changed

+174
-0
lines changed

5 files changed

+174
-0
lines changed

‎27 - Memory Matching Game/assets/memory.png

2.29 KB
Loading

‎27 - Memory Matching Game/font/sans.ttf

54.5 KB
Binary file not shown.

‎27 - Memory Matching Game/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
8+
<link rel="shortcut icon" href="assets/memory.png" type="image/x-icon">
9+
<link rel="stylesheet" href="style.css">
10+
<title>Memory Matching Game</title>
11+
</head>
12+
<body>
13+
<h3>Memory Matching Game</h3>
14+
<div class="container" id="container"></div>
15+
<footer>
16+
<p>&#x3c; &#47; &#x3e; with ❤️ by
17+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
18+
<br>
19+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
20+
</a>
21+
</p>
22+
</footer>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎27 - Memory Matching Game/script.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const container = document.getElementById('container');
2+
const cardslength = 12;
3+
const cards = [];
4+
5+
let previousShownCard = undefined;
6+
7+
let icons = [
8+
'linkedin',
9+
'instagram',
10+
'twitter',
11+
'whatsapp',
12+
'youtube',
13+
'facebook',
14+
];
15+
16+
// Copy the icons again so we can use them in the cards
17+
icons.push(...icons);
18+
19+
// Shuffle the icons
20+
for (let i = 0; i < 100; i++) {
21+
const idx1 = Math.floor(Math.random() * icons.length);
22+
const idx2 = Math.floor(Math.random() * icons.length);
23+
24+
const temp = icons[idx1];
25+
icons[idx1] = icons[idx2];
26+
icons[idx2] = temp;
27+
}
28+
29+
for (let i = 0; i < cardslength; i++) {
30+
const card = document.createElement('div');
31+
card.classList.add('card');
32+
card.innerHTML = `<div class="front">
33+
<i class="fab fa-${icons[i]}"></i>
34+
</div>
35+
<div class="back"><small>Click me</small></div>`;
36+
37+
card.addEventListener('click', () => {
38+
if (!card.classList.contains('show')) {
39+
card.classList.add('show');
40+
41+
if (!previousShownCard) {
42+
previousShownCard = card;
43+
} else {
44+
const iconOne = previousShownCard.querySelector('i').classList[1];
45+
46+
const iconTwo = card.querySelector('i').classList[1];
47+
48+
if (iconOne !== iconTwo) {
49+
const temp = previousShownCard;
50+
setTimeout(() => {
51+
temp.classList.remove('show');
52+
card.classList.remove('show');
53+
}, 1000);
54+
}
55+
previousShownCard = undefined;
56+
}
57+
}
58+
});
59+
60+
cards.push(card);
61+
62+
container.appendChild(card);
63+
}

‎27 - Memory Matching Game/style.css

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
* {
2+
box-sizing: border-box;
3+
font-family: "sans";
4+
}
5+
6+
@font-face {
7+
font-family: "sans";
8+
src: url("font/sans.ttf");
9+
}
10+
11+
body {
12+
background-color: #19172e;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
font-family: sans-serif;
17+
}
18+
19+
h3 {
20+
text-align: center;
21+
color: white;
22+
}
23+
24+
.container {
25+
display: flex;
26+
flex-wrap: wrap;
27+
width: 450px;
28+
max-width: 100%;
29+
padding-top: 80px;
30+
}
31+
32+
.card {
33+
border-radius: 5px;
34+
cursor: pointer;
35+
position: relative;
36+
margin: 10px;
37+
height: 80px;
38+
width: 80px;
39+
transform-style: preserve-3d;
40+
transform: rotateY(180deg);
41+
transition: transform 0.4s linear;
42+
}
43+
44+
.card.show {
45+
transform: rotateY(0deg);
46+
}
47+
48+
.card .front,
49+
.card .back {
50+
background-color: #fff;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
border-radius: 5px;
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
height: 100%;
59+
width: 100%;
60+
}
61+
62+
.card .front {
63+
transform: rotateY(0deg);
64+
}
65+
66+
.card .back {
67+
transform: rotateY(180deg);
68+
}
69+
70+
.card i {
71+
font-size: 28px;
72+
}
73+
74+
footer {
75+
color: white;
76+
text-align: center;
77+
font-size: 1rem;
78+
position: absolute;
79+
bottom: 0;
80+
margin-bottom: 0;
81+
padding: 5px;
82+
line-height: 3vh;
83+
}
84+
footer a:visited {
85+
color: inherit;
86+
}

0 commit comments

Comments
 (0)