Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #111;
            color: #fff;
            font-family: Arial, sans-serif;
        }

        canvas {
            border: 2px solid #fff;
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="600"></canvas>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

        const ROWS = 20;
        const COLS = 10;
        const BLOCK_SIZE = 30;

        const pieces = [
            [[1, 1, 1, 1]],        // I
            [[1, 1, 1], [0, 1, 0]], // T
            [[1, 1, 1], [1, 0, 0]], // L
            [[0, 1, 0], [0, 1, 0],[0,0,1]], // J
            [[1, 1,1], [1, 1,1],[1,1,1]],       // O
            [[1, 1, 0], [0, 1, 1]], // Z
            [[0, 1, 1], [1, 1, 0]]  // S
        ];

        let board = [];
        let currentPiece;
        let interval;
        let gameOver = false;

        function init() {
            for (let row = 0; row < ROWS; row++) {
                board[row] = [];
                for (let col = 0; col < COLS; col++) {
                    board[row][col] = 0;
                }
            }
            drawBoard();
            newPiece();
            interval = setInterval(gameLoop, 500);
        }

        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let row = 0; row < ROWS; row++) {
                for (let col = 0; col < COLS; col++) {
                    if (board[row][col]) {
                        ctx.fillStyle = "#00f";
                        ctx.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                        ctx.strokeStyle = "#fff";
                        ctx.strokeRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                    }
                }
            }
        }

        function newPiece() {
            const index = Math.floor(Math.random() * pieces.length);
            currentPiece = pieces[index];
            currentPiece.row = 0;
            currentPiece.col = Math.floor(Math.random() * (COLS - currentPiece[0].length + 1));
            if (collides()) {
                clearInterval(interval);
                gameOver = true;
                return;
            }
            drawPiece();
        }

        function drawPiece() {
            for (let row = 0; row < currentPiece.length; row++) {
                for (let col = 0; col < currentPiece[row].length; col++) {
                    if (currentPiece[row][col]) {
                        ctx.fillStyle = "#00f";
                        ctx.fillRect((currentPiece.col + col) * BLOCK_SIZE, (currentPiece.row + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                        ctx.strokeStyle = "#fff";
                        ctx.strokeRect((currentPiece.col + col) * BLOCK_SIZE, (currentPiece.row + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                    }
                }
            }
        }

        function collides() {
            for (let row = 0; row < currentPiece.length; row++) {
                for (let col = 0; col < currentPiece[row].length; col++) {
                    if (currentPiece[row][col] && (currentPiece.row + row >= ROWS || currentPiece.col + col < 0 || currentPiece.col + col >= COLS || board[currentPiece.row + row][currentPiece.col + col])) {
                        return true;
                    }
                }
            }
            return false;
        }

        function moveDown() {
            currentPiece.row++;
            if (collides()) {
                currentPiece.row--;
                placePiece();
                newPiece();
                checkLines();
            }
            drawBoard();
            drawPiece();
        }

        function moveRight() {
            currentPiece.col++;
            if (collides()) {
                currentPiece.col--;
            }
            drawBoard();
            drawPiece();
        }

        function moveLeft() {
            currentPiece.col--;
            if (collides()) {
                currentPiece.col++;
            }
            drawBoard();
            drawPiece();
        }

        function placePiece() {
            for (let row = 0; row < currentPiece.length; row++) {
                for (let col = 0; col < currentPiece[row].length; col++) {
                    if (currentPiece[row][col]) {
                        board[currentPiece.row + row][currentPiece.col + col] = 1;
                    }
                }
            }
        }

        function checkLines() {
            for (let row = ROWS - 1; row >= 0; row--) {
                if (board[row].every(cell => cell)) {
                    for (let r = row; r > 0; r--) {
                        for (let col = 0; col < COLS; col++) {
                            board[r][col] = board[r - 1][col];
                        }
                    }
                    board[0] = new Array(COLS).fill(0);
                    row++; // to recheck the current row after shifting down
                }
            }
            drawBoard();
        }

        function gameLoop() {
            if (!gameOver) {
                moveDown();
            } else {
                clearInterval(interval);
                ctx.fillStyle = "#fff";
                ctx.font = "30px Arial";
                ctx.fillText("Game Over", 80, 300);
            }
        }

        document.addEventListener("keydown", event => {
            switch (event.key) {
                case "ArrowUp":
                    rotatePiece();
                    break;
                case "ArrowRight":
                    moveRight();
                    break;
                case "ArrowLeft":
                    moveLeft();
                    break;
                case "ArrowDown":
                    moveDown();
                    break;
            }
        });

        init();
    </script>
</body>
</html>
Editor is loading...