JSFiddle - React, Tailwind, and code Playground

by Vitaliy Bunchuk

HTML

<p>Level: <span id="level">1</span></p>
<p>Score: <span id="score">0</span></p>
<div id="main"></div>

CSS

#main table {
	border: 1px solid grey;
	border-collapse: collapse;
	border-spacing: 1px;
}
#main table tr {
	height: 20px;
}
#main table tr td {
	width: 20px;
	padding: 0;
}
#main table tr td.fill {
	box-shadow: 1px 1px 4px 0px gray inset;
}

JavaScript

(function($, irnd) {
				var tblock = [[[0,0],[0,-1],[-1,0],[-1,-1]], [[0,0],[0,1],[0,-1],[0,-2]], [[0,0],[0,-1],[1,0],[1,1]],
					[[0,0],[0,1],[1,0],[1,-1]], [[0,0],[1,0],[0,1],[-1,0]], [[0,0],[0,-1],[0,1],[1,1]], [[0,0],[0,-1],[0,1],[-1,1]] ];
				var colors = ["yellow", "cyan", "lime", "red", "darkmagenta", "orange", "blue"];
				var x=4, y=-3, dx = 0, counter = 0, rotation=0, rot = 0, t=-1, down = 0, level=1, score=0, total=0;
				$("main").innerHTML=["<table id=\"field\">","</table>"].join(new Array(21).join(["<tr>", "</tr>"].join(new Array(11).join("<td>&nbsp;</td>"))));
				var fieldNode = $("field"), field = new Array(21).join(" ").split("").map(function(){return [0,0,0,0,0,0,0,0,0,0]});    
				document.body.onkeydown = function(e){var c = e.keyCode - 36;c>-1 && c < 5 && (rot = (c===2), dx=((c&1)*(c&2?1:-1)), down = c&4);};
				function isInRange(x,y,s){return x>=0 && x<10 && (!s || y>=0) && y<20;}
				function setCellColor(x, y,color,cell){if(isInRange(x,y,1)){cell = fieldNode.rows[y].cells[x]; cell.style.backgroundColor = color; cell.className=(color?"fill":"");}};
				function drawField() {field.forEach(function(row, y){row.forEach(function(c, x){setCellColor(x, y, c ===0?"":colors[c-1])})})};
				function calcBlock(x,y,t,r){r=t?(r%(t>3?4:2)):0;return tblock[t].map(function(p){return [x+p[r&1?1:0]*(r===1 || r === 2?-1:1),y+p[r&1?0:1]*(r===2|| r === 3?-1:1)]})};
				function testBlock(x,y,t,r,f,s){return calcBlock(x,y,t,r).every(function(p){var x=p[0],y=p[1]; return isInRange(x,y,s) && (!f || y < 0 || f[y][x] === 0)})};
				function checkField(n){field = field.filter(function(row){return !row.every(function(e){return e!==0;});});
					n=0; while(field.length<20)field.splice(0,0,[0,0,0,0,0,0,0,0,0,0]),++n;
					total+=n;$("level").innerHTML=(level=parseInt(total/5)+1);$("score").innerHTML=(score+=n*n*level*100);}
				var interval = setInterval(function(){
					(t < 0) && (rotation=irnd(4), t = irnd(6));
					if(rot || dx) for(var...