Hamburger breakoutOne-line

Nemotron 3 Nano Omni (free)

by NVIDIAReasoningClean

Open in new window

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

How it went

Total time: 17.1 s
Cost: $0
Output tokens: 1,798
Spent thinking: 0 tokens
Speed: 108 tok/s
Console errors: 0

First token after: 481 ms
First visible text after: 481 ms
Prompt tokens: 378
Code size: 7.4 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3-nano-omni-30b-a3b-reasoning:free
Reasoning sent: {"effort":"none"}
Max output: 32,000 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 · 237 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Breakout - Hamburger Paddle & Heart Explosions</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: sans-serif;
            color: #fff;
            overflow: hidden;
        }
        #gameCanvas {
            border: 2px solid #555;
            background: #000;
        }
        #startMessage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            text-align: center;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="startMessage">Click or press a key to start</div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const WIDTH = canvas.width;
        const HEIGHT = canvas.height;

        // Game objects
        const paddle = {
            width: 100,
            height: 20,
            x: WIDTH / 2 - 50,
            y: HEIGHT - 30,
            speed: 8
        };

        const ball = {
            radius: 10,
            x: WIDTH / 2,
            y: HEIGHT / 2,
            vx: 5,
            vy: 5,
            speed: 5
        };

        const bricks = [];
        const brickRowCount = 5;
        const brickColumnCount = 10;
        const brickWidth = 75;
        const brickHeight = 20;
        const brickPadding = 10;
        const brickOffsetTop = 75;
        const brickOffsetLeft = 15;

        // Hearts
        const hearts = [];

        // Input
        const keys = {};
        window.addEventListener('keydown', e => keys[e.key] = true);
        window.addEventListener('keyup', e => keys[e.key] = false);

        // Init bricks
        for (let r = 0; r < brickRowCount; r++) {
            for (let c = 0; c < brickColumnCount; c++) {
                const brick = {
                    x: c * (brickWidth + brickPadding) + brickOffsetLeft,
                    y: r * (brickHeight + brickPadding) + brickOffsetTop,
                    status: 1
                };
                bricks.push(brick);
            }
        }

        // Heart creation function
        function createHearts(x, y) {
            const count = 15 + Math.floor(Math.random() * 10);
            for (let i = 0; i < count; i++) {
                const size = 5 + Math.random() * 10;
                const angle = Math.random() * Math.PI * 2;
                const speed = 1 + Math.random() * 3;
                hearts.push({
                    x: x + Math.random() * (brickWidth - 10) + 5,
                    y: y + Math.random() * (brickHeight - 10) + 5,
                    vx: Math.cos(angle) * speed,
                    vy: Math.sin(angle) * speed,
                    size: size,
                    alpha: 1,
                    decay: 0.02 + Math.random() * 0.01
                });
            }
        }

        // Draw everything
        function draw() {
            // Clear
            ctx.clearRect(0, 0, WIDTH, HEIGHT);

            // Draw background
            ctx.fillStyle = '#111';
            ctx.fillRect(0, 0, WIDTH, HEIGHT);

            // Draw paddle
            ctx.fillStyle = '#ff0';
            ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

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

            // Draw bricks
            ctx.fillStyle = '#0f0';
            for (let i = 0; i < bricks.length; i++) {
                const brick = bricks[i];
                if (brick.status === 1) {
                    ctx.fillRect(brick.x, brick.y, brickWidth, brickHeight);
                }
            }

            // Draw hearts
            ctx.fillStyle = '#f06';
            hearts.forEach(h => {
                ctx.globalAlpha = h.alpha;
                ctx.beginPath();
                ctx.arc(h.x, h.y, h.size, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = 1;
            });

            // Collision detection - ball and paddle
            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.vy = -ball.speed;
                // Add slight randomness
                ball.vx += (Math.random() - 0.5) * 0.5;
            }

            // Collision detection - ball and walls
            if (ball.x + ball.radius > WIDTH - 10 || ball.x - ball.radius < 10) {
                ball.vx = -ball.vx;
            }
            if (ball.y - ball.radius < 0) {
                ball.vy = -ball.vy;
            }

            // Collision detection - ball and bricks
            for (let i = 0; i < bricks.length; i++) {
                const brick = bricks[i];
                if (brick.status === 1) {
                    if (ball.x > brick.x && ball.x < brick.x + brickWidth &&
                        ball.y > brick.y && ball.y < brick.y + brickHeight) {
                        
                        ball.vy = -ball.vy;
                        brick.status = 0;
                        createHearts(brick.x + brickWidth / 2, brick.y + brickHeight / 2);
                        
                        // Remove brick from array
                        bricks.splice(i, 1);
                        i--;
                        break;
                    }
                }
            }

            // Check win condition
            if (bricks.length === 0) {
                // Reset game
                bricks.length = 0;
                for (let r = 0; r < brickRowCount; r++) {
                    for (let c = 0; c < brickColumnCount; c++) {
                        const brick = {
                            x: c * (brickWidth + brickPadding) + brickOffsetLeft,
                            y: r * (brickHeight + brickPadding) + brickOffsetTop,
                            status: 1
                        };
                        bricks.push(brick);
                    }
                }
                ball.x = WIDTH / 2;
                ball.y = HEIGHT / 2;
                ball.vx = 5;
                ball.vy = 5;
            }

            // Move ball
            ball.x += ball.vx;
            ball.y += ball.vy;

            // Remove dead hearts
            for (let i = hearts.length - 1; i >= 0; i--) {
                const h = hearts[i];
                h.x += h.vx;
                h.y += h.vy;
                h.alpha -= h.decay;
                if (h.alpha <= 0) {
                    hearts.splice(i, 1);
                }
            }

            // Draw everything again
            requestAnimationFrame(draw);
        }

        // Start the game on click or key press
        function startGame() {
            document.getElementById('startMessage').style.display = 'none';
            draw();
        }

        window.addEventListener('click', startGame);
        window.addEventListener('keydown', e => {
            if (e.key === 'Enter' || e.key === ' ') {
                startGame();
            }
        });
    </script>
</body>
</html>