JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.11.0.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
...
CSS
* {
padding: 0;
margin: 0;
}
body {
background: #d5d5d5;
}
table {
border: 1px solid black;
margin: 0 auto;
border-collapse: collapse;
}
td {
width: 30px;
height: 30px;
border:1px solid gray;
}
JavaScript
$(document).ready(
function()
{
var x = $("table tr:first-child>td").length;
var y = $("tr").length;
var field = [y];
for(var i=0; i<y;i++)
{
field[i]=[x];
var ii = i+1;
var row = $("table tr:nth-child("+ii+") td");
for(var j =0; j<x; j++)
{
field[i][j]=row[j];
$(field[i][j]).css("background","#f9f9f9");
}
}
var getHex = function(rgb)
{
console.log(rgb);
var regex = /(\d{3})/g;
var value = rgb.match(regex);
console.log(value);
var result = "#"+parseInt(value[0]).toString(16)+parseInt(value[1]).toString(16)+parseInt(value[2]).toString(16);
console.log(result);
return result;
}
function Figure(figure,field)
{
this.active=true;
this.moveOrNot=true;
this.field=field;
this.position=[];
this.lastPosition=[[0,0],[0,0],[0,0],[0,0]];
this.currentPosition=[[0,0],[0,0],[0,0],[0,0]];
this.figure=figure;
this.color;
switch(this.figure)
{
case "-":
this.position=[[0,0],[0,1],[0,1],[0,1]];
this.color="red";
break;
case "r":
this.position=[[0,0],[1,0],[1,0],[0,1]];
this.color="blue";
break;
case "z":
this.position=[[0,0],[0,1],[1,0],[0,1]];
this.color="green";
break;
case "o":
this.position=[[0,0],[0,1],[-1,0],[0,-1]];
this.color="yellow";
}
}
Figure.prototype.x=0;
Figure.prototype.y=0;
Figure.prototype.xx=0;
Figure.prototype.yy=0;
...