-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
121 lines (112 loc) · 3.9 KB
/
app.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
document.addEventListener("DOMContentLoaded", () => {
//card options
const cardArray = [
{ name: "frog", img: "images/frog.jpg" },
{ name: "frog", img: "images/frog.jpg" },
{ name: "pig", img: "images/pig.jpg" },
{ name: "pig", img: "images/pig.jpg" },
{ name: "tiger", img: "images/tiger.jpg" },
{ name: "tiger", img: "images/tiger.jpg" },
{ name: "chicken", img: "images/chicken.jpg" },
{ name: "chicken", img: "images/chicken.jpg" },
{ name: "koala", img: "images/koala.jpg" },
{ name: "koala", img: "images/koala.jpg" },
{ name: "dog", img: "images/dog.jpg" },
{ name: "dog", img: "images/dog.jpg" },
{ name: "monkey", img: "images/monkey.jpg" },
{ name: "monkey", img: "images/monkey.jpg" },
];
cardArray.sort(() => 0.5 - Math.random());
const grid = document.querySelector(".grid");
const resultDisplay = document.querySelector("#result");
const alert = document.querySelector(".alert");
let cardsChosen = [];
let cardsChosenId = [];
let cardsWon = [];
let mistakes = 5;
const audioMatch = new Audio("./sounds/coin.wav");
const audioMiss = new Audio("./sounds/error.wav");
const newGame = document.querySelector(".new-game");
newGame.addEventListener("click", createNewGame);
function createNewGame() {
cardsWon = [];
mistakes = 5;
grid.innerHTML = "";
createBoard();
}
//create gameboard
function createBoard() {
resultDisplay.textContent = mistakes;
for (let i = 0; i < cardArray.length; i++) {
let card = document.createElement("img");
card.setAttribute("src", "images/background-yellow-waves.jpg");
card.setAttribute("data-id", i);
card.classList.add("card");
card.addEventListener("click", flipCard);
grid.appendChild(card);
}
}
function flipCard() {
let cardId = this.getAttribute("data-id");
cardsChosen.push(cardArray[cardId].name);
cardsChosenId.push(cardId);
this.setAttribute("src", cardArray[cardId].img);
if (cardsChosen.length === 2) {
setTimeout(checkForMatch, 400);
}
}
function checkForMatch() {
const cards = document.querySelectorAll("img");
const optionOneId = cardsChosenId[0];
const optionTwoId = cardsChosenId[1];
if (cardsChosen[0] === cardsChosen[1] && optionOneId !== optionTwoId) {
audioMatch.play();
displayAlert("match");
cards[optionOneId].setAttribute("src", "images/blank.jpg");
cards[optionOneId].style.pointerEvents = "none";
cards[optionTwoId].style.pointerEvents = "none";
cards[optionTwoId].setAttribute("src", "images/blank.jpg");
cards[optionOneId].classList.add("matched-card");
cards[optionTwoId].classList.add("matched-card");
cardsWon.push(cardsChosen);
} else {
cards[optionOneId].setAttribute(
"src",
"images/background-yellow-waves.jpg"
);
cards[optionTwoId].setAttribute(
"src",
"images/background-yellow-waves.jpg"
);
mistakes -= 1;
resultDisplay.textContent = mistakes;
audioMiss.play();
displayAlert("miss");
}
cardsChosen = [];
cardsChosenId = [];
// resultDisplay.textContent = cardsWon.length;
if (cardsWon.length === cardArray.length / 2) {
grid.innerHTML = "";
alert.innerHTML = `You won!`;
}
if (mistakes === 0) {
alert.innerHTML = `Game over`;
grid.innerHTML = "";
}
}
function displayAlert(action) {
alert.classList.add(`alert-${action}`);
if (action === "miss") {
alert.innerHTML = `<i class="fas fa-times"></i>`;
} else if (action === "match") {
alert.innerHTML = `<i class="fas fa-check"></i>`;
}
//remove alert
setTimeout(function () {
alert.innerHTML = "";
alert.classList.remove(`alert-${action}`);
}, 1000);
}
createBoard();
});