Skip to content

Commit 017cd49

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#27 from snehal2841/main
Added Color Game
2 parents 6861e40 + 9b6a4ff commit 017cd49

3 files changed

Lines changed: 217 additions & 0 deletions

File tree

‎Color_Game/color.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
alert("GAME INSTRUCTIONS: RGB() is a color model in which 'r' denotes red, 'g' denotes green and 'b' denotes blue color. The values represented in brackete ranging from 0 to 255 represents the intensity of color where (255, 0, 0) gives red color and (0, 255,0) gives green color and (0, 0, 255) gives blue color with dark intensities. SO IDENTIFY THE FOLLOWING COLORS AND ENJOY THE GAME!")
2+
3+
var numsquares=6;
4+
var colors=[];
5+
var pickedcolor;
6+
var squares=document.querySelectorAll(".square");
7+
var colordis=document.querySelector("#colordis");
8+
var messagedis=document.querySelector("#message");
9+
var h1=document.querySelector("h1");
10+
var resetBut=document.querySelector("#reset");
11+
var modeBut=document.querySelectorAll(".mode");
12+
13+
init();
14+
15+
function init(){
16+
for(var i=0;i<modeBut.length;i++)
17+
{
18+
modeBut[i].addEventListener("click",function(){
19+
modeBut[0].classList.remove("selected");
20+
modeBut[1].classList.remove("selected");
21+
this.classList.add("selected");
22+
this.textContent==="Easy"? numsquares=3: numsquares=6;
23+
reset();
24+
});
25+
}
26+
27+
for(var i=0;i<squares.length;i++){
28+
squares[i].style.backgroundColor=colors[i];
29+
squares[i].addEventListener("click",function(){
30+
//grab color of picked square
31+
var clickedcolor=this.style.backgroundColor;
32+
//and compare color to pickedcolor
33+
if (clickedcolor===pickedcolor) {
34+
messagedis.textContent="CORRECT!";
35+
resetBut.textContent="Play Again?";
36+
changeColor(clickedcolor);
37+
h1.style.backgroundColor=clickedcolor;
38+
}
39+
else{
40+
this.style.backgroundColor="#232323";
41+
messagedis.textContent="Try Again";
42+
}
43+
44+
});
45+
}
46+
47+
reset();
48+
}
49+
50+
51+
resetBut.addEventListener("click",function(){
52+
colors=generateRandomColors(numsquares);
53+
pickedcolor=pickcolor();
54+
colordis.textContent=pickedcolor;
55+
this.textContent="New Colors";
56+
messagedis.textContent="";
57+
for(var i=0;i<squares.length;i++){
58+
squares[i].style.backgroundColor=colors[i];
59+
}
60+
h1.style.backgroundColor="steelblue";
61+
});
62+
63+
64+
65+
function reset(){
66+
colors=generateRandomColors(numsquares);
67+
pickedcolor=pickcolor();
68+
colordis.textContent=pickedcolor;
69+
this.textContent="New Colors";
70+
messagedis.textContent="";
71+
for(var i=0;i<squares.length;i++){
72+
if (colors[i]) {
73+
squares[i].style.display="block";
74+
squares[i].style.backgroundColor=colors[i];
75+
}
76+
else{
77+
squares[i].style.display="none";
78+
}
79+
}
80+
h1.style.backgroundColor="steelblue";
81+
}
82+
83+
function changeColor(color){
84+
for(var i=0;i<squares.length;i++){
85+
squares[i].style.backgroundColor=color;
86+
}
87+
}
88+
89+
function pickcolor(){
90+
var random=Math.floor(Math.random()*colors.length);
91+
return colors[random];
92+
}
93+
94+
function generateRandomColors(num){
95+
var arr=[];
96+
for(var i=0;i<num;i++)
97+
{
98+
arr.push(randomColors());
99+
}
100+
return arr;
101+
}
102+
103+
function randomColors(){
104+
var r=Math.floor(Math.random() * 256);
105+
var g=Math.floor(Math.random() * 256);
106+
var b=Math.floor(Math.random() * 256);
107+
return "rgb(" + r + ", " + g + ", " + b + ")";
108+
}
109+
110+

‎Color_Game/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Color Game</title>
5+
<link rel="stylesheet" type="text/css" href="colorgame.css">
6+
</head>
7+
<body>
8+
9+
<h1>The Great
10+
<br>
11+
<span id="colordis">RGB</span>
12+
<br>
13+
Color Game</h1>
14+
15+
<div id="stripe">
16+
<button id="reset">New Colors</button>
17+
<span id="message"></span>
18+
<button id="easybtn" class="mode">Easy</button>
19+
<button id="hardbtn" class="mode selected">Hard</button>
20+
</div>
21+
22+
<div id="container">
23+
<div class="square"></div>
24+
<div class="square"></div>
25+
<div class="square"></div>
26+
<div class="square"></div>
27+
<div class="square"></div>
28+
<div class="square"></div>
29+
</div>
30+
31+
<script type="text/javascript" src="colorgame.js"></script>
32+
33+
34+
</body>
35+
</html>

‎Color_Game/style.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
body{
2+
background-color: #232323;
3+
margin: 0;
4+
font-family: "Montserrat","Avenir";
5+
}
6+
.square{
7+
width: 30%;
8+
background: purple;
9+
padding-bottom: 30%;
10+
float: left;
11+
margin: 1.66%;
12+
border-radius: 50%;
13+
transition: background 0.6s;
14+
-webkit-transition: background 0.6s;
15+
-moz-transition: background 0.6s;
16+
}
17+
#container{
18+
margin: 20px auto;
19+
max-width: 600px;
20+
}
21+
22+
h1{
23+
color: white;
24+
text-align: center;
25+
background-color: steelblue;
26+
margin: 0;
27+
line-height: 1.1;
28+
padding: 20px 0;
29+
font-weight: normal;
30+
text-transform: uppercase;
31+
}
32+
33+
.selected{
34+
color: white;
35+
background: steelblue;
36+
}
37+
38+
#stripe{
39+
background-color: white;
40+
color: black;
41+
height: 30px;
42+
text-align: center;
43+
}
44+
45+
#colordis{
46+
font-size: 70px;
47+
}
48+
49+
button{
50+
outline: none;
51+
border: none;
52+
background: none;
53+
text-transform: uppercase;
54+
height: 100%;
55+
font-weight: 700;
56+
color: steelblue;
57+
letter-spacing: 1px;
58+
font-size: inherit;
59+
transition: all 0.5s;
60+
-webkit-transition: all 0.6s;
61+
-moz-transition: all 0.6s;
62+
}
63+
64+
button:hover{
65+
color: white;
66+
background: steelblue;
67+
}
68+
69+
#message{
70+
display: inline-block;
71+
width: 20%;
72+
}

0 commit comments

Comments
 (0)