Skip to content

Commit 7711f4b

Browse files
w3cjw3cj
committed
✨ add episode 9
1 parent 35c44f1 commit 7711f4b

File tree

5 files changed

+213
-0
lines changed

5 files changed

+213
-0
lines changed

‎episode_009/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
## Suggestions
2+
3+
* Emoji Memory Matching Game
4+
* Cards are presented face down
5+
* Click a card to reveal an emoji
6+
* Click another card to reveal another emoji
7+
* If the emojis match - you get a point
8+
* If not, they flip back over and you try again
9+
* When all the cards are flipped - game over
10+
* If you win:
11+
* SchippSchwapp appears on screen
12+
* Fireworks happen
13+
14+
* Maybe
15+
* SchwippSchwapp pouring - countdown timer
16+
17+
* [ ] Suneeh - SchwippSchwapp
18+
* [ ] B0Bhead - ALOTOFEMOJIS
19+
* [ ] Acid_Spark - Fireworks
20+
* [ ] Cr1MsOnNn - phone
21+
* [ ] Nukiepoo - Circles
22+

‎episode_009/app.js

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
const mainElement = document.querySelector('main');
2+
const cardsElement = document.querySelector('#cards');
3+
const emojis = ['🤓', '🎭', '🌱', '🎉', '🎈', '🚀', '💩', '✨', '🌵', '🐛', '🎆', '💚', '🤣', '📳'];
4+
5+
function getStartingEmojis() {
6+
const allEmojis = emojis.slice();
7+
const startingEmojis = [];
8+
9+
while (startingEmojis.length < 12) {
10+
const randomIndex = Math.floor(Math.random() * allEmojis.length);
11+
startingEmojis.push(allEmojis[randomIndex]);
12+
allEmojis.splice(randomIndex, 1);
13+
}
14+
return startingEmojis;
15+
}
16+
17+
function shuffleArray(array) {
18+
const shuffledArray = [];
19+
20+
while (array.length) {
21+
const randomIndex = Math.floor(Math.random() * array.length);
22+
shuffledArray.push(array[randomIndex]);
23+
array.splice(randomIndex, 1);
24+
}
25+
26+
return shuffledArray;
27+
}
28+
29+
function startGame() {
30+
const gameState = {
31+
flipped: [],
32+
score: 0,
33+
};
34+
const startingEmojis = getStartingEmojis();
35+
const emojisWithPairs = shuffleArray(startingEmojis.concat(startingEmojis));
36+
emojisWithPairs.forEach((emoji) => {
37+
const cardElement = document.createElement('div');
38+
cardElement.classList.add('card');
39+
cardElement.innerHTML = `
40+
<div class="flip-card">
41+
<div class="flip-card-inner">
42+
<div class="flip-card-front">
43+
<img src="can.png">
44+
</div>
45+
<div class="flip-card-back">
46+
<h1 class="emoji">${emoji}</h1>
47+
</div>
48+
</div>
49+
</div>
50+
`;
51+
cardsElement.appendChild(cardElement);
52+
cardElement.addEventListener('click', () => {
53+
if (cardElement.classList.contains('card-correct') || cardElement.classList.contains('flip-card-flipped')) return;
54+
if (gameState.flipped.length < 2) {
55+
cardElement.classList.add('flip-card-flipped');
56+
gameState.flipped.push({ emoji, element: cardElement });
57+
}
58+
59+
if (gameState.flipped.length === 2) {
60+
if (gameState.flipped[0].emoji === gameState.flipped[1].emoji) {
61+
gameState.flipped.forEach((flipped) => {
62+
flipped.element.classList.remove('card');
63+
flipped.element.classList.add('card-correct');
64+
});
65+
gameState.flipped = [];
66+
gameState.score += 1;
67+
if (gameState.score === startingEmojis.length) {
68+
setTimeout(() => {
69+
const fireworks = new Fireworks(mainElement);
70+
fireworks.start();
71+
cardsElement.style.opacity = '0.2';
72+
}, 700);
73+
}
74+
} else {
75+
setTimeout(() => {
76+
gameState.flipped = [];
77+
document.querySelectorAll('.card').forEach((card) => {
78+
card.classList.remove('flip-card-flipped');
79+
});
80+
}, 700);
81+
}
82+
}
83+
});
84+
});
85+
}
86+
87+
startGame();

‎episode_009/can.png

177 KB
Loading

‎episode_009/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
<title></title>
8+
<link rel="stylesheet" href="styles.css">
9+
<script src="app.js" defer></script>
10+
</head>
11+
<body>
12+
<main>
13+
<div id="cards"></div>
14+
</main>
15+
<script src="https://unpkg.com/fireworks-js@latest/dist/fireworks.js"></script>
16+
</body>
17+
</html>

‎episode_009/styles.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
body {
2+
margin: 0;
3+
background: black;
4+
}
5+
6+
.flip-card {
7+
background-color: transparent;
8+
width: 300px;
9+
height: 200px;
10+
border: 1px solid #f1f1f1;
11+
perspective: 1000px; /* Remove this if you don't want the 3D effect */
12+
}
13+
14+
/* This container is needed to position the front and back side */
15+
.flip-card-inner {
16+
position: relative;
17+
width: 100%;
18+
height: 100%;
19+
text-align: center;
20+
transition: transform 1s;
21+
transform-style: preserve-3d;
22+
}
23+
24+
/* Do an horizontal flip when you move the mouse over the flip box container */
25+
.flip-card-flipped .flip-card-inner {
26+
transform: rotateY(180deg);
27+
}
28+
29+
/* Position the front and back side */
30+
.flip-card-front, .flip-card-back {
31+
position: absolute;
32+
width: 100%;
33+
height: 100%;
34+
-webkit-backface-visibility: hidden; /* Safari */
35+
backface-visibility: hidden;
36+
}
37+
38+
/* Style the front side (fallback if image is missing) */
39+
.flip-card-front {
40+
background-color: #bbb;
41+
color: black;
42+
width: 100%;
43+
height: 100%;
44+
}
45+
46+
.flip-card-front img {
47+
height: 100%;
48+
}
49+
50+
/* Style the back side */
51+
.flip-card-back {
52+
background-color: dodgerblue;
53+
color: white;
54+
transform: rotateY(180deg);
55+
}
56+
57+
.emoji {
58+
font-size: 10rem;
59+
padding: 0;
60+
margin: 0;
61+
}
62+
63+
main {
64+
position: relative;
65+
}
66+
67+
#cards {
68+
display: flex;
69+
flex-wrap: wrap;
70+
justify-content: center;
71+
align-items: center;
72+
width: 100%;
73+
gap: 1rem;
74+
position: relative;
75+
}
76+
77+
.card-correct {
78+
opacity: 0.5;
79+
}
80+
81+
canvas {
82+
position: absolute;
83+
top: 0;
84+
left: 0;
85+
width: 100vw;
86+
height: 100vh;
87+
}

0 commit comments

Comments
 (0)