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