HTML
<table id="t" style="border: 5px solid;"></table>
<script>
var w=10, h=10, colors=['white', 'purple', 'yellow', 'green', 'blue', 'red', 'orange']
var pieces=[
[
[1, 1],
[1, 1]
],
[
[0, 0, 0],
[2, 2, 2],
[0, 0, 0]
],
[
[0, 0, 0],
[0, 3, 3],
[3, 3, 0]
],
[
[0, 0, 0],
[4, 4, 0],
[0, 4, 4]
],
[
[0, 0, 0],
[5, 0, 0],
[5, 5, 5]
],
[
[0, 0, 0],
[0, 0, 6],
[6, 6, 6]
]
]
function init() {
var field = []
var table = document.getElementById('t')
for (var i = 0; i < h; i++) {
var tr = document.createElement('tr')
var row = []
for (var j = 0; j < w; j++) {
var td = document.createElement('td')
td.classList.add('cell')
row.push({value: 0, element: td})
tr.appendChild(td)
}
field.push(row)
table.appendChild(tr)
}
return field
}
function draw(field, piece, pX, pY) {
function drawCell(field, x, y, c) {
field[y][x].element.style = 'background-color:'+colors[c]
}
for (var y = 0; y < field.length; y++) {
var row = field[y]
for (var x = 0; x < row.length; x++) {
drawCell(field, x, y, row[x].value)
}
}
for (var y = 0; y < piece.length; y++) {
var row = piece[y]
for (var x = 0; x < row.length; x++) {
if (pX+x < w && pY+y < h && row[x] > 0) drawCell(field, pX+x, pY+y, row[x])
}
}
}
function validPosition(field, piece, pX, pY) {
for (var y = 0; y < piece.length; y++) {
var row = piece[y]
for (var x = 0; x < row.length; x++) {
if (row[x] > 0) {
if (pX+x < 0 || pX+x >= w || pY+y >= h || field[pY+y][pX+x].value > 0) return false
}
}
}
return true
}
function putPiece(field, piece, pX, pY) {
for (var y = 0; y < piece.length; y++) {
var row = piece[y]
for (var x = 0; x < row.length; x++)...