-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
84 lines (65 loc) · 1.69 KB
/
main.js
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
const cardBoard = document.querySelector("#cardboard");
const images = [
/**'angular.svg',
'aurelia.svg',
'backbone.svg',
'ember.svg',
'react.svg',
'vue.svg'**/
'1.png',
'2.png',
'3.png',
'4.png',
'5.png',
'6.png'
]
let cardHTML = '';
images.forEach(img => {
cardHTML += `
<div class="memory-card" data-card="${img}">
<img class="front-face" src="dark img/${img}">
<img class="back-face" src="dark img/capa2.png">
</div>
`;
});
cardBoard.innerHTML = cardHTML + cardHTML;
/** Final do HTML */
const cards = document.querySelectorAll('.memory-card');
let firstCard, secondCard;
let lockCards = false;
function flipCard(){
if(lockCards) return false;
this.classList.add('flip')
if(!firstCard){
firstCard = this;
return false;
}
secondCard = this;
checkForMatch (this);
}
function checkForMatch(){
let isMatch = firstCard.dataset.card === secondCard.dataset.card;
!isMatch ? disableCards() : resetCards(isMatch);
}
function disableCards(){
lockCards = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetCards();
}, 1000);
}
(function shuffle(){
cards.forEach(card => {
let rand = Math.floor(Math.random() * 12);
card.style.order = rand;
})
})()
function resetCards(isMatch = false){
if(isMatch){
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
}
[firstCard, secondCard, lockCards] = [null, null, false];
}
cards.forEach(card => card.addEventListener('click',flipCard))