Color Guessing Game With JavaScript

Color Guessing Game With JavaScript

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.

In this blog post, we will discuss Color Guessing Game With JavaScript with complete source code for you so that you can just copy and paste it into your own project. Happy exploring and learning !!

 

HTML Code For Color Guessing Game

<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

 

CSS Code For Color Guessing Game

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

Javascript Code For Color Guessing Game

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

 

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

In this post, we learn how to create a Color Guessing Game With JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You And Keep Learning!!!

Written by – Code With Random/Anki

 

Codepen by – Brandon

Leave a Reply