Color-Game-Project/javascript.js at master · dhruvkhanna38/Color-Game-Project · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
var num = 6;
var colors = generateRandomColors(num);
var h1 =document.querySelector("h1");
var result = document.querySelector("#result");
var colorDisplay = document.querySelector("#colorDisplay");
var divs = document.querySelectorAll(".square");
var pickedColor= pickColor(colors);
var newColors = document.querySelector("#newColors");
var easy = document.querySelector("#easy");
var hard  = document.querySelector("#hard");
easy.addEventListener("click" , function(){
                           num = 3;
                           easy.classList.add("selected");
                           hard.classList.remove("selected");
                           colors = generateRandomColors(num);
                           pickedColor = pickColor(colors);
                           colorDisplay.textContent = pickedColor ;
                           colorDisplay.style.textTransform = "uppercase";
                           result.textContent = "";

                           for(var i =0;i<num;i++)
                           { divs[i].style.backgroundColor = colors[i] ;
                           }
                           for(var i = num;i<6;i++)
                           {
                            divs[i].style.display = "none" ;
                           }


});
hard.addEventListener("click" , function(){
                                num =6;
                                hard.classList.add("selected");
                                easy.classList.remove("selected");
                                colors = generateRandomColors(num);
                                pickedColor = pickColor(colors);
                                colorDisplay.textContent = pickedColor ;
                                colorDisplay.style.textTransform = "uppercase";
                                result.textContent = "";

                              for(var i =0;i<6;i++)
                            { divs[i].style.backgroundColor = colors[i] ;
                              divs[i].style.display = "block" ;
                            }


});
newColors.addEventListener("click" , function(){
                       num = 6;
                       //change colors array
                       colors = generateRandomColors(num);
                       //change pick color
                       pickedColor = pickColor(colors);
                       //change heading
                       colorDisplay.textContent = pickedColor ;
                       colorDisplay.style.textTransform = "uppercase";
                       //reset heading color
                       h1.style.backgroundColor = "#4682B4";
                       //change color of squares
                       for(var i =0;i<divs.length;i++)
                        divs[i].style.backgroundColor = colors[i] ;
                       if(newColors.textContent === "Play Again")
                        newColors.textContent = "New Colors";
                      //remove span
                      result.textContent = "";
                      //select hard by default
                      hard.classList.add("selected");
                      easy.classList.remove("selected");
})
for(var i=0;i<divs.length;i++)
{
	divs[i].style.backgroundColor = colors[i] ;
	//clicking event
	divs[i].addEventListener("click" , function(){
                                            if(this.style.backgroundColor !== pickedColor)
                                            	{this.style.backgroundColor = "#232323";
                                                       result.textContent = "Try Again";}
                                             else
                                             {
                                             	result.textContent = "Correct";
                                             	for(var j =0;j<colors.length;j++)
                                             	{
                                             		divs[j].style.backgroundColor = pickedColor ;
                                             	}
                                             	h1.style.backgroundColor = pickedColor;
                                              newColors.textContent = "Play Again";
                                             }

	});
}


colorDisplay.textContent = pickedColor ;
colorDisplay.style.textTransform = "uppercase";

function pickColor(colors)
{  var index = Math.floor(Math.random() * colors.length);
	return colors[index];

}
function generateRandomColors(num){
    var a =[];

    for(var i=0;i<num;i++)
    {  var k1 = Math.floor(Math.random() * 256);
       var k2 = Math.floor(Math.random() * 256);
       var k3 = Math.floor(Math.random() * 256);
       var color = "rgb(" + k1 +", " + k2 + ", " + k3 + ")";
       a.push(color);
    }

    return a;

}