-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
140 lines (123 loc) · 4.97 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/********************************************************** *
* Title: Color Game - script.js
* Purpose: To provide the logic and interaction for the
* Great Colour Guessing Game
* Author: Anthony McGrath - [email protected]
* ******************************************************** */
/********************************************************** *
* Define Global Constants / Page Objects
* ******************************************************** */
const squares = document.querySelectorAll('.square');
const colorDisplay = document.querySelector('#rgb');
const message = document.querySelector('#message');
const header = document.querySelector('header');
const reset = document.querySelector('#reset');
const hard = document.querySelector('#hard');
const easy = document.querySelector('#easy');
/********************************************************** *
* Define global variable for storing references
* ******************************************************** */
let difficulty = 2;
let lastDifficulty = 0;
let pickedColor = "";
/********************************************************** *
* Add Global Event Listeners
* ******************************************************** */
function addEventListeners(){
reset.addEventListener('click', startGame);
hard.addEventListener('click', changeDifficulty);
easy.addEventListener('click', changeDifficulty);
squares.forEach(square => {
square.addEventListener('click', clickSquare);
})
}
/********************************************************** *
* Game Functions
* ******************************************************** */
function changeDifficulty(evt){ // Function to change the difficulty of the game
easy.classList.remove('selected');
hard.classList.remove('selected');
this.classList.add('selected');
if(this.id === 'easy'){
difficulty = 1;
} else {
difficulty = 2;
} // if-else
startGame();
} // changeDifficulty(evt)
function clickSquare(evt){ // Function to process a square being clicked
let squareColor = this.style.backgroundColor;
if (squareColor === pickedColor){
win();
} else {
this.classList.add('hidden');
updateMessage("Try Again");
} // if-else
} // clickSquare(evt)
function win(){ // Function for handling a win event.
for (let i = 0; i < squares.length; i++){ // Change all squares + header to picked color
if (colors[i]){
squares[i].style.backgroundColor = pickedColor;
squares[i].classList.remove('hidden');
}
}
updateMessage("Correct!");
updateHeaderColor(pickedColor);
updateReset(true);
} // win()
function updateMessage(msg){ // Function to update the message text
message.style.opacity = '0'; // with supplied string
setTimeout(function(){
message.textContent = msg;
if (msg !== '') {
message.style.opacity = '1';
}
}, 200); // setTimeout()
} // updateMessage(msg)
function updateReset(bool){ // Function to toggle reset button text
if (bool){
reset.textContent = "Play Again?";
} else {
reset.textContent = "New Colors";
} // if-else
} // updateReset(bool)
function updateHeaderColor(color){ // function to change the header backgroundColor
header.style.backgroundColor = color;
} // updateHeaderColor(color)
function randomNumber(limit){ // Function to generate a random number with
return Math.floor(Math.random() * Math.floor(Number(limit))); // the provided limit
} // randomNumber(limit)
function generateColor(){ // Function to generate a random RGB code
return "rgb(" + randomNumber(256) + ", " + randomNumber(256) + ", " + randomNumber(256) + ")";
} // generateColor()
function generateColorArray(){ // Function to generate an array of colors
colors.length = 0;
for (let i = 0; i < (difficulty * 3); i++){
colors.push(generateColor());
} // for < dificulty * 3
} // generateColorArray()
function selectColor(){ // Function to select a random color from generated colors
pickedColor = colors[randomNumber(colors.length)];
colorDisplay.textContent = pickedColor;
} // selectColor()
function refreshSquares(){ // Function to change the colors of existing squares
for (let i = 0; i < squares.length; i++){ // if same difficulty
if (colors[i]){
squares[i].classList.remove('hidden');
squares[i].style.backgroundColor = colors[i];
} else {
squares[i].classList.add('hidden');
}
} // for < squares.length
} // refreshSquares
function startGame(){ // Function to start the game
colors = [];
updateReset();
updateHeaderColor("rgba(64,9,96,1)");
generateColorArray();
selectColor();
refreshSquares();
updateMessage('');
} // startGame()
addEventListeners();
startGame();