-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
109 lines (92 loc) · 3.26 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
"use strict";
//Whole grid
const overall = document.querySelector(".overall");
const box = document.querySelectorAll(".box");
const box1 = document.querySelector(".box1");
const box2 = document.querySelector(".box2");
const box3 = document.querySelector(".box3");
const box4 = document.querySelector(".box4");
const box5 = document.querySelector(".box6");
const box7 = document.querySelector(".box7");
const box8 = document.querySelector(".box8");
const box9 = document.querySelector(".box9");
const box10 = document.querySelector(".box10");
const box11 = document.querySelector(".box12");
const box13 = document.querySelector(".box13");
const box14 = document.querySelector(".box14");
const box15 = document.querySelector(".box15");
const box16 = document.querySelector(".box16");
const boxes = [...box];
//Modal Window
const overlay = document.querySelector(".overlay");
const scoreCard = document.querySelector(".score-card");
const scoreVal = document.querySelector(".score");
//random number generator
const randomNumber = function (arr) {
const numb = Math.trunc(Math.random() * 16) + 1;
if (arr.length) {
return arr.includes(numb) ? randomNumber(arr) : numb;
} else return numb;
};
//Randomly generating the first block to blink
const firstEl = boxes[randomNumber([]) - 1];
const firstAtr = firstEl.getAttribute("data-set");
let actEl; //Element which is clicked correctly
let actNums = []; // Contains Attributes of elements clicked
let score = 0; // Overall score updating after each click
let elementsArr = [firstEl]; //Array holding elements when clicked
//To make the blink visibly clear
setTimeout(() => {
firstEl.classList.add("active");
}, 300);
actNums.push(+firstAtr);
const handlerFn = function (e) {
const clickedEl = e.target;
const clickedElAtr = +clickedEl.getAttribute("data-set");
actNums.push(clickedElAtr);
if (clickedEl === elementsArr[elementsArr.length - 1]) {
if (actNums.length < 17) {
const anotherRandom = randomNumber(actNums);
actEl = boxes[anotherRandom - 1];
elementsArr.push(actEl);
//Updating the Score
score = actNums.length - 1;
scoreVal.innerText = score;
//Sequentially blinking the grids
for (let i = 0; i < elementsArr.length; i++) {
let el = elementsArr[i];
setTimeout(function () {
el.classList.remove("active");
void el.offsetWidth;
el.classList.add("active");
}, 75 * i);
}
} else {
scoreVal.innerText = score + 1;
gameOver(1); //ending the game
}
} else {
gameOver(0);
}
};
function gameOver(num) {
num === 1 ? console.log("You won") : console.log("You lost");
scoreCard.classList.remove("hidden");
overall.removeEventListener("click", handlerFn);
overlay.classList.remove("hidden");
console.log("Game over, refresh to restart");
}
const removeOverlay = () => {
overlay.classList.add("hidden");
scoreCard.classList.add("hidden");
console.log("Game Over");
};
overlay.addEventListener("click", function (e) {
removeOverlay();
});
window.addEventListener("keydown", function (e) {
if (e.key === "Escape") {
removeOverlay();
}
});
overall.addEventListener("click", handlerFn);