Another week, another groundbreaking AI release! This time, it’s Claude Sonnet 3.5 that’s stealing the show. Eager to test its capabilities, I challenged it with a task that seemed deceptively simple: recreate Tetris using HTML. To my astonishment, it delivered a fully functional game in mere seconds, without requiring any tweaks or modifications. Talk about instant gratification! 🤯 Enjoy!

Model

claude-3-5-sonnet-20240620

Prompt

create a one page html application that replicates the game of tetris

Response

Here’s a basic one-page HTML application that replicates the game of Tetris:

<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #gameBoard {
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <canvas id="gameBoard" width="300" height="600"></canvas>

    <script>
        const canvas = document.getElementById('gameBoard');
        const ctx = canvas.getContext('2d');
        const scale = 30;
        const rows = 20;
        const cols = 10;

        const shapes = [
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[1, 1, 1], [0, 1, 0]],
            [[1, 1, 1], [1, 0, 0]],
            [[1, 1, 1], [0, 0, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]]
        ];

        const colors = ['cyan', 'yellow', 'purple', 'blue', 'orange', 'green', 'red'];

        let board = Array(rows).fill().map(() => Array(cols).fill(0));
        let currentPiece = null;
        let currentX = 0;
        let currentY = 0;

        function newPiece() {
            const shapeIndex = Math.floor(Math.random() * shapes.length);
            currentPiece = {
                shape: shapes[shapeIndex],
                color: colors[shapeIndex],
                x: Math.floor(cols / 2) - Math.floor(shapes[shapeIndex][0].length / 2),
                y: 0
            };
        }

        function draw() {
            ctx.fillStyle = '#fff';
            ctx.fillRect(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.strokeRect(x * scale, y * scale, scale, scale);
                    }
                }
            }

            if (currentPiece) {
                ctx.fillStyle = currentPiece.color;
                for (let y = 0; y < currentPiece.shape.length; y++) {
                    for (let x = 0; x < currentPiece.shape[y].length; x++) {
                        if (currentPiece.shape[y][x]) {
                            ctx.fillRect((currentPiece.x + x) * scale, (currentPiece.y + y) * scale, scale, scale);
                            ctx.strokeRect((currentPiece.x + x) * scale, (currentPiece.y + y) * scale, scale, scale);
                        }
                    }
                }
            }
        }

        function moveDown() {
            currentPiece.y++;
            if (collision()) {
                currentPiece.y--;
                merge();
                clearLines();
                newPiece();
                if (collision()) {
                    // Game over
                    board = Array(rows).fill().map(() => Array(cols).fill(0));
                }
            }
        }

        function moveLeft() {
            currentPiece.x--;
            if (collision()) {
                currentPiece.x++;
            }
        }

        function moveRight() {
            currentPiece.x++;
            if (collision()) {
                currentPiece.x--;
            }
        }

        function rotate() {
            const rotated = currentPiece.shape[0].map((_, i) =>
                currentPiece.shape.map(row => row[i]).reverse()
            );
            const previousShape = currentPiece.shape;
            currentPiece.shape = rotated;
            if (collision()) {
                currentPiece.shape = previousShape;
            }
        }

        function collision() {
            for (let y = 0; y < currentPiece.shape.length; y++) {
                for (let x = 0; x < currentPiece.shape[y].length; x++) {
                    if (currentPiece.shape[y][x] &&
                        (board[y + currentPiece.y] &&
                        board[y + currentPiece.y][x + currentPiece.x]) !== 0) {
                        return true;
                    }
                }
            }
            return false;
        }

        function merge() {
            for (let y = 0; y < currentPiece.shape.length; y++) {
                for (let x = 0; x < currentPiece.shape[y].length; x++) {
                    if (currentPiece.shape[y][x]) {
                        board[y + currentPiece.y][x + currentPiece.x] = currentPiece.color;
                    }
                }
            }
        }

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

        document.addEventListener('keydown', event => {
            if (event.key === 'ArrowLeft') moveLeft();
            if (event.key === 'ArrowRight') moveRight();
            if (event.key === 'ArrowDown') moveDown();
            if (event.key === 'ArrowUp') rotate();
            draw();
        });

        newPiece();
        setInterval(() => {
            moveDown();
            draw();
        }, 500);

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

This HTML file creates a basic Tetris game with the following features:

  1. A game board drawn on a canvas element
  2. Seven different Tetromino shapes
  3. Basic game mechanics:
    • Piece movement (left, right, down)
    • Piece rotation
    • Collision detection
    • Line clearing
    • Game over condition

To play the game:

  • Use the left and right arrow keys to move the piece horizontally
  • Use the down arrow key to move the piece down faster
  • Use the up arrow key to rotate the piece

The game automatically moves pieces down every 500 milliseconds. When a line is completed, it is cleared from the board. The game ends when a new piece can’t be placed on the board.

This is a basic implementation and can be improved with additional features like scoring, levels, and better graphics. However, it provides a functional Tetris-like experience in a single HTML file.