-
Notifications
You must be signed in to change notification settings - Fork 2
/
color.js
120 lines (94 loc) · 2.69 KB
/
color.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
var colors = generateRandomColor(6);
var pickedColor = pickColor();
var square = document.querySelectorAll(".square");
var ColorDisp = document.querySelector("#colordisp");
var Message = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
var easyBtn = document.querySelector("#easy");
var hardBtn = document.querySelector("#hard");
var max = 6;
colordisp.textContent = pickedColor;
resetButton.addEventListener("click", resetGame)
easyBtn.addEventListener("click", easy);
hardBtn.addEventListener("click", hard);
for(var i=0; i<square.length; i++){
//add initial color to squares
square[i].style.background = colors[i];
//add click listner to squares
square[i].addEventListener("click", function(){
var clickedColor = this.style.background;
if (clickedColor === pickedColor){
Message.textContent = "Correct";
resetButton.textContent = "Play again?"
change(clickedColor);
h1.style.background = clickedColor;
}
else {
this.style.background = "#232323";
Message.textContent = "Try again";
}
});
}
function change(color){
for(var i =0; i< square.length; i++){
square[i].style.background = color;
}
}
function pickColor(){
var random = Math.floor(Math.random() * colors.length);
return colors[random];
}
function generateRandomColor(num){
var arr = [];
for(var i = 0; i<num; i++){
arr.push(randomColor());
}
return arr;
}
function randomColor(){
var red = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
var green= Math.floor(Math.random() * 256);
var randcol = "rgb("+red+", "+blue+", "+green+")";
return randcol;
}
function resetGame(){
resetButton.textContent = "New color"
Message.textContent = "";
h1.style.background = "steelblue";
colors = generateRandomColor(max);
pickedColor = pickColor();
colordisp.textContent = pickedColor;
for(var i=0; i<square.length; i++){
square[i].style.background = colors[i];
}
}
function easy(){
easyBtn.classList.add("selected");
hardBtn.classList.remove("selected");
max = 3
colors = generateRandomColor(max);
pickedColor = pickColor();
ColorDisp.textContent = pickedColor;
for (var i = 0; i < square.length; i++){
if(colors[i]){
square[i].style.background = colors[i];
}
else {
square[i].style.display = "none";
}
}
}
function hard(){
easyBtn.classList.remove("selected");
hardBtn.classList.add("selected");
max = 6
colors = generateRandomColor(max);
pickedColor = pickColor();
ColorDisp.textContent = pickedColor;
for (var i = 0; i < square.length; i++){
square[i].style.background = colors[i];
square[i].style.display = "block";
}
}