Programmer Assistant: Tetris Game

Source:
<div id="sceneContainer" align="center"></div>
<script type="text/javascript">
var tbl;
var maxX = 30;
var maxY = 11;
var endGame = false;
var currentPosX;
var currentPosY;
var currentShape;
var currentDegree;
var currentColor;
var score = 0;
var lblScore;
var severitySelect;

var speedValue = 20;
var exteraTimer = null;
function appendToScene(el) {
    document.getElementById("sceneContainer").appendChild(el);
}
function createShape() {
    clearTable();
    if (currentShape == 1) {
        if (currentDegree == 0) {
            // ...
            //  .
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
        } else if (currentDegree == 1) {
            // .
            // ..
            // .
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
        } else if (currentDegree == 2) {
            //  .
            // ...
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
        } else {
            //  .
            // ..
            //  .
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
        }
    } else if (currentShape == 2) {
        if (currentDegree == 0) {
            // ...
            //   .
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY + 1].shape = true;
        } else if (currentDegree == 1) {
            // ...
            // .
            // .
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY + 1].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
        } else if (currentDegree == 2) {
            // .
            // ...
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY - 1].shape = true;
        } else {
            //   .
            //   .
            // ...
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY - 1].shape = true;
        }
    } else if (currentShape == 3) {
        if (currentDegree == 0 || currentDegree == 2) {
            //...
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
        } else {
            //.
            //.
            //.
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
        }
    } else if (currentShape == 4) {
        //..
        //..
        tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
        tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
        tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
        tbl.rows[currentPosX + 1].cells[currentPosY + 1].style.backgroundColor = currentColor;
        tbl.rows[currentPosX].cells[currentPosY].shape = true;
        tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
        tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
        tbl.rows[currentPosX + 1].cells[currentPosY + 1].shape = true;
    } else if (currentShape == 5) {
        if (currentDegree == 0) {
            //...
            //.
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY - 1].shape = true;
        } else if (currentDegree == 1) {
            //.
            //.
            //..
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY + 1].shape = true;
        } else if (currentDegree == 2) {
            //  .
            //...
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX].cells[currentPosY + 1].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY + 1].shape = true;
        } else {
            //..
            // .
            // .
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY - 1].shape = true;
        }
    } else if (currentShape == 6) {
        if (currentDegree == 0) {
            // ..
            //..
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY + 1].shape = true;
        } else if (currentDegree == 1) {
            //.
            //..
            // .
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY - 1].shape = true;
        } else if (currentDegree == 2) {
            //..
            // ..
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY + 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY + 1].shape = true;
        } else {
            // .
            //..
            //.
            tbl.rows[currentPosX].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX - 1].cells[currentPosY].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX + 1].cells[currentPosY - 1].style.backgroundColor = currentColor;
            tbl.rows[currentPosX].cells[currentPosY].shape = true;
            tbl.rows[currentPosX - 1].cells[currentPosY].shape = true;
            tbl.rows[currentPosX].cells[currentPosY - 1].shape = true;
            tbl.rows[currentPosX + 1].cells[currentPosY - 1].shape = true;
        }
    }
}
function canChangePos(newXPos, newYPos, newDegree) {
    if (currentShape == 1) {
        if (newDegree == 0) {
            // ...
            //  .
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix || tbl.rows[newXPos + 1].cells[newYPos].fix)
                return false;
            else
                return true;
        } else if (newDegree == 1) {
            // .
            // ..
            // .
            if (newYPos < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos + 1].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else if (newDegree == 2) {
            //  .
            // ...
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix || tbl.rows[newXPos - 1].cells[newYPos].fix)
                return false;
            else
                return true;
        } else {
            //  .
            // ..
            //  .

            if (newYPos - 1 < 0 || newYPos > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos + 1].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos].fix)
                return false;
            else
                return true;
        }
    } else if (currentShape == 2) {
        if (newDegree == 0) {
            // ...
            //   .

            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix || tbl.rows[newXPos + 1].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else if (newDegree == 1) {
            // ..
            // .
            // .
            if (newYPos < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos + 1].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else if (newDegree == 2) {
            // .
            // ...
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos > maxX)
                return false;
            else if (tbl.rows[newXPos - 1].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else {
            //  .
            //  .
            // ..
            if (newYPos - 1 < 0 || newYPos > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos + 1].cells[newYPos - 1].fix || tbl.rows[newXPos + 1].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos].fix)
                return false;
            else
                return true;
        }
    } else if (currentShape == 3) {
        if (newDegree == 0 || newDegree == 2) {
            //...
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else {
            //.
            //.
            //.
            if (newYPos < 0 || newYPos > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos - 1].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos + 1].cells[newYPos].fix)
                return false;
            else
                return true;
        }
    } else if (currentShape == 4) {
        //..
        //..
        if (newYPos < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
            return false;
        else if (tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix || tbl.rows[newXPos + 1].cells[newYPos].fix || tbl.rows[newXPos + 1].cells[newYPos + 1].fix)
            return false;
        else
            return true;
    } else if (currentShape == 5) {
        if (newDegree == 0) {
            //...
            //.
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos + 1].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else if (newDegree == 1) {
            //.
            //.
            //..
            if (newYPos < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos + 1].cells[newYPos + 1].fix || tbl.rows[newXPos + 1].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos].fix)
                return false;
            else
                return true;
        } else if (newDegree == 2) {
            //  .
            //...
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos + 1].fix || tbl.rows[newXPos - 1].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else {
            //..
            // .
            // .
            if (newYPos - 1 < 0 || newYPos > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos - 1].cells[newYPos - 1].fix || tbl.rows[newXPos - 1].cells[newYPos].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos + 1].cells[newYPos].fix)
                return false;
            else
                return true;
        }
    } else {
        if (newDegree == 0) {
            // ..
            //..
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else if (newDegree == 1) {
            //.
            //..
            // .
            if (newYPos - 1 < 0 || newYPos > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos - 1].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos + 1].cells[newYPos].fix)
                return false;
            else
                return true;
        } else if (newDegree == 2) {
            //..
            // ..
            if (newYPos - 1 < 0 || newYPos + 1 > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos + 1].cells[newYPos].fix || tbl.rows[newXPos + 1].cells[newYPos + 1].fix)
                return false;
            else
                return true;
        } else {
            // .
            //..
            //.
            if (newYPos - 1 < 0 || newYPos > maxY || newXPos + 1 > maxX)
                return false;
            else if (tbl.rows[newXPos + 1].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos - 1].fix || tbl.rows[newXPos].cells[newYPos].fix || tbl.rows[newXPos - 1].cells[newYPos].fix)
                return false;
            else
                return true;
        }
    }
}

function rotateRight() {
    currentDegree = incRedDegree(currentDegree, true);
}
function rotateLeft() {
    currentDegree = incRedDegree(currentDegree, false);
}
function incRedDegree(degree, op) {
    if (op) {
        degree ++;
        degree = degree % 4;
    } else {
        degree --;
        degree = (degree < 0) ? 3 : degree;
        degree = degree % 4;
    }
    return degree;
}
function createScene() {
    // create severity combo
    severitySelect = document.createElement("select");
    appendToScene(severitySelect);
    var easy = document.createElement("option");
    easy.innerHTML = "easy";
    easy.value = 250;

    var medium = document.createElement("option");
    medium.innerHTML = "medium";
    medium.value = 150;

    var hard = document.createElement("option");
    hard.innerHTML = "hard";
    hard.value = 50;

    severitySelect.appendChild(easy);
    severitySelect.appendChild(medium);
    severitySelect.appendChild(hard);

    // create table of game
    tbl = document.createElement("table");
    tbl.style.borderColor = "black";
    tbl.style.borderWidth = "1px";
    tbl.style.borderStyle = "solid";
    tbl.style.width = "100px";
    tbl.style.height = "200px";
    var tbody = document.createElement("tbody");
    tbl.appendChild(tbody);
    for (var i = 0; i <= maxX; i ++) {
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        for (var j = 0; j <= maxY; j ++) {
            var td = document.createElement("td");
            tr.appendChild(td);
            td.style.fontSize = "4px";
            td.innerHTML = " ";
            td.shape = false;
            td.fix = false;
        }
    }
    appendToScene(tbl);

    // score labels
    lblScore = document.createElement("span");
    lblScore.innerHTML = score;
    var div = document.createElement("div");
    var scoreLabel = document.createElement("span");
    scoreLabel.innerHTML = "score : ";
    div.appendChild(scoreLabel);
    div.appendChild(lblScore);
    appendToScene(div);

    var copyRightDiv = document.createElement("div");
    appendToScene(copyRightDiv);
    copyRightDiv.style.textAlign = "center";
    copyRightDiv.innerHTML = "Powered by <a href='mailto:mostafarastgar@gmail.com' target='_blank'>Mostafa Rastegar</a>";
}
function playShape() {
    if (!endGame) {
        if (canChangePos(currentPosX + 1, currentPosY, currentDegree)) {
            currentPosX ++;
            createShape();
            setTimeout(function() {
                playShape();
            }, exteraTimer ? exteraTimer : severitySelect.value);
        } else {
            setFixShape();
            setTimeout(function() {
                showNextShape();
            }, exteraTimer ? exteraTimer : severitySelect.value);
        }
    }
}
function setFixShape() {
    for (var i = 0; i <= maxX; i ++) {
        for (var j = 0; j <= maxY; j ++) {
            if (tbl.rows[i].cells[j].shape) {
                tbl.rows[i].cells[j].fix = true;
            }
        }
    }
}
function gameOver() {
    endGame = true;
    var div = document.createElement("div");
    div.style.opacity = "0.4";
    div.style.filter = "alpha(opacity:40)";
    colorDiv(div);
    div.style.width = "100%";
    div.style.height = "100%";
    div.style.textAlign = "center";
    div.innerHTML = " ";
    appendToScene(div);
    div.style.position = "absolute";
    div.style.top = "0px";
    div.style.left = "0px";

    var goDiv = document.createElement("div");
    goDiv.innerHTML = "GAME OVER";
    goDiv.style.position = "absolute";
    goDiv.style.top = "50%";
    goDiv.style.left = "50%";
    appendToScene(goDiv);
}
function colorDiv(div) {
    if (div.style.backgroundColor == "red")
        div.style.backgroundColor = "green";
    else if (div.style.backgroundColor == "green")
        div.style.backgroundColor = "blue";
    else
        div.style.backgroundColor = "red";
    setTimeout(function() {
        colorDiv(div);
    }, 1000);
}
function calcScore() {
    for (var i = maxX; i >= 0; i--) {
        if (i == 1) {
            gameOver();
            break;
        }

        var rowCompleted = true;
        var endCheck = true;
        for (var j = 0; j <= maxY; j++) {
            if (tbl.rows[i].cells[j].fix)
                endCheck = false;
            else {
                rowCompleted = false;
            }
        }
        if (endCheck)
            break;
        if (rowCompleted) {
            for (var k = i - 1; k >= 0; k--) {
                var jmp = true;
                for (var j = 0; j <= maxY; j ++) {
                    if (tbl.rows[k].cells[j].fix)
                        jmp = false;
                    tbl.rows[k + 1].cells[j].fix = tbl.rows[k].cells[j].fix;
                    tbl.rows[k + 1].cells[j].style.backgroundColor = tbl.rows[k].cells[j].style.backgroundColor;
                }
                if (jmp)
                    break;
            }
            addScore();
            i++;
        }
    }
}
function addScore() {
    score ++;
    lblScore.innerHTML = score;
}
function showNextShape() {
    calcScore();
    currentPosX = 1;

    currentShape = ((new Date()).getMilliseconds() % 6) + 1;
    currentPosY = ((new Date()).getMilliseconds() % (maxY - 1));
    currentPosY = currentPosY == 0 ? currentPosY + 1 : currentPosY;
    currentDegree = ((new Date()).getMilliseconds() % 4);

    var colorDigit = ((new Date()).getMilliseconds() % 10);
    switch (colorDigit) {
        case 0:
            currentColor = "red";
            break;
        case 1:
            currentColor = "green";
            break;
        case 2:
            currentColor = "aqua";
            break;
        case 3:
            currentColor = "brown";
            break;
        case 4:
            currentColor = "blueviolet";
            break;
        case 5:
            currentColor = "chartreuse";
            break;
        case 6:
            currentColor = "chocolate";
            break;
        case 7:
            currentColor = "darkcyan";
            break;
        case 8:
            currentColor = "cadetblue";
            break;
        default:
            currentColor = "blue";
    }
    playShape();
}
function init() {
    createScene();
    showNextShape();
    document.onkeydown = function movePlayer(event) {
        var event = document.all ? window.event : event;
        if (!endGame) {
            if (event.keyCode == 37) { //left arrow key
                if (canChangePos(currentPosX, currentPosY - 1, currentDegree)) {
                    currentPosY --;
                    createShape();
                }
            }
            if (event.keyCode == 39) { //right arrow key
                if (canChangePos(currentPosX, currentPosY + 1, currentDegree)) {
                    currentPosY ++;
                    createShape();
                }
            }
            if (event.keyCode == 32) { //space key
                if (canChangePos(currentPosX, currentPosY, incRedDegree(currentDegree, true))) {
                    rotateRight();
                    createShape();
                }
            }
            if (event.keyCode == 13) { //enter key
                if (canChangePos(currentPosX, currentPosY, incRedDegree(currentDegree, false))) {
                    rotateLeft();
                    createShape();
                }
            }
            if (event.keyCode == 40) { //down key
                exteraTimer = speedValue;
            }
        }
        if (event.keyCode == 27) { //scape key
            alert("waiting ...");
        }
        return false;
    }
    document.onkeyup = function keyUp(event) {
        var event = document.all ? window.event : event;
        if (event.keyCode == 40) { //down key
            exteraTimer = null;
        }
    }
}

function clearTable() {
    for (var i = 0; i <= maxX; i ++) {
        for (var j = 0; j <= maxY; j ++) {
            if (!tbl.rows[i].cells[j].fix && tbl.rows[i].cells[j].shape) {
                tbl.rows[i].cells[j].shape = false;
                tbl.rows[i].cells[j].style.backgroundColor = "";
            }
        }
    }
}
init();
</script>
Pages

Tetris Game
