Tetris

tetris1_4.html

<canvas id="tetrisCanvas" width="200" height="400"></canvas>
<button onclick="moveShape(-1)">Left</button>
<button onclick="rotateShape()">Rotate</button>
<button onclick="moveShape(1)">Right</button>
<button onclick="dropShape()">Drop</button>

<script>
//  remove complete row, const, fix bug
var canvas = document.getElementById('tetrisCanvas');
var ctx = canvas.getContext('2d');
var shapes = [
   [[1, 1, 0, 0],        // 'O'
    [1, 1, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]],
   [[0, 0, 1, 0],        // 'I'
    [0, 0, 1, 0],
    [0, 0, 1, 0],
    [0, 0, 1, 0]],
   [[1, 1, 1, 0],        // 'T'
    [0, 1, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]],
   [[0, 1, 1, 0],        // 'S'
    [1, 1, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]],
   [[1, 1, 0, 0],        // 'Z'
    [0, 1, 1, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]],
   [[0, 1, 0, 0],        // 'J'
    [0, 1, 0, 0],
    [1, 1, 0, 0],
    [0, 0, 0, 0]],
   [[1, 0, 0, 0],        // 'L'
    [1, 0, 0, 0],
    [1, 1, 0, 0],
    [0, 0, 0, 0]]
];

var ROW_CNT = 20;
var COL_CNT = 10;
var shapeSize = [2,4,3,3,3,3,3];

function getNextShape() {
    curShapeType = Math.floor((Math.random() * 7));
    curShapeSize = shapeSize[curShapeType];
    return shapes[curShapeType]
}

var curShapeType = 0, curShapeSize=0, curShape = getNextShape();
var sPos = {x: (COL_CNT-4) / 2, y:0};
var gamePanel = [];

for (var y = 0; y < ROW_CNT; y++) {
    gamePanel[y] = [];
    for (var x = 0; x < COL_CNT; x++) {
        gamePanel[y][x] = 0;
    }
}    

var intervalHandler = setInterval(playingTetris, 400);    
    
function playingTetris() {
    if ( intersects(sPos.y + 1, sPos.x)) {
        for (var i = 0; i < curShapeSize; i++)
            for (var j = 0; j < curShapeSize; j++)
                if (curShape[i][j]) {
                    gamePanel[sPos.y+i][sPos.x+j] = 1;
                }
        
        curShape = getNextShape();        
        sPos = {x: (COL_CNT-4) / 2, y:0};
        if ( intersects(sPos.y, sPos.x)) {
            clearInterval(intervalHandler);
            alert("Game Over");
        }
        gamePanel = removeRow();        
    } else {
        sPos.y++;
    }
    draw();
}

function intersects(y, x) {
    for (var i = 0; i < curShapeSize; i++)
        for (var j = 0; j < curShapeSize; j++)
            if (curShape[i][j])
                if (y+i >= ROW_CNT || x+j < 0 || x+j >= COL_CNT || gamePanel[y+i][x+j])
                    return true;
    return false;
}

function draw() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, 200, 400);
    ctx.rect(0, 0, 200, 400);
    ctx.strokeStyle="blue";
    ctx.stroke(); 
    
    ctx.fillStyle = 'black';
    for (var y = 0; y < gamePanel.length; y++) {
        for (var x = 0; x < gamePanel[y].length; x++) {
            if (gamePanel[y][x]) {
                ctx.fillRect(x * 20, y * 20, 19, 19);
            }
        }
    }

    for (var y = 0; y < curShapeSize; y++) {
        for (var x = 0; x < curShapeSize; x++) {
            if (curShape[y][x]) {
                ctx.fillRect((sPos.x+x) * 20, (sPos.y+y) * 20, 19, 19);
            }
        }
    }
}

function moveShape(value) {
    if ( !intersects(sPos.y, sPos.x+value)) {
        sPos.x += value;
        draw(curShape);
    }
}

function dropShape() {
    for (var y=sPos.y; y<ROW_CNT; y++) {
        if ( !intersects(sPos.y+1, sPos.x)) {
            sPos.y++;
            draw(curShape);
        } else {
            break;
        }
    }
}

function rotateShape() {
    var ret = [];
    for (var y = 0; y < 4; y++) {
        ret[y] = curShape[y].slice();
    }
    
    var size = shapeSize[curShapeType];
    for (var y = 0; y < size; y++) {
        for (var x = 0; x < size; x++) {
            ret[y][x] = curShape[(size-1) - x][y];
        }
    }
    curShape = ret;
    draw();
}

function removeRow() {
    var newRows = [];
    var k = ROW_CNT;
    for (var y = ROW_CNT-1; y>=0; y--) {
        for (var x = 0; x < COL_CNT; x++) {
            if (!gamePanel[y][x]) {
                newRows[--k] = gamePanel[y].slice();
                break;
            }
        }
    }
    for (var y = 0; y < k; y++) {
        newRows[y] = [];
        for (var x = 0; x < COL_CNT; x++)
            newRows[y][x] = 0;
    }
    return newRows;
}

</script>