/
MemoryGame.js
80 lines (69 loc) · 1.81 KB
/
MemoryGame.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
const gameContainer = document.getElementById("game");
const COLORS = [
"red",
"blue",
"green",
"orange",
"purple",
"red",
"blue",
"green",
"orange",
"purple"
];
function shuffle(array) {
let counter = array.length;
while (counter > 0) {
let index = Math.floor(Math.random() * counter);
counter--;
let temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
}
let shuffledColors = shuffle(COLORS);
function createDivsForColors(colorArray) {
for (let color of colorArray) {
const newDiv = document.createElement("div");
newDiv.classList.add(color);
newDiv.addEventListener("click", handleCardClick);
gameContainer.append(newDiv);
}
}
let selectedCount = 0;
let selectedCards = [];
let matchFound = false;
function deselectTarget(target) {
if (matchFound) {
return;
}
target.style.backgroundColor = "";
selectedCount--;
selectedCards = selectedCards.splice(1);
}
function handleCardClick(event) {
console.log("you just clicked", event.target);
if (event.target.matched) {
return;
}
if (selectedCount >= 2) {
console.log("Nope!!");
return;
}
selectedCount++;
selectedCards.push(event.target);
event.target.style.backgroundColor = event.target.className;
if ((selectedCount >= 2) && (selectedCards[0].className === selectedCards[1].className)) {
console.log("MATCH!!");
selectedCards[0].matched = true;
selectedCards[1].matched = true;
selectedCount = 0;
selectedCards = [];
matchFound = true;
} else {
matchFound = false;
window.setTimeout(deselectTarget, 1000, event.target);
}
}
createDivsForColors(shuffledColors);