-
Notifications
You must be signed in to change notification settings - Fork 0
/
rgbGame.js
134 lines (124 loc) · 4.43 KB
/
rgbGame.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
var numberOfSquares = 6;
var colors = generateRandomColors(numberOfSquares);
var squares = document.querySelectorAll('.square');
var correctColor = pickColor();
var colorDisplay = document.querySelector('#colorDisplay');
var message = document.querySelector('#message');
var navFirst = document.querySelector("#first");
var resetButton = document.querySelector("#reset");
var easyBtn = document.querySelector("#easy");
var hardBtn = document.querySelector("#hard");
easyBtn.addEventListener("click", function () {
// lights of buttons on and off
easyBtn.classList.add("difficultySelected");
hardBtn.classList.remove("difficultySelected");
// reset message
message.textContent = "";
// change number of squares
numberOfSquares = 3;
colors = generateRandomColors(numberOfSquares);
// randomize colors
correctColor = pickColor();
colorDisplay.textContent = correctColor;
// change the colors of the squares and hide the bottom 3
for (var i = 0; i < squares.length; i++) {
if (colors[i]) {
squares[i].style.backgroundColor = colors[i];
} else {
squares[i].style.display = "none";
}
}
})
hardBtn.addEventListener("click", function () {
// lights of buttons on and off
easyBtn.classList.remove("difficultySelected");
hardBtn.classList.add("difficultySelected");
// reset message
message.textContent = "";
// change number of squares
numberOfSquares = 6;
colors = generateRandomColors(numberOfSquares);
// randomize colors
correctColor = pickColor();
colorDisplay.textContent = correctColor;
// change the colors of the squares and show the bottom 3
for (var i = 0; i < squares.length; i++) {
squares[i].style.display = "block";
squares[i].style.backgroundColor = colors[i];
}
})
for (var i = 0; i < squares.length; i++) {
// giving colors to squares
squares[i].style.backgroundColor = colors[i];
// adding eventListeners to squares
squares[i].addEventListener('click', function () {
// grab the color of squares[i]
var clickedColor = this.style.backgroundColor;
// compare squares[i] color to correctColor
if (clickedColor === correctColor) {
changeToCorrectColors(correctColor);
// change nav #first color
navFirst.style.backgroundColor = correctColor;
resetButton.textContent = "再玩一次?";
message.textContent = "正確!";
} else {
this.style.backgroundColor = "#232323";
message.textContent = "再試一次";
}
})
}
colorDisplay.textContent = correctColor;
resetButton.addEventListener("click", function () {
// generate all new colors
colors = generateRandomColors(numberOfSquares);
// pick a new correctColor from the array
correctColor = pickColor();
// change colorDisplay to correctColor
colorDisplay.textContent = correctColor;
// change colors to squares
for (var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = colors[i];
// change resetButton back to New Colors
resetButton.textContent = "新遊戲";
// reset nav #first color
navFirst.style.backgroundColor = "#5581B0";
// reset message
message.textContent = "";
}
})
function changeToCorrectColors(color) {
// loop through all squares
for (i = 0; i < squares.length; i++) {
// change all colors to match the given correct color
squares[i].style.backgroundColor = color;
}
}
function pickColor() {
// pick a random number
// Math.floor chops of decimals, Math.random picks a random number between 0 and 1, times 6 to make the number go between 0 and 5
var random = Math.floor(Math.random() * colors.length);
return colors[random];
}
function generateRandomColors(num) {
// make an array
var arr = [];
// add num random colors to array
for (i = 0; i < num; i++) {
// get random colors
// push them into array
arr.push(randomColor());
}
// return that array
return arr;
}
// generate 1 random color
function randomColor() {
// R from 0-255, times 256 to make 255 possible
var r = Math.floor(Math.random() * 256);
// G from 0-255
var g = Math.floor(Math.random() * 256);
// B from 0-255
var b = Math.floor(Math.random() * 256);
// "rgb(r, g, b)"
return "rgb(" + r + ", " + g + ", " + b + ")";
}