Hamburger breakoutOne-line

Gemini 3.1 Flash Lite

by GoogleReasoning1 console error

Open in new window

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

How it went

Total time: 16.3 s
Cost: $0.0091
Output tokens: 5,999
Spent thinking: 3,794 tokens
Speed: 394.1 tok/s
Console errors: 1

First token after: 1.1 s
First visible text after: 11.6 s
Prompt tokens: 363
Code size: 7.1 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"high"}
Max output: 65,536 tokens
Generated: Nov 12, 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 · 224 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>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #0f0c29;
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            pointer-events: none;
            text-shadow: 2px 2px 4px #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <div id="ui">
        <h1 id="title">Hamburger Breakout!</h1>
        <p id="msg">Click or press any key to take control</p>
    </div>
    <canvas id="gameCanvas"></canvas>

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

        let width, height;
        let paddle = { x: 0, y: 0, w: 100, h: 30 };
        let ball = { x: 0, y: 0, dx: 5, dy: -5, radius: 8 };
        let bricks = [];
        let particles = [];
        let playing = false;
        let mouseX = 0;

        function resize() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
            paddle.w = width / 8;
            paddle.h = 20;
            paddle.y = height - 50;
            initBricks();
        }

        function initBricks() {
            bricks = [];
            const rows = 5;
            const cols = 8;
            const padding = 10;
            const brickW = (width - padding * (cols + 1)) / cols;
            const brickH = 25;
            for (let r = 0; r < rows; r++) {
                for (let c = 0; c < cols; c++) {
                    bricks.push({
                        x: padding + c * (brickW + padding),
                        y: 50 + r * (brickH + padding),
                        w: brickW,
                        h: brickH,
                        color: `hsl(${c * 40}, 70%, 60%)`,
                        active: true
                    });
                }
            }
        }

        function drawHeart(x, y, s) {
            ctx.beginPath();
            ctx.moveTo(x, y + s / 4);
            ctx.quadraticCurveTo(x, y, x + s / 4, y);
            ctx.quadraticCurveTo(x + s / 2, y, x + s / 2, y + s / 4);
            ctx.quadraticCurveTo(x + s / 2, y, x + 3 * s / 4, y);
            ctx.quadraticCurveTo(x + s, y, x + s, y + s / 4);
            ctx.quadraticCurveTo(x + s, y + s / 2, x + s / 2, y + s);
            ctx.quadraticCurveTo(x, y + s / 2, x, y + s / 4);
            ctx.fill();
        }

        function drawHamburger(x, y, w, h) {
            // Bun top
            ctx.fillStyle = '#F4A460';
            ctx.beginPath();
            ctx.arc(x + w / 2, y + 5, w / 2, Math.PI, 0);
            ctx.fill();
            // Lettuce
            ctx.fillStyle = '#32CD32';
            ctx.fillRect(x + 5, y + 8, w - 10, 5);
            // Meat
            ctx.fillStyle = '#8B4513';
            ctx.fillRect(x + 5, y + 13, w - 10, 8);
            // Bun bottom
            ctx.fillStyle = '#D2691E';
            ctx.beginPath();
            ctx.arc(x + w / 2, y + 25, w / 2, 0, Math.PI);
            ctx.fill();
        }

        function spawnParticles(x, y, color) {
            for (let i = 0; i < 15; i++) {
                particles.push({
                    x: x,
                    y: y,
                    vx: (Math.random() - 0.5) * 8,
                    vy: (Math.random() - 0.5) * 8,
                    life: 1.0,
                    color: color
                });
            }
        }

        function update() {
            // Self-playing AI: follow ball if not playing
            if (!playing) {
                paddle.x += (ball.x - paddle.x - paddle.w / 2) * 0.15;
            } else {
                paddle.x += (mouseX - paddle.x - paddle.w / 2) * 0.2;
            }

            // Clamp paddle
            paddle.x = Math.max(0, Math.min(width - paddle.w, paddle.x));

            // Ball movement
            ball.x += ball.dx;
            ball.y += ball.dy;

            // Wall collisions
            if (ball.x < ball.radius || ball.x > width - ball.radius) ball.dx *= -1;
            if (ball.y < ball.radius) ball.dy *= -1;

            // Paddle collision
            if (ball.y + ball.radius > paddle.y && 
                ball.x > paddle.x && ball.x < paddle.x + paddle.w) {
                ball.dy = -Math.abs(ball.dy);
                // Adjust angle slightly
                ball.dx = (ball.x - (paddle.x + paddle.w / 2)) * 0.2;
            }

            // Bottom reset
            if (ball.y > height) {
                ball.x = width / 2;
                ball.y = height / 2;
                ball.dy = 5;
                initBricks();
            }

            // Brick collision
            bricks.forEach(b => {
                if (b.active && ball.x > b.x && ball.x < b.x + b.w && ball.y > b.y && ball.y < b.y + b.h) {
                    b.active = false;
                    ball.dy *= -1;
                    spawnParticles(b.x + b.w / 2, b.y + b.h / 2, b.color);
                }
            });

            // Particles
            particles.forEach((p, i) => {
                p.x += p.vx;
                p.y += p.vy;
                p.life -= 0.02;
                if (p.life <= 0) particles.splice(i, 1);
            });
        }

        function draw() {
            ctx.fillStyle = '#0f0c29';
            ctx.fillRect(0, 0, width, height);

            // Draw Bricks
            bricks.forEach(b => {
                if (b.active) {
                    ctx.fillStyle = b.color;
                    ctx.fillRect(b.x, b.y, b.w, b.h);
                    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
                    ctx.strokeRect(b.x, b.y, b.w, b.h);
                }
            });

            // Draw Hamburger Paddle
            drawHamburger(paddle.x, paddle.y, paddle.w, paddle.h);

            // Draw Ball
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();

            // Draw Particles
            particles.forEach(p => {
                ctx.fillStyle = p.color;
                ctx.globalAlpha = p.life;
                drawHeart(p.x, p.y, 15);
            });
            ctx.globalAlpha = 1.0;

            update();
            requestAnimationFrame(draw);
        }

        window.addEventListener('resize', resize);
        window.addEventListener('mousemove', e => mouseX = e.clientX);
        window.addEventListener('mousedown', () => { playing = true; ui.style.display = 'none'; });
        window.addEventListener('keydown', () => { playing = true; ui.style.display = 'none'; });

        // Init
        resize();
        ball.x = width / 2;
        ball.y = height / 2;
        requestAnimationFrame(draw);
    </script>
</body>
</html>

Reasoning trace (3,794 tokens)

**Developing core mechanics**

I'm currently focused on implementing the core game loop using `requestAnimationFrame`. My current priorities involve getting the hamburger paddle moving responsively and initiating the brick-breaking logic with the explosive heart effect, all within a single HTML file.

**Refining visual elements**

I'm prioritizing the visual representation of game entities. The hamburger paddle will be composed of arcs for buns and rectangles for lettuce and patty. For heart particles, I'm opting for drawn vector paths over emojis for consistency, ensuring a cleaner aesthetic for the explosive effect triggered by brick destruction.

**Creating particle system**

I'm now exploring how to best represent those "tons of little hearts." My current thinking leans towards a simpler, more efficient drawing method than complex paths, focusing on a particle system that spawns multiple small heart symbols upon brick destruction for a visually engaging effect.

**Simulating gameplay automatically**

I'm now integrating a self-playing demo by enabling automatic paddle movement when the game isn't started. This involves setting up a "Click to Start" overlay and ensuring the game loop continues to run, updating the paddle's position relative to the ball even before user interaction.

**Enhancing interaction logic**

I'm now integrating responsive paddle movement, adjusting `paddle.x` based on mouse or touch input when the game is active. I'm also defining distinct brick colors and preparing to address canvas resizing for a better user experience.

**Adjusting paddle dimensions**

I'm reviewing the hamburger paddle's `drawHamburger` function. The drawn height for the top bun and meat/lettuce layers needs to be adjusted to align with the 20px collision detection height specified in my logic. This ensures accurate interaction.

**Checking collision logic**

I'm currently re-evaluating the collision detection to ensure it accurately reflects the visual dimensions of the hamburger paddle. My thoughts are focused on refining the `ball.vy` reversal for paddle interactions and the `brick.active = false` state change upon impact, ensuring a robust gameplay experience.

**Refining Collision Response**

I'm actively working on the precise collision logic between the ball and the paddle. My current focus is on ensuring the `ball.vy` correctly reverses upon impact, and that bricks are marked as inactive once hit, leading to a more accurate and satisfying gameplay loop.

**Animating Hearts**

I'm focusing on the visual feedback for brick destruction. My current direction is to implement a particle system that spawns multiple small heart symbols. I'm considering how to make these hearts fade away over time to avoid screen clutter, ensuring a dynamic and clean aesthetic.

**Updating sizing strategy**

I'm currently rethinking the canvas sizing to ensure responsiveness across various viewports, from 1280x800 down to 375px. My approach involves setting `canvas.width` and `canvas.height` to `window.innerWidth` and `window.innerHeight` respectively, and handling `resize` events to adapt gracefully.

**Optimizing particle behavior**

I'm continuing to refine the particle system for brick destruction. My current focus is on ensuring these numerous small heart symbols effectively shrink and fade out over time, creating a visually pleasing and dynamic effect without overwhelming the screen.

**Scaling all elements**

I'm now dynamically scaling all game elements, including bricks and the hamburger paddle, based on the current canvas width. This ensures consistent proportions and gameplay experience across various screen sizes, avoiding issues with fixed pixel dimensions on smaller viewports.