RGB GAME

Developer
Andy
Size
3,430 Kb
Views
8,096
  1. RGB GAME Previews
  2. RGB GAME HTML Codes
  3. RGB GAME CSS Codes
  4. RGB GAME JS Codes

How do I make an rgb game?

What is a rgb game? How do you make a rgb game? This script and codes were developed by Andy on 26 December 2022, Monday.

RGB GAME Previews
IQ Test

RGB GAME - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RGB GAME</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>Color Game</title>	<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>	<h1>	The Great	<br>	<span id="colorDisplay">RGB</span>	<br>	Color Game</h1>	<div id="stripe">	<button id="reset">New Colors</button>	<span id="message"></span>	<button class="mode">Easy</button>	<button class="mode 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 type="text/javascript" src="colorGame.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

RGB GAME - Script Codes CSS Codes

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;	/*need these because transition isn't built into every browser yet*/	-webkit-transition: background 0.6s;	-moz-transition: background 0.6s;
}
#container {	width: 600px;	/*puts 20px at top and bottom and evenly spaces left and right*/	margin: 20px auto;
}
h1 {	color: white;	text-align: center;	line-height: 1.1;	background: steelblue;	margin: 0;	font-weight: normal;	text-transform: uppercase;	padding: 20px 0;
}
#colorDisplay {	font-size: 200%;
}
#message {	display: inline-block;	width: 20%;
}
#stripe {	background: white;	height: 30px;	text-align: center;	color: black;
}
.selected {	color: white;	background: steelblue;
}
button {	background: none;	font-family: "Montserrat", "Avenir";	border: none;	text-transform: uppercase;	height: 100%;	font-weight: 700;	color: steelblue;	letter-spacing: 1px;	font-size: inherit;	transition: all 0.3s;	/*need these because transition isn't built into every browser yet*/	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	/*removes outline around buttons*/	outline: none;
}
button:hover {	color: white;	background: steelblue;
}

RGB GAME - Script Codes JS Codes

var numSquares = 6;
var colors = [];
var pickedColor;
var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
var modeButtons = document.querySelectorAll(".mode");
init();
function init(){	setUpModeButtons();	setUpSquares();	reset();
}
function setUpModeButtons(){	for(var i = 0; i < modeButtons.length; i++) {	modeButtons[i].addEventListener("click", function(){	modeButtons[0].classList.remove("selected");	modeButtons[1].classList.remove("selected");	this.classList.add("selected");	//ternary operator	this.textContent === "Easy" ? numSquares = 3 : numSquares = 6;	// if(this.textContent === "Easy"){	//	numSquares = 3;	// } else {	//	numSquares = 6;	// }	reset();	//figure out how many squares to show	//pick new colors	//pick a new pickedColor	//update page to reflect changes	});	}
}
function setUpSquares(){	for (var i = 0; i < squares.length; i++) {	//add click listeners to squares	squares[i].addEventListener("click", function(){	//grab color of clicked sqaure	var clickedColor = this.style.background;	// //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.background = "#232323";	messageDisplay.textContent = "Try again";	}	});	}
}
function reset(){	colors = generateRandomColors(numSquares);	//pick a new random color from array	pickedColor = pickColor();	//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++){	if (colors[i]){	squares[i].style.display = "block";	squares[i].style.background = colors[i];	} else {	squares[i].style.display = "none";	}	squares[i].style.background = colors[i];	}	h1.style.background = "steelblue";
}
// we refactored these buttons to make our code more dry and to be able to add a future buttons
// if we want
// easyBtn.addEventListener("click", function(){
//	hardBtn.classList.remove("selected");
//	easyBtn.classList.add("selected");
//	numSquares = 3;
//	colors = generateRandomColors(numSquares);
//	pickedColor = pickColor();
//	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(){
//	hardBtn.classList.add("selected");
//	easyBtn.classList.remove("selected");
//	numSquares = 6;
//	colors = generateRandomColors(numSquares);
//	pickedColor = pickColor();
//	colorDisplay.textContent = pickedColor;
//	for(var i = 0; i < squares.length; i++){
//	squares[i].style.background = colors[i];
//	squares[i].style.display = "block";
//	}
// });
resetButton.addEventListener("click", function(){	//reset function takes the place of all of this code now	// //generate all new colors	// colors = generateRandomColors(numSquares);	// //pick a new random color from array	// pickedColor = pickColor();	// //change colorDisplay to match picked color	// colorDisplay.textContent = pickedColor;	// this.textContent = "New Colors";	// messageDisplay.textContent = "";	// //change colors of squares	// for(var i = 0; i < squares.length; i++){	//	squares[i].style.background = colors[i];	// }	// h1.style.background = "steelblue";	reset();
});
function changeColors(color){	//loop thourgh all squares	for(var i = 0; i < squares.length; i++){	//change each color to match given color	squares[i].style.background = color;	}
}
function pickColor(){	var random = Math.floor(Math.random() * colors.length);	return colors[random];
}
function generateRandomColors(num){	//make an array	var arr = []	//repeat num times	for(var i = 0; i < num; i++){	//get random color and push into arr	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);	"rgb(r, g, b)"	return "rgb(" + r + ", " + g + ", " + b + ")";
}
RGB GAME - Script Codes
RGB GAME - Script Codes
Home Page Home
Developer Andy
Username Andygirl
Uploaded December 26, 2022
Rating 3
Size 3,430 Kb
Views 8,096
Do you need developer help for RGB GAME?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy (Andygirl) Script Codes
Name
SelectorsExercise
Circles
FormSolution
Html_table-quiz
Learning Bootstrap Grid System
A Pen by Andy
Todo list
Blog demo to use given styling
Image gallery using Bootstrap
Show the local weather
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!