Color-game/ColorGame.js at master · durgeshpushpakar/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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
let colors=generateRandomColors(6);
let body=document.querySelector("body");
let goalColor=pickColor(6);
let squares=document.querySelectorAll(".square");
let display=document.querySelector("#display");
let colorDisplay=document.querySelector("#colorDisplay");
let h1=document.querySelector("h1");
let btnReset=document.querySelector("#reset");
let btnEasy=document.querySelector("#easy");
let btnHard=document.querySelector("#hard");
colorDisplay.textContent=goalColor;
let numSquares=6;


btnEasy.addEventListener("click",function(){
  this.classList.add("selected");
  btnHard.classList.remove("selected");
  numSquares=3;
  colors=generateRandomColors(numSquares);
  goalColor=pickColor(numSquares);
  colorDisplay.textContent=goalColor;
  h1.style.backgroundColor="steelblue";
  for(var i=0;i<3;i++){
    squares[i].style.backgroundColor=colors[i];
  }
  for(var i=3;i<6;i++){
    squares[i].style.display="none";
  }
});

btnHard.addEventListener("click",function(){
  this.classList.add("selected");
  btnEasy.classList.remove("selected");
  numSquares=6;
  colors=generateRandomColors(numSquares);
  display.textContent="";
  goalColor=pickColor(numSquares);
  colorDisplay.textContent=goalColor;
  h1.style.backgroundColor="steelblue";
  for(let i=0;i<numSquares;i++){
    //add background color to squares
    squares[i].style.backgroundColor=colors[i];
    squares[i].style.display="block";
  }
});
btnReset.addEventListener("click",function(){
  colors=generateRandomColors(numSquares);
  display.textContent="";
  goalColor=pickColor(numSquares);
  colorDisplay.textContent=goalColor;
  for(var i=0;i<numSquares;i++){
    squares[i].style.backgroundColor=colors[i];
  }
  h1.style.backgroundColor="steelblue";
});
btnReset.addEventListener("click",function(){
  colors=generateRandomColors(numSquares);
  display.textContent="";
  goalColor=pickColor(numSquares);
  colorDisplay.textContent=goalColor;
  for(var i=0;i<numSquares;i++){
    squares[i].style.backgroundColor=colors[i];
  }
  h1.style.backgroundColor="steelblue";
});
for(let i=0;i<6;i++){
  //add background color to squares
  squares[i].style.backgroundColor=colors[i];

  //add click listeners to squares
  squares[i].addEventListener("click",function(){
    let clickedColor =this.style.backgroundColor;
    if(clickedColor===goalColor){
      display.textContent="Correct!!";
      changeColor(goalColor);
      h1.style.backgroundColor=goalColor;
      btnReset.textContent="Play Again?";
      btnReset.addEventListener("click",function(){
        this.textContent="New Colors";
      });
    }
    else{
      this.style.backgroundColor="#232323";
      display.textContent="wrong!!";
    }
  });
}

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

//now to pick a random color(right answer color) from the colors array
//we will use Math.random() to generate a random number between 0 and 6
function pickColor(arrSize){
  let index=Math.floor(Math.random()*arrSize);
  return colors[index];
}

function generateRandomColors(size){
  let colorsArray=[];
  for(let i=0;i<size;i++){
    let a=Math.floor(Math.random()*256);
    let b=Math.floor(Math.random()*256);
    let c=Math.floor(Math.random()*256);
    let str="rgb(" + a + ", " + b + ", " + c + ")";
    colorsArray[i]=str;
  }
  return colorsArray;
}