/
colorGame.js
185 lines (160 loc) · 5.69 KB
/
colorGame.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
var numSquares = 6;
var colors = []
var pickedColor;
var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
var modeButtons = document.querySelectorAll(".mode")
init();
function init(){
// Initate the run and "reset" to get everthing working
// from no colors to all squares have color
setUpModeButtons()
setUpSquares()
reset();
}
function setUpModeButtons(){
// SET UP MODE BUTTONS FUNCTION
// the switch button between easy & hard
// Easy: 1 by 3 [][][]
//
// Hard: 3 by 3 [][][]
// [][][]
// [][][]
//mode button event listener
for (var i = 0; i < modeButtons.length; i++) {
modeButtons[i].addEventListener("click", function () {
modeButtons[0].classList.remove("selected")
modeButtons[1].classList.remove("selected")
this.classList.add("selected")
this.textContent === "Easy" ? numSquares = 3 : numSquares = 6;
reset();
// figure out how many squares to show
// pick new colors
// pick a new picked color
// update page to reflect changes
});
}
}
function setUpSquares(){
// literally..
// COLOR ALL SQUARES
for (var i = 0; i < squares.length; i++) {
// add initial color to squares
squares[i].style.backgroundColor = colors[i];
// add click listeners to squares
squares[i].addEventListener("click", function () {
// grab color of clicked square
var clickedColor = this.style.backgroundColor;
// compare color to picked color
console.log(clickedColor, pickedColor)
if (clickedColor === pickedColor) {
console.log(clickedColor, pickedColor)
changeColors(clickedColor)
resetButton.textContent = "Play Again?"
messageDisplay.textContent = "Correct!";
h1.style.backgroundColor = clickedColor;
resetButton.style.color = clickedColor;
messageDisplay.style.color = clickedColor;
// document.querySelector(".mode.selected").style.color(clickedColor);
for (var i = 0; i < modeButtons.length; i++)
{
modeButtons[i].style.color = clickedColor;
if (modeButtons[i].classList.value === "mode")
{
modeButtons[i].style.color=(clickedColor);
} else{
modeButtons[i].style.color = "white"
modeButtons[i].style.background=(clickedColor);
}
}
} else {
this.style.backgroundColor = "#E5E5E5";
messageDisplay.textContent = "Try again"
}
});
}
}
function reset(){
// RESET FUNCTION:
// generate new colors, generate picked colors
// this function reset all thhe colors in the squares
// reset background color, display message, and display button
//generate all new colors
colors = generateRandomColors(numSquares);
//pick a new random color from array
pickedColor = pickColor()
colorDisplay.textContent = pickedColor;
//change colors of squares
for (var i = 0; i < squares.length; i++) {
if (colors[i]){
squares[i].style.display = "block";
squares[i].style.backgroundColor = colors[i];
} else{
squares[i].style.display = "none";
}
}
messageDisplay.textContent = "";
h1.style.backgroundColor = "rgb(22, 199, 166) ";
resetButton.textContent = "New Colors";
resetButton.style.color = "rgb(22, 199, 166) ";
messageDisplay.style.color = "rgb(22, 199, 166) ";
for (var i = 0; i < modeButtons.length; i++) {
if (modeButtons[i].classList.value === "mode") {
modeButtons[i].style.color = ("rgb(22, 199, 166) ");
modeButtons[i].style.background = "white";
} else {
modeButtons[i].style.color = "white";
modeButtons[i].style.background = ("rgb(22, 199, 166) ");
}
}
}
resetButton.addEventListener("click", function(){
// //generate all new colors
// numSquares = 6
// colors = generateRandomColors(numSquares);
// //pick a new random color from array
// pickedColor = pickColor()
// colorDisplay.textContent=pickedColor;
// //change colors of squares
// for (var i = 0; i < squares.length; i++){
// squares[i].style.backgroundColor = colors[i];
// }
// messageDisplay.textContent ="";
// h1.style.backgroundColor = "70AE98";
// this.textContent = "New Colors";
reset();
});
function changeColors(color){
// loop through all square
for (var i = 0; i < squares.length; i++ ){
squares[i].style.backgroundColor = color
}
// change each color to match given color
}
function pickColor(){
var random = Math.floor(Math.random()*colors.length)
return colors[random];
}
function generateRandomColors(num){
// make an array
var returncolors = [];
// add num random colors to array
for( var i = 0; i < num; i++){
returncolors.push(randomColors())
}
// return that array
return returncolors;
}
function randomColors(){
// Randomize RGB colors
// RED
var r = Math.floor(Math.random() * 256)
// GREEN
var g = Math.floor(Math.random() * 256)
// BLUE
var b = Math.floor(Math.random() * 256)
return ("rgb(" + r + ", " + g + ", " + b + ")")
}