JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</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>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<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;
background: #f9f9f9;
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];
}
}
function Figure(figure,field)
{
this.active=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;
switch(this.figure)
{
case "-":
this.position=[[0,0],[0,1],[0,1],[0,1]];
break;
case "r":
this.position=[[0,0],[1,0],[1,0],[0,1]];
break;
case "z":
this.position=[[0,0],[0,1],[1,0],[0,1]];
break;
case "o":
this.position=[[0,0],[0,1],[-1,0],[0,-1]];
}
}
Figure.prototype.x=0;
Figure.prototype.y=0;
Figure.prototype.xx=0;
Figure.prototype.yy=0;
Figure.prototype.Move=function(direction)
{
var dir=0;
var down=0;
switch (direction)
{
case "right":
dir=1;
break;
case "left":
dir=-1;
break;
case "down":
down=1;
break;
}
// console.log(this.lastPosition);
if(direction==="right" && this.lastPosition[3][1]==this.field[0].length-1
|| direction==="left" && this.lastPosition[0][1]==0
|| direction==="down" &&...