Create Color Guessing Game Using JavaScript (Source Code)

Welcome to Code With Random blog. In this blog, We learn how we create Color Guessing Game Using HTML, CSS, and JavaScript.

You have to predict the colors that will emerge from the combination of primary colors in this game of color prediction. This game seeks to increase a person's ability to predict colors by randomly generating a color each time and piques their curiosity about the potential color that could result from a random combination of primary colors.

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>

The RGB Color Guessing Game will be the heading, which will be made using the h1 tag. The break will be added using the
tag, and the color display will be added using the span tag.

The button for choosing between the easy and hard choice will now be created using the button tag, and the square for our color-guessing game will be created using a variety of divs with the class square created using the div tag with id "container" tag.

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.

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;
}

Step1: We will first set the background to "black" using the body element selector, and we will set the margin to "30 px" using the margin property. We will also change the font family to "Montserrat" using the font-family property.

body {
    background-color: #232323;
    margin: 0;
    font-family: "Montserrat", "Avenir";
}

Step2: Now, using the class selector property (.square), we will set the breadth to 30%, the background color property to "purple" to set the background color of our square tiles, and the padding bottom property to 30% to set the bottom padding. The border radius will now be adjusted to 15% using the border radius property.

.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;
}

Step3: Using the #Id number, the container will now be chosen. Following that, the maximum width property will be used to set the maximum width to 600 px, and the border property will be set to 20 px auto.

Now using the h1 tag selector, using the text-align property, we will set the text alignment as "center"; using the line height property, we will set the line height as "1.1"; using the color property, we will set the font color as "White"; and using the background color property, we will set the background as "Steel Blue". The styling will also be applied to the buttons and other game components.

#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;
}

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 +")";  
}

We will first use the document to pick all of the HTML elements inside of our javascript. technique of queryselector We will use the id to select the html elements, and then we will make some variables using the var keyword. Finally, we will add a click event to our guessing game using the easyBtn.addEventlistener, and we will use the click event to add and remove the classlist. The user will then point to each as they correctly predict the answer after we first create the random color using the math.random function using the colordisplay property.

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

Blog

Create Color Guessing Game Using JavaScript (Source Code)

Codewithrandom Blogs

HTML Code For Color Guessing Game

CSS Code For Color Guessing Game

Javascript Code For Color Guessing Game

Join Our Newsletter. No Spam, Only the good stuff.

Related