Color Guessing Game with Javascript | RGB color guessing game

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 🙏💕!

Post a Comment

Previous Post Next Post