Hello friends, today we are going to make a color guessing game and that is RGB color. This game works in this way, you will be given a rbg color code and you have to guess which color it is actually. So for coders, this is both a game and an exercise.
Step 01 :- Create a HTML file.
HTML Code :-
<html lang="en">
<head>
<title>Color game</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>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>
<script src="script.js"></script>
</body>
</html>
Step 02 :- Create a CSS file and put code.
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: rgb(0, 0, 0);
background: rgb(189, 192, 30);
margin: 0;
text-transform: uppercase;
padding-top: 20px;
padding-bottom: 20px;
}
#colorDisplay {
font-size: 200%;
}
#stripe {
background: rgb(235, 235, 235);
height: 30px;
text-align: center;
color: black;
}
.selected {
color: white;
background: rgb(133, 72, 141);
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: rgb(0, 0, 0);
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: rgb(180, 70, 70);
}
Step 03 :- Create script.js file and function the html code.
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() {
hardBtn.classList.remove("selected");
easyBtn.classList.add("selected");
numSquares = 3;
colors = generateRandomColors(numSquares);
pickedColor = randomColorG();
colorDisplay.textContent = pickedColor;
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() {
colors = generateRandomColors(numSquares);
pickedColor = randomColorG();
colorDisplay.textContent = pickedColor;
resetButton.textContent = "New Colors";
messageDisplay.textContent = "";
for (var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = colors[i];
}
h1.style.background = "steelblue";
})
colorDisplay.textContent = pickedColor;
for (var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = colors[i];
squares[i].addEventListener("click", function() {
var clickedColor = this.style.backgroundColor;
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) {
for (var i = 0; i < squares.length; i++) {
squares[i].style.background = colorz;
}
}
function randomColorG() {
var random = Math.floor(Math.random() * colors.length)
return colors[random];
}
function generateRandomColors(genColor) {
var arr = []
for (var i = 0; i < genColor; i++) {
arr.push(randomColor())
}
return arr;
}
function randomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
OutPut :- And here is the final result of the code.
