Weird glowy CSS3 game

Developer
Rich Williams
Size
3,684 Kb
Views
14,168
  1. Weird glowy CSS3 game Previews
  2. Weird glowy CSS3 game HTML Codes
  3. Weird glowy CSS3 game CSS Codes
  4. Weird glowy CSS3 game JS Codes

How do I make an weird glowy css3 game?

Tried using some CSS3 box shadows and transitions and it sort of developed into a strange little game.. What is a weird glowy css3 game? How do you make a weird glowy css3 game? This script and codes were developed by Rich Williams on 07 December 2022, Wednesday.

Weird glowy CSS3 game Previews
IQ Test

Weird glowy CSS3 game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weird glowy CSS3 game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="info-bar"> <div class="info-bar-inner"><label>Columns</label><input type="text" id="dim-x" placeholder="1" /> <label>Rows</label><input type="text" id="dim-y" placeholder="1" />	<button id="box-create">Go</button> </div> <span class="info-message">Hover over the boxes until they're all white&hellip;</span>
</div>
<div class="game">
<div class="container">
</div>
<div class="progress">	<div class="white-bar"></div>	<div class="green-bar"></div>
</div>
<div class="win-msg">fin</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Weird glowy CSS3 game - Script Codes CSS Codes

* {
margin: 0;
padding: 0;
}
body {
background: #000;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
line-height: 20px;
color: #fff;
}
.game {	margin-top: 10px; padding-top: 10px; border-top: 2px solid #ffffff;	overflow: hidden;
}
.container {
padding: 20px 50px;
position: relative;
overflow: hidden;
float: left;
clear: both;
}
.info-bar {
padding: 10px;
width: 100%;
background: #030303;
border-bottom: 1px solid #080808;
color: #ffffff; position: relative;
}
.info-bar label, .info-bar input { height: 30px; font-size: 16px; line-height: 30px; float: left; margin-bottom: 10px; box-sizing: border-box;
}
.info-bar label { width: 100px; clear: left; text-align: right; padding-right: 10px;
}
.info-bar input { float: left; color: #000000; padding-left: 10px; width: 50px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; background: #ffffff
}
.info-bar button, .info-bar span {	clear: both; display: block;
}
.info-bar button { border: 2px solid #ffffff; height: 30px; width: 50px; margin-left: 100px; background-color: #000000; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; color: #ffffff; cursor: pointer;
}
.info-bar button:hover { color: #000000; background-color: #ffffff;
}
.info-message { width: 400px; left: 200px; top: 10px; position: absolute; font-size: 28px; line-height: 36px;
}
.rainbow {
background-color: #33f033;
box-shadow: 0 0 5px #33f033, -2px -2px 5px #f0f000, -5px -5px 5px #f07f00, -9px -9px 5px #f00000, 2px 2px 5px #0000f0, 5px 5px 5px #6600f0, 9px 9px 5px #8B00f0;
width: 30px;
height: 30px;
border-radius: 5px;
transition: box-shadow 200ms, background 200ms;
-webkit-transition: box-shadow 200ms, background 200ms;
-moz-transition: box-shadow 200ms, background 200ms;
-o-transition: box-shadow 200ms, background 200ms;
-ms-transition: box-shadow 200ms, background 200ms;
float: left;
margin: 0 20px 20px 0;
}
.sel {
background: #fff;
}
.rainbow:hover {
background: #fff;
box-shadow: 0 0 30px #fff;
cursor: pointer;
}
.progress {
width: 60px;
height: 200px;
border: 1px solid #eee;
background: #eee;
border-radius: 5px;
position: relative;
margin: 10px 50px;
float: left;
}
.green-bar, .white-bar {
position: absolute;
width: 60px;
left: 0;
border-radius: 5px;
transition: height 200ms ease-in;
-moz-transition: height 200ms ease-in;
-webkit-transition: height 200ms ease-in;
-o-transition: height 200ms ease-in;
-ms-transition: height 200ms ease-in;
}
.white-bar {
top: 0;
height: 0;
background: #fff;
}
.green-bar {
bottom: 0;
height: 200px;
background: #3f3;
}
.win-glow {
box-shadow: 0 0 15px #fff;
}
.win-msg {
font-size: 10em; height: 100px; line-height: 130px;
text-shadow: 0 0 5px #fff;
float: left;
visibility: hidden;
}

Weird glowy CSS3 game - Script Codes JS Codes

(function () {	// container name	var ctnr = document.getElementsByClassName('container')[0];	// inputs & buttons	var inpX = document.getElementById('dim-x'), inpY = document.getElementById('dim-y'), btn = document.getElementById('box-create');	// number boxes (re-used)	var numBoxes = 24; // auto set up game as 8 x 3	// bar DOM objects	var progressBar = document.getElementsByClassName('progress')[0], whiteBar = progressBar.getElementsByClassName('white-bar')[0], greenBar = progressBar.getElementsByClassName('green-bar')[0];	// win message block	var winBlock = document.getElementsByClassName('win-msg')[0];	// automatically set up game 8 x 3	setupBlocks(8, 3);	btn.addEventListener('click', function () {	// clear container	ctnr.innerHTML = '';	//setup blocks	var dimx = parseInt(inpX.value) || 1, dimy = parseInt(inpY.value) || 1;	setupBlocks(dimx, dimy);	}, false);	// add event listener to container and check element clicked (delegation)	ctnr.addEventListener('mouseover', function (e) {	var tar = e.target, regRB = new RegExp('(^| )rainbow( |$)'), regSel = new RegExp('(^| )sel( |$)'), regWG = new RegExp('(^| )win-glow( |$)');	if( regRB.test(tar.className) ) {	if( regSel.test(tar.className) ) {	var tempClass = ' ' + tar.className + ' ';	tempClass = tempClass.replace(' sel ', ' ').replace(/^\s+/, '').replace(/\s+$/, '');	tar.className = tempClass;	} else {	tar.className += ' sel';	}	}	//	Check number of greens vs whites	//	loop through all children of container with rainbow class,	//	add up number of blocks that are green and how many are white	//	adjust height of graph bars	//	green bar height = num greens / total * height of bar container (200px?)	var greens = 0, whites = 0, kids = ctnr.childNodes, progressHeight = 200;	for( var i = 0, len = kids.length; i < len; i ++ ) {	if( regRB.test(kids[i].className) ) {	if( regSel.test(kids[i].className) ) {	whites ++;	} else {	greens ++;	}	}	}	//	bar height adjust	whiteBar.style.height = ( whites / numBoxes * 200 ) + 'px';	greenBar.style.height = ( greens / numBoxes * 200 ) + 'px';	if ( whites === numBoxes ) {	if( !regWG.test(progressBar.className) ) {	progressBar.className += ' win-glow';	}	winBlock.style.visibility = 'visible';	} else {	if( regWG.test(progressBar.className) ) {	var winClass = ' ' + progressBar.className + ' ';	winClass = winClass.replace(' win-glow ', ' ').replace(/^\s+/, '').replace(/\s+$/, '');	progressBar.className = winClass;	winBlock.style.visibility = 'hidden';	}	}	}, false);	function setupBlocks (dimx, dimy) {	// set dimensions here	var dimX = dimx, dimY = dimy;	numBoxes = dimX * dimY;	// loop to create boxes and append them to container	for( var i = 0; i < numBoxes; i ++ ) {	var div = document.createElement('div');	div.className = 'rainbow';	ctnr.appendChild(div);	}	// set container width	ctnr.style.width = (dimX * 50) + 'px';	}
})();
Weird glowy CSS3 game - Script Codes
Weird glowy CSS3 game - Script Codes
Home Page Home
Developer Rich Williams
Username toneworm
Uploaded December 07, 2022
Rating 3
Size 3,684 Kb
Views 14,168
Do you need developer help for Weird glowy CSS3 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!

Rich Williams (toneworm) Script Codes
Name
Dichotomiser
Reverb keyboard
Little box shadow man and sun
Horrible looking fadey transition tabs
Weird spirally CSS thing
Basic bar graph of frequency of letters in a piece of text
D3 animation test
Bouncing balls
Chooser
Slidey boxes
Create amazing blog posts 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!