-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
121 lines (103 loc) · 2.76 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
//Default Intialization
let gameSeq=[];
let userSeq=[];
let level=0;
let started=false;
let btns=['yellow','red','purple','green'];
let h2 = document.querySelector("h2");
//Game is Starting..
document.addEventListener("keypress",function()
{
if(started==false)
{
started=true;
// console.log("Game is Started!!");
levelUp();
}
});
//Gets Flashed for Every Game Sequence
function gameFlash(btn)
{
btn.classList.add("flash");
addSound(btn.getAttribute("id"));
setTimeout(function()
{
btn.classList.remove("flash");
},200);
}
//Gets Flashed for Every User Sequence
function userFlash(btn)
{
btn.classList.add("userFlash");
addSound(btn.getAttribute("id"));
setTimeout(function()
{
btn.classList.remove("userFlash");
},200);
}
//EveryTime After New Color Level gets Increased
function levelUp()
{
userSeq=[];
level++;
h2.innerText=`Level ${level}`;
let randIdx=Math.floor(Math.random()*4);
let randColor = btns[randIdx];
let randBtn =document.querySelector(`.${randColor}`);
gameSeq.push(randColor);
//console.log(gameSeq,"gameSeq");
gameFlash(randBtn);
}
//Every Time When Color Changes This Function Gets Executed
function addSound(btn) {
var audio = new Audio("sounds/" + btn + ".mp3");
audio.play();
}
//This Function is used to check the Game Sequence colors and User Sequence Colors
function checkColor(idx)
{
if(userSeq[idx]===gameSeq[idx])
{
if(userSeq.length==gameSeq.length)
{
// console.log("Same Value!!");
setTimeout(levelUp,800);
}
}else{
h2.innerHTML=`Game Over!! Your Score was ${level} <br>Press any Key to Start the Game`;
started=false;
document.querySelector("body").style.backgroundColor="red";
addSound("wrong");
setTimeout(function()
{
document.querySelector("body").style.backgroundColor="#011F3F";
},200);
reset();
}
}
//This function gets executed whenever User Clicks on Button
function btnPress()
{
let btn=this;
let userColor=btn.getAttribute("id");
userSeq.push(userColor);
// console.log(userSeq,"UserSeq");
userFlash(btn);
checkColor(userSeq.length-1);
}
//This Function gets Executed when the Sequence of colors doesnt Match
function reset()
{
gameSeq=[];
userSeq=[];
started=false;
level=0;
}
//We apply eventListeners On Every Button
//Which Button Gets Clicked Thats Corresponding CallBack() is Executed!!
let allBtns = document.querySelectorAll(".btn");
for(btn of allBtns)
{
btn.addEventListener("click",btnPress);
}
//Mohammad Abubackar