Create Color Prediction Game Using Javascript (Source Code)

Create Color Prediction Game Using JavaScript

Hello Coder! Welcome to the Codewithrandom blog. In this blog, We learn how we create Color Prediction/Guessing games using HTML, CSS, and JavaScript.

A color-predicted game using JavaScript is a unique game in which the player has to predict the color out of the six given options. In this game, as the user starts the game, a color code or hexadecimal code of color is generated, and based on the generated number, the user has to select one of the options from the list of colors given.

I hope you enjoy our blog so let’s start with a basic HTML structure for Color Guessing Game.

50+ HTML, CSS & JavaScript Projects With Source Code

Color Prediction Game Preview:-

 

Before we dive into the process of  project let’s understand what is a color prediction game and what is the benefit of playing this game.

What is a Color Prediction Game?

A color prediction game is a basic 3D analytical game in which we will generate a random RGB code of any color using a javascript function, and then we will provide six color tiles to the user as options in which one of the tiles has the correct color code. If the user fails at the first attempt, the player gets another chance until the correct color is selected.

What is the use of a color prediction Game?

The color prediction game helps both the developer and the player. Playing this quiz-type game enhances critical thinking and also helps in gaining more knowledge about colors. It is also beneficial for the developer to work on advanced JavaScript concepts for creating this type of game.

Color Prediction Game Source Code:-

We write HTML, CSS, and JavaScript code for the Color Prediction Game. So you create three Filein your VS Code folder. And let’s start writing code.

HTML Code For Color Prediction 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 <br> tag, and the color display will be added using the span tag.

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

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.

Output

Restaurant Website Using HTML and CSS

ADVERTISEMENT

 

CSS Code For Color Prediction 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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

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.

Responsive Login Page in HTML with CSS Code

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

Html + Css Code Output:

 

Responsive Resume/CV Website Using HTML & CSS

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

We will first use the document to pick up all of the HTML elements inside 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.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Final Output Of Color Prediction Game Using JavaScript:-

Video Output Of Color Prediction Game-: