-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
128 lines (112 loc) · 3.55 KB
/
script.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
const cards = document.querySelectorAll(".card"),
timeTag = document.querySelector(".time b"),
flipsTag = document.querySelector(".flips b"),
refreshBtn = document.querySelector(".details button");
let maxTime = 20;
let timeLeft = maxTime;
let flips = 0;
let matchedCard = 0;
let disableDeck = false;
let isPlaying = false;
let cardOne, cardTwo, timer;
function showModal(msgbox) {
let modal = document.getElementById("modal");
let message = document.getElementById(msgbox);
modal.style.display = "block";
message.style.display = "block";
}
function closeModal() {
let modal = document.getElementById("modal");
let messageBoxes = document.getElementsByClassName("message-box");
modal.style.display = "none";
for (let i = 0; i < messageBoxes.length; i++) {
messageBoxes[i].style.display = "none";
}
}
let closeBtn = document.getElementById("close-btn");
closeBtn.addEventListener("click", closeModal);
function initTimer() {
if (timeLeft <= 0) {
if (matchedCard == 6) {
showModal("win-box")
} else {
showModal("lose-box")
}
return clearInterval(timer);
}
timeLeft -= 1;
timeTag.innerText = timeLeft;
}
function flipCard({ target: clickedCard }) {
if (!isPlaying) {
isPlaying = true;
timer = setInterval(initTimer, 1000);
}
if (clickedCard !== cardOne && !disableDeck && timeLeft > 0) {
flips++;
flipsTag.innerText = flips;
clickedCard.classList.add("flip");
if (!cardOne) {
return cardOne = clickedCard;
}
cardTwo = clickedCard;
disableDeck = true;
let cardOneImg = cardOne.querySelector(".back-view img").src,
cardTwoImg = cardTwo.querySelector(".back-view img").src;
matchCards(cardOneImg, cardTwoImg);
}
}
function matchCards(img1, img2) {
if (img1 === img2) {
matchedCard++;
if (matchedCard == 6 && timeLeft > 0) {
showModal("win-box")
return clearInterval(timer);
}
cardOne.removeEventListener("click", flipCard);
cardTwo.removeEventListener("click", flipCard);
cardOne = cardTwo = "";
return disableDeck = false;
}
setTimeout(() => {
cardOne.classList.add("shake");
cardTwo.classList.add("shake");
}, 400);
setTimeout(() => {
cardOne.classList.remove("shake", "flip");
cardTwo.classList.remove("shake", "flip");
cardOne = cardTwo = "";
disableDeck = false;
}, 1200);
}
function shuffleCard() {
timeLeft = maxTime;
flips = matchedCard = 0;
cardOne = cardTwo = "";
clearInterval(timer);
timeTag.innerText = timeLeft;
flipsTag.innerText = flips;
disableDeck = isPlaying = false;
let arr = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6];
arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, index) => {
card.classList.remove("flip");
let imgTag = card.querySelector(".back-view img");
setTimeout(() => {
imgTag.src = `images/img-${arr[index]}.png`;
}, 500);
card.addEventListener("click", flipCard);
});
}
let timeInput = document.querySelector("#time-input"),
timeSubmit = document.querySelector("#time-submit");
timeSubmit.addEventListener("click", function () {
maxTime = parseInt(timeInput.value);
timeLeft = maxTime;
timeInput.value = "";
});
shuffleCard();
refreshBtn.addEventListener("click", shuffleCard);
cards.forEach(card => {
card.addEventListener("click", flipCard);
});