<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #111;
            margin: 0;
            color: white;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 2px solid #333;
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="300" height="600"></canvas>
    <script>
        const canvas = document.getElementById('tetris');
        const ctx = canvas.getContext('2d');

        const scale = 30;
        const rows = canvas.height / scale;
        const cols = canvas.width / scale;

        const tetrominoes = [
            { color: 'cyan', shape: [[1, 1, 1, 1]] }, // I
            { color: 'yellow', shape: [[1, 1], [1, 1]] }, // O
            { color: 'purple', shape: [[1, 1, 1], [0, 1, 0]] }, // T
            { color: 'green', shape: [[1, 1, 0], [0, 1, 1]] }, // S
            { color: 'red', shape: [[0, 1, 1], [1, 1, 0]] }, // Z
            { color: 'blue', shape: [[1, 1, 1], [1, 0, 0]] }, // L
            { color: 'orange', shape: [[1, 1, 1], [0, 0, 1]] } // J
        ];

        let board = Array.from({ length: rows }, () => Array(cols).fill(0));
        let currentTetromino = null;
        let currentX = 0;
        let currentY = 0;
        let gameInterval = null;
        let isGameOver = false;

        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let y = 0; y < rows; y++) {
                for (let x = 0; x < cols; x++) {
                    if (board[y][x]) {
                        ctx.fillStyle = board[y][x];
                        ctx.fillRect(x * scale, y * scale, scale, scale);
                        ctx.strokeStyle = '#333';
                        ctx.strokeRect(x * scale, y * scale, scale, scale);
                    }
                }
            }
        }

        function drawTetromino() {
            ctx.fillStyle = currentTetromino.color;
            currentTetromino.shape.forEach((row, dy) => {
                row.forEach((value, dx) => {
                    if (value) {
                        ctx.fillRect((currentX + dx) * scale, (currentY + dy) * scale, scale, scale);
                        ctx.strokeStyle = '#333';
                        ctx.strokeRect((currentX + dx) * scale, (currentY + dy) * scale, scale, scale);
                    }
                });
            });
        }

        function collide(x, y, shape) {
            return shape.some((row, dy) => {
                return row.some((value, dx) => {
                    if (value) {
                        const boardX = x + dx;
                        const boardY = y + dy;
                        return boardX < 0 || boardX >= cols || boardY >= rows || board[boardY][boardX];
                    }
                    return false;
                });
            });
        }

        function mergeTetromino() {
            currentTetromino.shape.forEach((row, dy) => {
                row.forEach((value, dx) => {
                    if (value) {
                        board[currentY + dy][currentX + dx] = currentTetromino.color;
                    }
                });
            });
        }

        function removeFullRows() {
            for (let y = rows - 1; y >= 0; y--) {
                if (board[y].every(cell => cell)) {
                    board.splice(y, 1);
                    board.unshift(Array(cols).fill(0));
                }
            }
        }

        function moveDown() {
            if (!collide(currentX, currentY + 1, currentTetromino.shape)) {
                currentY++;
            } else {
                mergeTetromino();
                removeFullRows();
                spawnTetromino();
            }
            drawBoard();
            drawTetromino();
        }

        function moveLeft() {
            if (!collide(currentX - 1, currentY, currentTetromino.shape)) {
                currentX--;
            }
        }

        function moveRight() {
            if (!collide(currentX + 1, currentY, currentTetromino.shape)) {
                currentX++;
            }
        }

        function rotate() {
            const tempShape = currentTetromino.shape;
            const newShape = tempShape[0].map((_, i) => tempShape.map(row => row[i])).reverse();
            if (!collide(currentX, currentY, newShape)) {
                currentTetromino.shape = newShape;
            }
        }

        function spawnTetromino() {
            const random = Math.floor(Math.random() * tetrominoes.length);
            currentTetromino = { ...tetrominoes[random] };
            currentX = Math.floor(cols / 2) - Math.floor(currentTetromino.shape[0].length / 2);
            currentY = 0;
            if (collide(currentX, currentY, currentTetromino.shape)) {
                isGameOver = true;
                clearInterval(gameInterval);
                alert('Game Over!');
            }
        }

        function startGame() {
            board = Array.from({ length: rows }, () => Array(cols).fill(0));
            spawnTetromino();
            gameInterval = setInterval(() => {
                if (!isGameOver) {
                    moveDown();
                }
            }, 500);
        }

        document.addEventListener('keydown', (event) => {
            if (isGameOver) return;
            switch (event.code) {
                case 'ArrowLeft':
                    moveLeft();
                    break;
                case 'ArrowRight':
                    moveRight();
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowUp':
                    rotate();
                    break;
            }
            drawBoard();
            drawTetromino();
        });

        startGame();
    </script>
</body>
</html>
