ChatGPT Tetris SVG

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Clone</title>
    <style>
        svg {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <svg id="gameCanvas" width="200" height="400"></svg>
    <script>
        const svg = document.getElementById('gameCanvas');
        const board = [];
        const tetrominoes = [
            [
                [1, 1, 1, 1], // I-shape
            ],
            [
                [1, 1], // O-shape
                [1, 1],
            ],
            [
                [1, 1, 1], // T-shape
                [0, 1, 0],
            ],
            [
                [1, 1, 1], // L-shape
                [1, 0, 0],
            ],
            [
                [1, 1, 1], // J-shape
                [0, 0, 1],
            ],
            [
                [1, 1, 0], // S-shape
                [0, 1, 1],
            ],
            [
                [0, 1, 1], // Z-shape
                [1, 1, 0],
            ],
        ];

        let currentTetromino = getRandomTetromino();
        let tetrominoX = 0;
        let tetrominoY = 0;
        let score = 0;
        let gameInterval;

        // Create the game board (20x10 grid)
        for (let i = 0; i < 20; i++) {
            board[i] = Array(10).fill(0);
        }

        // Get a random tetromino
        function getRandomTetromino() {
            const index = Math.floor(Math.random() * tetrominoes.length);
            return tetrominoes[index];
        }

        // Draw the game board
        function drawBoard() {
            svg.innerHTML = '';
            for (let row = 0; row < 20; row++) {
                for (let col = 0; col < 10; col++) {
                    if (board[row][col]) {
                        const block = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                        block.setAttribute('x', col * 20);
                        block.setAttribute('y', row * 20);
                        block.setAttribute('width', 20);
                        block.setAttribute('height', 20);
                        block.setAttribute('fill', 'blue');
                        svg.appendChild(block);
                    }
                }
            }
        }

        // Draw the current tetromino
        function drawTetromino() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        const block = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                        block.setAttribute('x', (tetrominoX + col) * 20);
                        block.setAttribute('y', (tetrominoY + row) * 20);
                        block.setAttribute('width', 20);
                        block.setAttribute('height', 20);
                        block.setAttribute('fill', 'blue');
                        svg.appendChild(block);
                    }
                }
            }
        }

        // Check if the current tetromino can move to the specified position
        function canMove(dx, dy) {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        const newX = tetrominoX + col + dx;
                        const newY = tetrominoY + row + dy;
                        if (
                            newX < 0 ||
                            newX >= 10 ||
                            newY >= 20 ||
                            (newY >= 0 && board[newY][newX])
                        ) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

        // Move the current tetromino down
        function moveDown() {
            if (canMove(0, 1)) {
                tetrominoY++;
            } else {
                mergeTetromino();
                clearLines();
                currentTetromino = getRandomTetromino();
                tetrominoX = 0;
                tetrominoY = 0;
                if (!canMove(0, 0)) {
                    // Game over
                    clearInterval(gameInterval);
                    alert('Game Over. Score: ' + score);
                }
            }
        }

        // Merge the current tetromino into the game board
        function mergeTetromino() {
            for (let row = 0; row < currentTetromino.length; row++) {
                for (let col = 0; col < currentTetromino[row].length; col++) {
                    if (currentTetromino[row][col]) {
                        const x = tetrominoX + col;
                        const y = tetrominoY + row;
                        if (y >= 0) {
                            board[y][x] = 1;
                        }
                    }
                }
            }
        }

        // Clear completed lines
        function clearLines() {
            for (let row = 0; row < 20; row++) {
                if (board[row].every((block) => block)) {
                    board.splice(row, 1);
                    board.unshift(Array(10).fill(0));
                    score += 100;
                }
            }
        }

        // Handle keyboard input
        document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowLeft' && canMove(-1, 0)) {
                tetrominoX--;
            } else if (event.key === 'ArrowRight' && canMove(1, 0)) {
                tetrominoX++;
            } else if (event.key === 'ArrowDown') {
                moveDown();
            } else if (event.key === 'ArrowUp') {
                rotateTetromino();
            }
            drawBoard();
            drawTetromino();
        });

        // Rotate the current tetromino
        function rotateTetromino() {
            const originalTetromino = currentTetromino;
            const rotatedTetromino = [];
            const rows = originalTetromino.length;
            const cols = originalTetromino[0].length;
            for (let col = 0; col < cols; col++) {
                rotatedTetromino[col] = [];
                for (let row = 0; row < rows; row++) {
                    rotatedTetromino[col][row] = originalTetromino[row][cols - col - 1];
                }
            }
            if (canRotate(rotatedTetromino)) {
                currentTetromino = rotatedTetromino;
            }
        }

        // Check if the current tetromino can rotate
        function canRotate(rotatedTetromino) {
            for (let row = 0; row < rotatedTetromino.length; row++) {
                for (let col = 0; col < rotatedTetromino[row].length; col++) {
                    if (rotatedTetromino[row][col]) {
                        const newX = tetrominoX + col;
                        const newY = tetrominoY + row;
                        if (
                            newX < 0 ||
                            newX >= 10 ||
                            newY >= 20 ||
                            (newY >= 0 && board[newY][newX])
                        ) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

        // Start the game loop
        gameInterval = setInterval(() => {
            moveDown();
            drawBoard();
            drawTetromino();
        }, 1000);

    </script>
</body>
</html>