Color Guessing Game with Javascript | RGB color guessing game







Color Guessing Game with Javascript | RGB color guessing game 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create Color Guessing Game. We use HTML, Css, and javascript for this Color Guessing Game. I hope you enjoy our blog so let’s start with a basic HTML structure for Color Guessing Game.

HTML code

 <h1>The RGB Color Guessing Game  
<br>
<span id="colorDisplay">RGB</span>
</h1>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyButton">Easy</button>
<button id="hardButton"class="selected">Hard</button>
</div>
<div id="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>

There is all the HTML code for the Color Guessing Game. Now, you can see output without CSS, then we write css & javascript for the Color Guessing Game.

output

Color Guessing Game with Javascript | RGB color guessing game

CSS Code

 body {  
background-color: #232323;
margin: 0;
font-family: "Montserrat", "Avenir";
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 15%;
transition: background 0.6s;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
}
#container {
margin: 20px auto;
max-width: 600px;
}
h1 {
text-align: center;
line-height: 1.1;
font-weight: normal;
color: white;
background: steelblue;
margin: 0;
text-transform: uppercase;
padding-top: 20px;
padding-bottom: 20px;
}
#colorDisplay {
font-size: 200%;
}
#stripe {
background: white;
height: 30px;
text-align: center;
color: black;
}
.selected {
color: white;
background: steelblue;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: steelblue;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
outline: none;
}
#message {
display: inline-block;
width: 20%;
}
button:hover {
color: white;
background: steelblue;
}

Here is our updated output CSS.

output

Color Guessing Game with Javascript | RGB color guessing game

Javascript code 

 var numSquares = 6;  
var colors = generateRandomColors(numSquares);
var squares = document.querySelectorAll(".square");
var pickedColor = randomColorG();
var colorDisplay = document.querySelector("#colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
var easyBtn = document.querySelector("#easyButton");
var hardBtn = document.querySelector("#hardButton");
easyBtn.addEventListener("click", function(){
//highlight button to show selected
hardBtn.classList.remove("selected");
easyBtn.classList.add("selected");
//set number of squares to 3
numSquares = 3;
//change colors to 3
colors = generateRandomColors(numSquares);
//reset winning color
pickedColor = randomColorG();
//change display to show new picked color
colorDisplay.textContent = pickedColor;
//loop through 3 squares and reset colors while displaying none for squares without new reset colors
for(var i = 0; i < squares.length; i++){
if(colors[i]){
squares[i].style.background = colors[i];
} else {
squares[i].style.display = "none";
}
}
});
hardBtn.addEventListener("click", function(){
easyBtn.classList.remove("selected");
hardBtn.classList.add("selected");
numSquares = 6;
colors = generateRandomColors(numSquares);
pickedColor = randomColorG();
colorDisplay.textContent = pickedColor;
for(var i = 0; i < squares.length; i++){
squares[i].style.backgroundColor = colors[i];
squares[i].style.display = "block";
}
});
resetButton.addEventListener("click", function(){
//generate all new colors
colors = generateRandomColors(numSquares);
//pick a new random color from array
pickedColor = randomColorG();
//change colorDisplay to match picked color
colorDisplay.textContent = pickedColor;
resetButton.textContent = "New Colors";
messageDisplay.textContent = "";
//change colors of squares
for(var i = 0; i < squares.length; i++){
squares[i].style.backgroundColor = colors[i];
}
//set winning color highlight back to default
h1.style.background = "steelblue";
})
colorDisplay.textContent = pickedColor;
for(var i = 0; i < squares.length; i++) {
//add initial colors to squares
squares[i].style.backgroundColor = colors[i];
//add click listeners to squares
squares[i].addEventListener("click", function(){
//grab color of clicked square
var clickedColor = this.style.backgroundColor;
//compare color to pickedColor
console.log(clickedColor, pickedColor);
if(clickedColor === pickedColor){
messageDisplay.textContent = "Correct!";
resetButton.textContent = "Play Again?";
changeColors(clickedColor);
h1.style.background = clickedColor;
} else {
this.style.backgroundColor = "#232323";
messageDisplay.textContent = "Try Again";
}
});
}
function changeColors(colorz){
//loop through all squares
for(var i = 0; i < squares.length; i++){
//change each color to match given color
squares[i].style.background = colorz;
}
}
function randomColorG(){
//pick a random number
var random = Math.floor(Math.random() * colors.length)
return colors[random];
}
function generateRandomColors(genColor){
//make an array
var arr = []
//repeat num times
for(var i = 0; i < genColor; i++){
// get random color and push into array
arr.push(randomColor())
}
//return that array
return arr;
}
function randomColor(){
//pick a "red" from 0 - 255
var r = Math.floor(Math.random() * 256);
//pick a "green" from 0 - 255
var g = Math.floor(Math.random() * 256);
// pick a "blue" from 0 - 255
var b = Math.floor(Math.random() * 256);
return "rgb(" + r +", " + g +", " + b +")";
}

Final output

Color Guessing Game with Javascript | RGB color guessing game

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Color Guessing Game. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
Share on:

Leave a Comment