JSFiddle - React, Tailwind, and code Playground

by lastuniverse

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Game</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./css/main.css">
		<script type="text/javascript" src="./js/rerandom.js" defer></script>
		<script type="text/javascript" src="./js/eventer.js" defer></script>
		<script type="text/javascript" src="./js/world.js" defer></script>
		<script type="text/javascript" src="./js/main.js" defer></script>
		<script type="text/javascript" src="./js/game.js" defer></script>
	</head>
	<body>
		<div id="game">
			<canvas id="canvas"></canvas>
			<div id="panel"></div>
		</div>
	</body>
</html>

CSS

/*#canvas{
	border: 0px solid black;
	margin: 0;
	padding: 0;
}*/



html {
	overflow:  hidden;
}

body {
	margin: 0;
	padding: 0;
}



#game {
	background-color: red;
	position: absolute;
	left:     50%;
	top:      50%;
}

#canvas {
	background-color: white;
	width: 100%;
	height: 100%;
}

#panel {
	background-color: green;
	position: absolute;
	width: 100%;
	height: 8%;
	bottom: 0;
	opacity: 0.8;
}

JavaScript

class Rerandom {
	constructor(seed=0){
		this.p=[this.p1,this.p2,this.p3,this.p4,this.p5]=[2654435761,2246822519,3266489917,668265263,374761393];
		// this.cut = 4294967295;
		this.seed = seed;
	}

	random(...buf) {
		//let buf = arguments
		let h32;
		let index = 0;
		let len = buf.length;

		if (len >= 4) {
			let limit = len - 4;
			let v1 = this.seed + this.p1 + this.p2;
			let v2 = this.seed + this.p2;
			let v3 = this.seed + 0;
			let v4 = this.seed - this.p1;

			while (index <= limit) {
				v1 = this.CalcSubHash (v1, buf[index]);
				index++;
				v2 = this.CalcSubHash (v2, buf[index]);
				index++;
				v3 = this.CalcSubHash (v3, buf[index]);
				index++;
				v4 = this.CalcSubHash (v4, buf[index]);
				index++;
			}

			h32 = this.RotateLeft (v1, 1) + this.RotateLeft (v2, 7) + this.RotateLeft (v3, 12) + this.RotateLeft (v4, 18);
		} else {
			h32 = this.seed + this.p5;
		}

		h32 += len * 4;

		while (index < len) {
			h32 += buf[index] * this.p3;
			h32 = this.RotateLeft (h32, 17) * this.p4;
			index++;
		}

		h32 ^= h32 >>> 15;
		h32 *= this.p2;
		h32 ^= h32 >>> 13;
		h32 *= this.p3;
		h32 ^= h32 >>> 16;

		return (h32>>>0);

	}

	RotateLeft(value, count) {
		return (value << count) | (value >>> (32 - count));
	}

	CalcSubHash(value, read_value) {
		value += read_value * this.p2;
		value = this.RotateLeft(value, 13);
		value *= this.p1;
		return value;
	}
}


function resizeGame() {
	const newWidth = window.innerWidth;
	const newHeight = window.innerHeight;

	const gameArea = document.getElementById("game");
	gameArea.style.height = newHeight + 'px';
	gameArea.style.width = newWidth + 'px';

	gameArea.style.marginTop = (-newHeight / 2) + 'px';
	gameArea.style.marginLeft = (-newWidth / 2) + 'px';

	const canvas = document.getElementById("canvas");
	canvas.width = newWidth;
	canvas.height = newHeight;
}


resizeGame();	
window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);



class World...