RGB-Color-Game/colorgame.js at master · Arunit2001/RGB-Color-Game · GitHub

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
var numSquares = 6
var colors = generateColors(numSquares)
var squares = document.querySelectorAll(".squares")
var message = document.querySelector("#message")
var heading = document.querySelector("#heading")
var h1 = document.querySelector("h1")
var newColor = document.querySelector("#reset")
var easy = document.querySelector("#easy")
var hard = document.querySelector("#hard")
var pickedColor = pick(colors)
heading.textContent=pickedColor
for(var i=0; i<squares.length; i++){
	squares[i].style.backgroundColor = colors[i]
    squares[i].addEventListener("click", function(){
    	if(this.style.backgroundColor===pickedColor){
    		message.textContent="Correct"
    		changeColor(pickedColor)
            h1.style.backgroundColor=pickedColor
            newColor.textContent="Play Again?"
    	}
    		else{
    			this.style.backgroundColor="#232323"
    			message.textContent="Try Again"
    		}
    })
}

function changeColor(color){
	for(i=0; i<squares.length; i++){
		squares[i].style.backgroundColor=color
	}
}

function pick(arr){
	var random = Math.floor(Math.random()*arr.length)
	return(arr[random])
}

function generateColors(num){
	var arr = []
	for(i=0; i<num; i++){
		arr.push(generate())
	}
	return(arr)
}

function generate(){
	var r=Math.floor(Math.random()*255+1)
	var g=Math.floor(Math.random()*255+1)
    var b=Math.floor(Math.random()*255+1)
    return("rgb("+ r +", "+ g +", "+ b +")")
}

newColor.addEventListener("click",function(){
	newColor.textContent="New Colors"
	message.textContent=""
    colors = generateColors(numSquares)
	pickedColor = pick(colors)
    heading.textContent=pickedColor
    for(i=0; i<squares.length; i++){
    	squares[i].style.backgroundColor=colors[i]
    }
    h1.style.backgroundColor="steelblue"
	})

easy.addEventListener("click", function(){
	easy.classList.add("selected")
	hard.classList.remove("selected")
	newColor.textContent="New Colors"
	message.textContent=""
	numSquares=3
	colors = generateColors(numSquares)
    pickedColor = pick(colors)
    heading.textContent=pickedColor
    for(i=0; i<squares.length; i++){
    	if(colors[i]){
    		squares[i].style.backgroundColor=colors[i]
    	}
    	else{
    		squares[i].style.display="none"
    	}
    }
    h1.style.backgroundColor="steelblue"
})

hard.addEventListener("click", function(){
	easy.classList.remove("selected")
	hard.classList.add("selected")
	newColor.textContent="New Colors"
	message.textContent=""
	numSquares=6
	colors = generateColors(numSquares)
    pickedColor = pick(colors)
    heading.textContent=pickedColor
    for(i=0; i<squares.length; i++){
    		squares[i].style.backgroundColor=colors[i]
    		squares[i].style.display="block"
    }
    h1.style.backgroundColor="steelblue"
})