Hamburger breakoutOne-line

Claude Haiku 4.5

by AnthropicReasoning1 console error

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 13.5 s
Cost: $0.020
Output tokens: 3,896
Spent thinking: 0 tokens
Speed: 324.6 tok/s
Console errors: 1

First token after: 1.5 s
First visible text after: 1.5 s
Prompt tokens: 378
Code size: 12.5 KB
Finish reason: stop
Served by: Amazon Bedrock
Model id: anthropic/claude-haiku-4.5
Reasoning sent: {"effort":"none"}
Max output: 32,000 tokens
Generated: Nov 10, 2026

Console errors

Caught in the first 3 seconds after load, in a sandboxed iframe like the one above.

Failed to load resource: the server responded with a status of 404 (Not Found)

What it was asked

The prompt

“i want a breakout game where the paddle is a hamburger and every brick you break explodes into tons of little hearts”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 418 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamburger Breakout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
        }

        #gameContainer {
            position: relative;
            width: 100%;
            max-width: 800px;
            aspect-ratio: 800 / 600;
            background: linear-gradient(to bottom, #1a1a2e, #16213e);
            border: 4px solid #00d4ff;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
            overflow: hidden;
        }

        #canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        #startMessage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #00d4ff;
            font-size: 24px;
            font-weight: bold;
            z-index: 100;
            pointer-events: none;
            text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
        }

        @media (max-width: 600px) {
            #gameContainer {
                max-width: 375px;
            }
            #startMessage {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <canvas id="canvas"></canvas>
        <div id="startMessage">Click or press a key to start</div>
    </div>

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

        // Set canvas size
        function resizeCanvas() {
            const rect = canvas.parentElement.getBoundingClientRect();
            canvas.width = rect.width;
            canvas.height = rect.height;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // Game variables
        const GAME_WIDTH = 800;
        const GAME_HEIGHT = 600;
        const SCALE = canvas.width / GAME_WIDTH;

        let gameStarted = false;
        let gameActive = false;
        let score = 0;

        // Paddle (Hamburger)
        const paddle = {
            x: GAME_WIDTH / 2 - 40,
            y: GAME_HEIGHT - 40,
            width: 80,
            height: 30,
            speed: 6,
            dx: 0
        };

        // Ball
        const ball = {
            x: GAME_WIDTH / 2,
            y: GAME_HEIGHT - 100,
            radius: 6,
            dx: 4,
            dy: -4
        };

        // Bricks
        let bricks = [];
        const BRICK_WIDTH = 60;
        const BRICK_HEIGHT = 20;
        const BRICK_PADDING = 10;
        const BRICK_OFFSET_TOP = 40;
        const BRICK_OFFSET_LEFT = 30;
        const BRICK_ROWS = 4;
        const BRICK_COLS = 10;

        function initBricks() {
            bricks = [];
            for (let r = 0; r < BRICK_ROWS; r++) {
                for (let c = 0; c < BRICK_COLS; c++) {
                    bricks.push({
                        x: BRICK_OFFSET_LEFT + c * (BRICK_WIDTH + BRICK_PADDING),
                        y: BRICK_OFFSET_TOP + r * (BRICK_HEIGHT + BRICK_PADDING),
                        width: BRICK_WIDTH,
                        height: BRICK_HEIGHT,
                        active: true,
                        color: `hsl(${r * 45}, 100%, 50%)`
                    });
                }
            }
        }

        // Particles (Hearts)
        let particles = [];

        class Heart {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.vx = (Math.random() - 0.5) * 8;
                this.vy = (Math.random() - 0.5) * 8 - 2;
                this.life = 1;
                this.decay = 0.015;
                this.size = 6 + Math.random() * 4;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += 0.15; // gravity
                this.life -= this.decay;
            }

            draw(ctx, scale) {
                ctx.globalAlpha = this.life;
                ctx.fillStyle = '#ff69b4';
                this.drawHeart(ctx, this.x * scale, this.y * scale, this.size * scale);
                ctx.globalAlpha = 1;
            }

            drawHeart(ctx, x, y, size) {
                const h = size;
                ctx.beginPath();
                ctx.moveTo(x, y - h * 0.3);
                ctx.bezierCurveTo(x - h * 0.5, y - h * 0.8, x - h * 0.9, y - h * 0.5, x - h * 0.9, y - h * 0.1);
                ctx.bezierCurveTo(x - h * 0.9, y + h * 0.3, x - h * 0.2, y + h * 0.7, x, y + h * 0.9);
                ctx.bezierCurveTo(x + h * 0.2, y + h * 0.7, x + h * 0.9, y + h * 0.3, x + h * 0.9, y - h * 0.1);
                ctx.bezierCurveTo(x + h * 0.9, y - h * 0.5, x + h * 0.5, y - h * 0.8, x, y - h * 0.3);
                ctx.fill();
            }
        }

        function createExplosion(x, y) {
            for (let i = 0; i < 15; i++) {
                particles.push(new Heart(x, y));
            }
        }

        // Input handling
        let keys = {};
        let mouseX = canvas.width / 2;

        document.addEventListener('keydown', (e) => {
            keys[e.key.toLowerCase()] = true;
            if (gameStarted && !gameActive) {
                startDemo();
            }
        });

        document.addEventListener('keyup', (e) => {
            keys[e.key.toLowerCase()] = false;
        });

        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            mouseX = (e.clientX - rect.left) / SCALE;
            if (gameStarted && !gameActive) {
                startDemo();
            }
        });

        canvas.addEventListener('click', () => {
            if (gameStarted && !gameActive) {
                startDemo();
            }
        });

        function startDemo() {
            gameActive = true;
            startMessage.style.display = 'none';
            gameStarted = true;
        }

        function updatePaddle() {
            if (gameActive) {
                // AI player mode - follow the ball
                const paddleCenter = paddle.x + paddle.width / 2;
                const targetX = ball.x;
                
                if (paddleCenter < targetX - 10) {
                    paddle.dx = paddle.speed;
                } else if (paddleCenter > targetX + 10) {
                    paddle.dx = -paddle.speed;
                } else {
                    paddle.dx = 0;
                }
            } else {
                paddle.dx = 0;
            }

            paddle.x += paddle.dx;
            if (paddle.x < 0) paddle.x = 0;
            if (paddle.x + paddle.width > GAME_WIDTH) paddle.x = GAME_WIDTH - paddle.width;
        }

        function updateBall() {
            ball.x += ball.dx;
            ball.y += ball.dy;

            // Bounce off walls
            if (ball.x - ball.radius < 0 || ball.x + ball.radius > GAME_WIDTH) {
                ball.dx *= -1;
                ball.x = Math.max(ball.radius, Math.min(GAME_WIDTH - ball.radius, ball.x));
            }

            // Bounce off top
            if (ball.y - ball.radius < 0) {
                ball.dy *= -1;
                ball.y = ball.radius;
            }

            // Paddle collision
            if (ball.y + ball.radius > paddle.y &&
                ball.y - ball.radius < paddle.y + paddle.height &&
                ball.x > paddle.x &&
                ball.x < paddle.x + paddle.width) {
                ball.dy *= -1;
                ball.y = paddle.y - ball.radius;
                
                // Add spin based on where it hits the paddle
                const hitPos = (ball.x - paddle.x) / paddle.width;
                ball.dx = (hitPos - 0.5) * 10;
            }

            // Brick collision
            for (let brick of bricks) {
                if (!brick.active) continue;

                if (ball.x > brick.x &&
                    ball.x < brick.x + brick.width &&
                    ball.y > brick.y &&
                    ball.y < brick.y + brick.height) {
                    
                    ball.dy *= -1;
                    brick.active = false;
                    score += 10;
                    createExplosion(brick.x + brick.width / 2, brick.y + brick.height / 2);
                }
            }

            // Miss ball
            if (ball.y > GAME_HEIGHT) {
                resetBall();
            }
        }

        function resetBall() {
            ball.x = paddle.x + paddle.width / 2;
            ball.y = GAME_HEIGHT - 100;
            ball.dx = 4 + (Math.random() - 0.5) * 2;
            ball.dy = -4;
        }

        function updateParticles() {
            for (let i = particles.length - 1; i >= 0; i--) {
                particles[i].update();
                if (particles[i].life <= 0) {
                    particles.splice(i, 1);
                }
            }
        }

        function drawHamburger(x, y, width, height) {
            // Bottom bun
            ctx.fillStyle = '#d4a574';
            ctx.fillRect(x, y + height - 8, width, 8);
            ctx.beginPath();
            ctx.ellipse(x + width / 2, y + height - 8, width / 2, 4, 0, 0, Math.PI * 2);
            ctx.fill();

            // Patty
            ctx.fillStyle = '#8b4513';
            ctx.fillRect(x + 5, y + height - 18, width - 10, 10);

            // Cheese
            ctx.fillStyle = '#ffcc00';
            ctx.fillRect(x + 8, y + height - 20, width - 16, 3);

            // Lettuce
            ctx.fillStyle = '#228b22';
            ctx.fillRect(x + 3, y + height - 24, width - 6, 4);

            // Top bun
            ctx.fillStyle = '#d4a574';
            ctx.fillRect(x, y, width, 8);
            ctx.beginPath();
            ctx.ellipse(x + width / 2, y + 8, width / 2, 4, 0, Math.PI, Math.PI * 2);
            ctx.fill();

            // Sesame seeds
            ctx.fillStyle = '#fffacd';
            for (let i = 0; i < 8; i++) {
                const seedX = x + (i + 0.5) * width / 8;
                const seedY = y + 2;
                ctx.beginPath();
                ctx.arc(seedX, seedY, 1.5, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function draw() {
            // Clear canvas
            ctx.fillStyle = '#0a0e27';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Scale context
            ctx.scale(SCALE, SCALE);

            // Draw bricks
            for (let brick of bricks) {
                if (!brick.active) continue;
                ctx.fillStyle = brick.color;
                ctx.fillRect(brick.x, brick.y, brick.width, brick.height);
                ctx.strokeStyle = 'rgba(255,255,255,0.3)';
                ctx.lineWidth = 1;
                ctx.strokeRect(brick.x, brick.y, brick.width, brick.height);
            }

            // Draw ball
            ctx.fillStyle = '#00ffff';
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.shadowColor = 'rgba(0, 255, 255, 0.8)';
            ctx.shadowBlur = 10;
            ctx.strokeStyle = '#00ffff';
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.shadowBlur = 0;

            // Draw paddle (hamburger)
            drawHamburger(paddle.x, paddle.y, paddle.width, paddle.height);

            // Draw particles
            for (let particle of particles) {
                particle.draw(ctx, 1);
            }

            // Draw score
            ctx.fillStyle = '#00d4ff';
            ctx.font = 'bold 20px Arial';
            ctx.fillText('Score: ' + score, 20, 30);

            ctx.resetTransform();
        }

        function gameLoop() {
            updatePaddle();
            if (gameActive) {
                updateBall();
            }
            updateParticles();
            draw();
            requestAnimationFrame(gameLoop);
        }

        // Initialize
        initBricks();
        startMessage.style.display = 'block';
        gameStarted = true;
        gameActive = false;
        
        // Auto-start demo
        setTimeout(() => {
            if (!gameActive) {
                startDemo();
            }
        }, 1000);

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