-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
121 lines (104 loc) · 3.38 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
110
111
112
113
114
115
116
117
118
119
120
121
let numColors = 6;
let colors = [];
let pickedColor;
// fetch html elements
let circles = document.querySelectorAll('.circle');
let messageDisplay = document.querySelector('#message');
let h1 = document.querySelector('h1');
let colorDisplay = document.querySelector('#colorDisplay');
let modeButtons = document.querySelectorAll('.mode');
let resetButton = document.querySelector('#reset');
// start up initialization / IIFE
(function init() {
reset();
correctColorValidator();
gameMode();
})();
function reset() {
colors = randomColorGenerator(numColors);
pickedColor = pickColor();
// set color display to equal checked color
colorDisplay.textContent = pickedColor;
h1.style.backgroundColor = 'steelblue';
// assign random color to each circle
for (let i = 0; i < circles.length; i++) {
circles[i].style.backgroundColor = colors[i];
}
resetButton.textContent = 'New colors';
messageDisplay.textContent = '';
}
resetButton.addEventListener('click', function () {
reset();
});
// Easy and hard mode
function gameMode() {
for (let 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' ? numColors = 3 : numColors = 6;
reset();
for (let i = 0; i < circles.length; i++) {
if (colors[i]) {
circles[i].style.display = 'block';
} else {
circles[i].style.display = 'none';
}
}
});
}
}
// set up clicked circle validator
function correctColorValidator() {
for (let i = 0; i < circles.length; i++) {
circles[i].addEventListener('click', function () {
let checkedColor = this.style.backgroundColor;
if (checkedColor === pickedColor) {
correctCircle();
messageDisplay.textContent = 'Correct!';
h1.style.backgroundColor = checkedColor;
resetButton.textContent = 'Play again?'
} else {
this.style.backgroundColor = '#232323';
messageDisplay.textContent = 'Try Again';
}
});
}
}
// Change color of all circles when guess is correct
function correctCircle() {
for (let i = 0; i < circles.length; i++) {
circles[i].style.backgroundColor = pickedColor;
}
}
// --- RANDOM COLOR GENERATOR ---
// take randomRBGColor and push into an array
function randomColorGenerator(num) {
// create an array
let arr = [];
// push colors into an array
for (let i = 0; i < num; i++) {
arr.push(randomRGBColor());
}
// return array of random RGB colors
return arr;
}
// create RGB color
function randomRGBColor() {
// red spectrum
let r = Math.floor(Math.random() * 256);
// green spectrum
let g = Math.floor(Math.random() * 256);
// blue spectrum
let b = Math.floor(Math.random() * 256);
// return random color
return `rgb(${r}, ${g}, ${b})`;
}
// --- Random color from array ---
function pickColor() {
// pick random color from array
let random = Math.floor(Math.random() * colors.length);
return colors[random];
}
// -----------------------------------------