RGB Guessing Game

In this example below you will see how to do a RGB Guessing Game with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sinharaksh1t, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sinharaksh1t ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>RGB Guessing Game</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
	<title>RGB Guessing Game</title>
	<link rel="stylesheet" href="app.css">
</head>
<body>
	<h1>
		The Best
		<br>
		<span></span>
		<br>
		Guessing Game
	</h1>

	<div id="navpanel">
		<button id="reset" class="btn">New Colors</button>
		<span id="msg">Good Luck!</span>
		<button class="mode">Easy</button>
		<button class="mode selected">Hard</button>
	</div>

	<div id="colorbox">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>

	<script type="text/javascript" src="script.js"></script>
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sinharaksh1t/rgb-guessing-game-xpPobK */
body {
	/*background-color: rgba(0,0,0,0.85);*/
	background: #232323;
	font-family: Roboto;
	margin: 0;
	text-align: center;
	background-size: cover;
	background-attachment: fixed;
}

/*body, html {
	overflow: hidden;
}*/

h1 {
	color: rgba(256,256,256,0.9);
	background: rgba(0,0,256,0.6);
	font-size: 2em;
	padding: 5px;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
	transition: all 0.5s; 
}

#navpanel {
	background: rgba(256,256,256,0.9);
	border: none;
	margin: 0;
}

button {
	border: none;
	background: none;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: steelblue;
	font-weight: 700;
	margin: 0;
	outline: none;
	height: 100%;
	font-size: 1.2em;
	transition: all 0.3s;
}

button:hover {
	color: white;
	background: steelblue;
}

.selected {
	color: white;
	background: steelblue;	
}

#msg {
	display: inline-block;
	width: 20%;
}

#colorbox {
	max-width: 600px;
	margin: 10px auto;
}

.box {
	width: 30%;
	padding-bottom: 30%;
	background: orange;
	margin: 1.66%;
	float: left;
	border-radius: 20%;
	transition: all 0.3s;
}

/*	==================
	JavaScript stuff
	==================
*/

.makeTransparent {
	opacity: 0;
}

/*Downloaded from https://www.codeseek.co/sinharaksh1t/rgb-guessing-game-xpPobK */
var colors = [
"rgb(250, 4, 20)",
"rgb(25, 20, 250)",
"rgb(20, 250, 0)",
"rgb(250, 250, 20)",
"rgb(250, 20, 250)",
"rgb(20, 250, 250)"
];
var modeSize = colors.length;
var correctAns = colors[Math.floor(Math.random()*modeSize)]; //return the String "rgb(blaH)"
document.querySelector("h1 span").innerHTML = correctAns;
var msg = document.querySelector("#msg");
var resetBtn = document.querySelector("#reset");
var box = document.querySelectorAll(".box");
var modeBtn = document.querySelectorAll(".mode");

generateColorBoxes();
function generateColorBoxes() {
	for(var i = 0;i<box.length;i++) {
		if(i===colors.indexOf(correctAns)) {
			box[i].style.backgroundColor = correctAns;
			continue;
		}
		var r = Math.floor(Math.random()*256);
		var g = Math.floor(Math.random()*256);
		var b = Math.floor(Math.random()*256);
		box[i].style.backgroundColor = "rgb("+r+", "+g+", "+b+")";
	}
}

for(var i = 0; i<box.length;i++) {
	box[i].addEventListener("click",function() {
		if(this.style.backgroundColor !== correctAns) {
			//display hard luck
			msg.innerHTML = "Oops, try again!";
			//vanish in thin air
			this.classList.add("makeTransparent");
		}
		else {
			//change span message
			msg.innerHTML = "Correct!";
			//change h1 background color to correctAns
			document.querySelector("h1").style.backgroundColor = correctAns;
			//change text from "NEW COLORS" to "PLAY AGAIN?"
			resetBtn.textContent = "play again?";
			//change all box colors to correctAns & reset opacity
			for(var j=0;j<box.length;j++) {
				box[j].classList.remove("makeTransparent");
				box[j].style.backgroundColor = correctAns;
			}
		}
	});
}

function reloadPage() {
	document.location.reload();
}

resetBtn.addEventListener("click", function() {
	reloadPage();
});

for(var i = 0;i<modeBtn.length;i++) {
	modeBtn[i].addEventListener("click",function() {
		//reset page
		modeSize = 3;
		//remove selected from all
		for(var j = 0;j<modeBtn.length;j++) {
			modeBtn[j].classList.remove("selected");
		}
		//add selected to the currently selected option
		this.classList.add("selected");
		//bring down mode to easy

	});
}

Comments