Skip to content

Commit ed0dbf7

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #182 from siddhi-244/Siddhi/color-guessor
added color guessing game.
2 parents 738adfb + 40ef916 commit ed0dbf7

File tree

5 files changed

+245
-0
lines changed

5 files changed

+245
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,4 @@
5757
| [Battery Percentage Indicator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Battery%20Indicator) |This is a battery indicator app which is used to know battery percentage of the system. |
5858
| [ConnectFour](https://github.com/Shauryaditya/Web-dev-mini-projects/tree/main/ConnectFour) | This is a simple game which can be played between two players.The player who connects the four bubbles first wins the game . The bubbles could be connected horizontally , vertically or diagonally.The players have to be together since multiplayer feature is not available .|
5959
| [Expand Button](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Expand-Button) |It is a basic website with an expanding button on it. As we click on the button it expands and shrinks after 5 seconds. |
60+
| [Color Guessing Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/color-guessor) |It is a basic color guessing game where the player is given a rgb value and he has to guess the color from that.|

‎color-guessor/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
### Color Guessing Game
2+
A RGB color guessing game.It has 2 levels easy and hard. In easy level you have 3 boxes and you have to guess from those 3 boxes but in hard level you have 6 boxes.
3+
4+
### Use of the Project:
5+
It is a great game to play as it is with rgb we can just see the rgb and guess the color . This can be used if get a better understanding of rgb.
6+
7+
### Tech Stack
8+
* HTML5
9+
* CSS3
10+
* JAVASCRIPT
11+
12+
13+
#### Steps to Use:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
23+
- Go to the directory
24+
- Run the index.html file
25+
- Start guessing!
26+
27+
---
28+
29+
### Screenshots
30+
![Screenshot (36)](https://user-images.githubusercontent.com/69195262/125189807-9b45b100-e257-11eb-9f07-82a4b65a2739.png)
31+

‎color-guessor/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<h1>COLOR GUESSING GAME<br>
9+
<span id="rgbspan"></span><br> Guess the color above
10+
</h1>
11+
12+
<div class="line">
13+
<button id="playAgain">New Colors</button>
14+
<span class="status"></span>
15+
<button style="color:#f88989;" id="easyBtn">Easy</button>
16+
<button id="hardBtn">Hard</button>
17+
</div>
18+
19+
<div class="mainbox">
20+
<div class="box"></div>
21+
<div class="box"></div>
22+
<div class="box"></div>
23+
<div class="box"></div>
24+
<div class="box"></div>
25+
<div class="box"></div>
26+
</div>
27+
<script type="text/javascript" src="script.js"></script>
28+
</body>
29+
</html>
30+

‎color-guessor/script.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
var boxes = document.querySelectorAll(".box");
2+
var s = document.querySelector("#rgbspan");
3+
var colors = generateRandomColor(6);
4+
var pickedColor = colors[Math.floor(Math.random() * 6)];
5+
s.textContent = pickedColor;
6+
var playbtn = document.querySelector("#playAgain");
7+
var easybtn = document.querySelector("#easyBtn");
8+
var hardbtn = document.querySelector("#hardBtn");
9+
var boxCount = 6;
10+
var statusText = document.querySelector(".status");
11+
statusText.textContent = "Lets Play!";
12+
13+
easybtn.addEventListener("click", function() {
14+
document.querySelector("h1").style.background = "#f88989";
15+
statusText.textContent = "Lets Play!";
16+
boxCount = 3;
17+
this.style.background = "#f88989";
18+
this.style.color = "white";
19+
hardbtn.style.background = "white";
20+
hardbtn.style.color = "rgb(233,119,119)";
21+
22+
colors = generateRandomColor(boxCount);
23+
pickedColor = colors[Math.floor(Math.random() * 3)];
24+
s.textContent = pickedColor;
25+
26+
for (var i = 0; i < boxes.length; i++) {
27+
if (colors[i]) {
28+
boxes[i].style.background = colors[i];
29+
} else {
30+
boxes[i].style.display = "none";
31+
}
32+
}
33+
34+
});
35+
hardbtn.addEventListener("click", function() {
36+
document.querySelector("h1").style.background = "rgb(233,119,119)";
37+
statusText.textContent = "Lets Play!";
38+
39+
this.style.background = "rgb(233,119,119)";
40+
this.style.color = "white";
41+
easybtn.style.background = "white";
42+
easybtn.style.color = "rgb(233,119,119)";
43+
boxCount = 6;
44+
45+
colors = generateRandomColor(boxCount);
46+
pickedColor = colors[Math.floor(Math.random() * 6)];
47+
48+
for (var i = 0; i < boxes.length; i++) {
49+
boxes[i].style.background = colors[i];
50+
boxes[i].style.display = "block";
51+
52+
}
53+
54+
55+
});
56+
57+
58+
playbtn.addEventListener("click", function() {
59+
document.querySelector("h1").style.background = "rgb(233,119,119)";
60+
statusText.textContent = "Lets Play!";
61+
62+
63+
colors = generateRandomColor(boxCount);
64+
pickedColor = colors[Math.floor(Math.random() * boxCount)];
65+
s.textContent = pickedColor;
66+
67+
for (var i = 0; i < boxes.length; i++) {
68+
69+
boxes[i].style.background = colors[i];
70+
71+
72+
}
73+
});
74+
for (var i = 0; i < colors.length; i++) {
75+
boxes[i].style.background = colors[i];
76+
boxes[i].addEventListener("click", function() {
77+
var selectedcolor = this.style.background;
78+
if (selectedcolor === pickedColor) {
79+
win();
80+
} else {
81+
loose(this);
82+
}
83+
});
84+
}
85+
86+
function win() {
87+
for (var i = 0; i < colors.length; i++) {
88+
boxes[i].style.background = pickedColor;
89+
}
90+
document.querySelector("h1").style.background = pickedColor;
91+
statusText.textContent = "CORRECT!!!";
92+
}
93+
94+
function loose(a) {
95+
a.style.background = "#2f2f2f";
96+
statusText.textContent = "TRY AGAIN !";
97+
}
98+
99+
function generateRandomColor(num) {
100+
var arr = [];
101+
for (var i = 0; i < num; i++) {
102+
arr.push(randomColor());
103+
}
104+
return arr;
105+
}
106+
107+
function randomColor() {
108+
var r = Math.floor(Math.random() * 256);
109+
var g = Math.floor(Math.random() * 256);
110+
var b = Math.floor(Math.random() * 256);
111+
return "rgb(" + r + ", " + g + ", " + b + ")";
112+
}
113+

‎color-guessor/style.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
body{
2+
background-color: aquamarine;
3+
color: #fff;
4+
margin: 0;
5+
6+
}
7+
h1{
8+
text-align: center;
9+
font-size: 300%;
10+
margin: 0;
11+
background-color: rgb(233,119,119);
12+
font-weight: normal;
13+
text-transform: uppercase;
14+
}
15+
16+
.rgbspan{
17+
font-size: 200%;
18+
}
19+
20+
.mainbox{
21+
max-width: 600px;
22+
margin: 0 auto;
23+
}
24+
25+
button{
26+
border:none;
27+
background: none;
28+
text-transform: uppercase;
29+
height: 100%;
30+
font-weight: 700;
31+
color: #fff;
32+
font-size: inherit;
33+
letter-spacing: 1px;
34+
transition: all 0.3s;
35+
}
36+
#playAgain{
37+
border-radius: 20px;
38+
color: #f88989;
39+
}
40+
#hardBtn{
41+
color: #f88989;
42+
43+
}
44+
#easyBtn{
45+
color: #f88989;
46+
}
47+
48+
.status{
49+
display: inline-block;
50+
width: 20%;
51+
color: #f88989;
52+
font-weight: 900;
53+
}
54+
.box{
55+
width: 30%;
56+
background: rgb(255,255,255);
57+
padding-bottom: 30%;
58+
float: left;
59+
margin: 1.66%;
60+
border-radius: 20px;
61+
transition: all 05s;
62+
63+
}
64+
.line{
65+
width: 100%;
66+
height: 40px;
67+
text-align: center;background-color: white;
68+
padding: 0;
69+
}
70+

0 commit comments

Comments
 (0)