Hamburger breakoutOne-line

LFM2.5-2.6B (free)

by LiquidAIreasoning defaultClean

Open in new window

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

How it went

Total time: 26.0 s
Cost: $0
Output tokens: 3,545
Spent thinking: 411 tokens
Speed: 142.9 tok/s
Console errors: 0

First token after: 1.2 s
First visible text after: 6.1 s
Prompt tokens: 377
Code size: 12.6 KB
Finish reason: stop
Served by: Liquid
Model id: liquid/lfm-2.5-2.6b:free
Reasoning sent: model default
Max output: 8,192 tokens
Generated: Nov 9, 2026

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 · 408 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 {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: #1a1a2e;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: opacity 0.4s;
        }

        .overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        h1 {
            color: #e94560;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
        }

        .start-btn {
            padding: 1rem 3rem;
            font-size: 1.2rem;
            color: #fff;
            background: linear-gradient(135deg, #e94560, #c73e54);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .start-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(233, 69, 96, 0.6);
        }

        .instructions {
            margin-top: 1.5rem;
            color: #aaa;
            font-size: 0.9rem;
        }

        .heart-count {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 1.5rem;
            color: #ff6b9d;
            font-weight: bold;
        }

        #paddle {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 20px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ff6b9d 100%);
            border-radius: 10px;
            cursor: pointer;
            z-index: 5;
            transition: transform 0.1s;
        }

        #paddle:hover {
            transform: translateX(-50%) scale(1.1);
        }

        .pulse {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 10px rgba(233, 69, 96, 0.4); }
            50% { box-shadow: 0 0 25px rgba(233, 69, 96, 0.8); }
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <div class="overlay" id="overlay">
        <h1>Hamburger Breakout</h1>
        <p class="instructions">Click or press a key to start</p>
        <button class="start-btn" id="startBtn">Start Game</button>
        <div class="heart-count" id="heartCount">Hearts: 0</div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const overlay = document.getElementById('overlay');
        const startBtn = document.getElementById('startBtn');
        const heartCountEl = document.getElementById('heartCount');

        // Game state
        let gameState = 'start'; // start, playing, gameover
        let score = 0;
        let hearts = 0;
        let particles = [];

        // Paddle (hamburger)
        const paddle = {
            x: canvas.width / 2 - 40,
            width: 80,
            height: 20,
            y: canvas.height - 40,
            widthRange: 60,
            speed: 8,
            targetX: canvas.width / 2 - 40
        };

        // Bricks array
        let bricks = [];

        // Initialize canvas
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // Generate bricks
        function createBricks() {
            bricks = [];
            const colors = ['#ff6b9d', '#ffa07a', '#ff69b4', '#ff1493'];
            const brickRowCount = 6;
            const brickColCount = 8;

            for (let row = 0; row < brickRowCount; row++) {
                for (let col = 0; col < brickColCount; col++) {
                    const x = col * 90 + 10;
                    const y = row * 30 + 60;
                    const isAlive = Math.random() > 0.15;
                    if (isAlive) {
                        bricks.push({
                            x: x,
                            y: y,
                            width: 70,
                            height: 25,
                            color: colors[Math.floor(Math.random() * colors.length)],
                            alive: true,
                            row: row,
                            col: col
                        });
                    }
                }
            }
        }

        // Create heart particle
        function createHeartParticle(x, y) {
            const colors = ['#ff6b9d', '#ffa07a', '#ff69b4', '#ff1493'];
            const particle = {
                x: x,
                y: y,
                vx: (Math.random() - 0.5) * 6,
                vy: -2 - Math.random() * 4,
                size: Math.random() * 8 + 4,
                color: colors[Math.floor(Math.random() * colors.length)],
                life: 1.0,
                decay: 0.02
            };
            particles.push(particle);
        }

        // Spawn hearts when brick is destroyed
        function spawnHeartsAt(x, y) {
            const count = 15 + Math.floor(Math.random() * 10);
            for (let i = 0; i < count; i++) {
                createHeartParticle(x, y);
            }
            hearts += count;
            heartCountEl.textContent = `Hearts: ${hearts}`;
        }

        // Update particles
        function updateParticles() {
            for (let i = particles.length - 1; i >= 0; i--) {
                const p = particles[i];
                p.x += p.vx;
                p.y += p.vy;
                p.vy += 0.1; // gravity
                p.life -= p.decay;
                if (p.life <= 0) {
                    particles.splice(i, 1);
                }
            }
        }

        // Draw heart particle
        function drawHeartParticle(p) {
            ctx.save();
            ctx.globalAlpha = p.life;
            ctx.fillStyle = p.color;
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
        }

        // Draw brick
        function drawBrick(brick) {
            if (!brick.alive) return;
            ctx.save();
            ctx.fillStyle = brick.color;
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            // Rounded top
            ctx.beginPath();
            ctx.moveTo(brick.x + 5, brick.y);
            ctx.lineTo(brick.x + brick.width - 5, brick.y + brick.height);
            ctx.quadraticCurveTo(brick.x + brick.width, brick.y + brick.height, brick.x + brick.width, brick.y + brick.height - 5);
            ctx.lineTo(brick.x + brick.width, brick.y + brick.height + 5);
            ctx.quadraticCurveTo(brick.x + brick.width - 5, brick.y + brick.height + 5, brick.x + brick.width - 5, brick.y + brick.height);
            ctx.lineTo(brick.x + 5, brick.y + brick.height + 5);
            ctx.quadraticCurveTo(brick.x, brick.y + brick.height + 5, brick.x, brick.y + 5);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            ctx.restore();
        }

        // Update bricks
        function updateBricks() {
            for (let i = bricks.length - 1; i >= 0; i--) {
                const b = bricks[i];
                b.y += 0.8;

                // Check if brick is off screen
                if (b.y + b.height > canvas.height) {
                    b.alive = false;
                    spawnHeartsAt(b.x, b.y);
                    hearts--;
                    if (hearts <= 0) {
                        gameState = 'gameover';
                        overlay.classList.add('hidden');
                        return;
                    }
                }

                // Check paddle collision
                if (b.x < paddle.x + paddle.width &&
                    b.x + b.width > paddle.x &&
                    b.y < paddle.y + paddle.height &&
                    b.y + b.height > paddle.y) {
                    // Paddle hit!
                    b.alive = false;
                    spawnHeartsAt(paddle.x + paddle.width / 2, b.y + b.height / 2);
                    hearts++;
                    score += 10;
                    createHeartParticle(paddle.x + paddle.width / 2, b.y + b.height / 2);
                    updateParticles();
                    // Remove brick
                    bricks.splice(i, 1);
                }
            }
        }

        // Move paddle
        function movePaddle(direction) {
            paddle.targetX = paddle.x + direction * paddle.speed;
            paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, paddle.targetX));
        }

        // AI movement (simple follow with some randomness)
        function updateAI() {
            // AI tries to stay above bricks
            const minY = 50;
            const maxY = canvas.height - 60;
            const targetY = Math.min(maxY, Math.max(minY, paddle.y + 10));

            if (paddle.y < targetY) {
                paddle.y += 1;
            } else if (paddle.y > targetY - 5) {
                paddle.y -= 1;
            }
        }

        // Game loop
        function gameLoop() {
            if (gameState === 'playing') {
                updateBricks();
                updateParticles();
                movePaddle(0); // auto-move paddle slightly
                updateAI();
            }

            // Draw everything
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw paddle (hamburger style)
            ctx.save();
            ctx.fillStyle = '#f093fb';
            ctx.beginPath();
            ctx.moveTo(paddle.x + 10, paddle.y);
            ctx.lineTo(paddle.x + paddle.width - 10, paddle.y + 15);
            ctx.lineTo(paddle.x + paddle.width - 5, paddle.y + 5);
            ctx.lineTo(paddle.x + 5, paddle.y + 15);
            ctx.closePath();
            ctx.fill();
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.restore();

            // Draw bricks
            for (const b of bricks) {
                drawBrick(b);
            }

            // Draw particles
            for (const p of particles) {
                drawHeartParticle(p);
            }

            // Draw score
            ctx.fillStyle = '#fff';
            ctx.font = 'bold 24px Segoe UI, sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText(`Score: ${score}`, canvas.width / 2, 50);

            if (gameState === 'gameover') {
                ctx.fillStyle = '#333';
                ctx.font = 'bold 48px Segoe UI, sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 50);
                ctx.fillStyle = '#e94560';
                ctx.font = '24px Segoe UI, sans-serif';
                ctx.fillText('Press Start or Click to Play', canvas.width / 2, canvas.height / 2 + 20);
            }

            requestAnimationFrame(gameLoop);
        }

        // Start game
        function startGame() {
            gameState = 'playing';
            score = 0;
            hearts = 0;
            particles = [];
            bricks = [];
            createBricks();
            overlay.classList.add('hidden');
            startBtn.disabled = false;
        }

        // Handle start button
        startBtn.addEventListener('click', startGame);

        // Handle keyboard input
        document.addEventListener('keydown', (e) => {
            if (gameState === 'start') {
                startGame();
            }
        });

        // Handle click on canvas (for paddle movement)
        canvas.addEventListener('click', (e) => {
            if (gameState === 'playing') {
                movePaddle(1);
            }
        });

        // Handle click on overlay to start
        overlay.addEventListener('click', startGame);

        // Start the game loop
        gameLoop();
    </script>
</body>
</html>

Reasoning trace (411 tokens)

The user wants a breakout game with specific features:
1. Paddle is a hamburger (icon-style)
2. Every brick broken explodes into hearts
3. Self-playing demo mode (AI plays)
4. "Click or press a key to start" message initially
5. Must be self-contained HTML file with no external dependencies (except allowed CDNs)
6. Responsive design (1280×800 viewport, adapts to 375px)
7. Something visible immediately (hearts exploding from bricks)

Let me create a complete, self-contained HTML file with:
- A hamburger-style paddle
- Bricks that break and explode into hearts
- AI-controlled paddle (simple movement)
- Heart particles on brick destruction
- Start screen with "Click or press a key to start"
- Responsive design

I'll use vanilla HTML/CSS/JS with no external libraries (except maybe a CDN for fonts if needed, but I'll stick to system fonts to be safe).

Key elements:
- Canvas for the game
- Heart particles that animate and fall
- Bricks that move and break
- Paddle (hamburger icon) that moves left/right
- AI logic for paddle movement
- Start screen overlay

Let me design this carefully:

1. HTML structure: canvas element, overlay for start screen
2. CSS: responsive design, hamburger paddle styling, heart particle styling
3. JS: game logic, particle system, brick generation, collision detection, AI paddle movement

The hamburger paddle - I'll create a stylized hamburger icon that acts as the paddle. It should be visible and functional.

For the hearts, I'll create particle effects when bricks are destroyed - small heart-shaped particles that float up and fade.

Let me write the code: