Gemini 3.1 Flash Lite

by GoogleReasoningClean

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

How it went

Total time: 15.2 s
Cost: $0.0081
Output tokens: 5,318
Spent thinking: 1,964 tokens
Speed: 371.5 tok/s
Console errors: 0

First token after: 879 ms
First visible text after: 7.6 s
Prompt tokens: 524
Code size: 10.3 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

What it was asked

The prompt

Build a polished Breakout (brick breaker) game in a single HTML file using vanilla JavaScript and a <canvas>. Requirements: - A paddle controlled with the mouse and with the left/right arrow keys. - The bounce angle off the paddle depends on where the ball hits it (center = straight up, edges = sharp angle). - One level with at least 6 rows of bricks, mixing normal bricks and tougher bricks that need 2 hits and visibly crack after the first one. - Some bricks visibly carry a power-up icon; when broken they drop it, and catching it with the paddle gives either a wider paddle (10 seconds) or multi-ball (3 balls). - The ball must never pass through bricks or the paddle. - Particles when a brick breaks. - 3 lives, score displayed. Game over and victory screens with a restart option.

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 · 326 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Breakout</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #0f0f13;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            touch-action: none;
        }
        #game-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            aspect-ratio: 4 / 3;
            background: #1a1a2e;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            border: 2px solid #333;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        #ui-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(0,0,0,0.7);
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .ui-hidden { opacity: 0; }
        h1 { margin: 0 0 10px 0; font-size: 3rem; color: #00d2ff; text-shadow: 0 0 10px #00d2ff; }
        p { font-size: 1.2rem; margin: 5px 0; }
        .controls-hint { color: #888; font-size: 0.9rem; margin-top: 20px; }
    </style>
</head>
<body>

<div id="game-container">
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="ui-overlay">
        <h1 id="ui-title">NEON BREAKOUT</h1>
        <p id="ui-msg">Click or press any key to start</p>
        <div class="controls-hint">Mouse or Arrows to move</div>
    </div>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const overlay = document.getElementById('ui-overlay');
    const uiTitle = document.getElementById('ui-title');
    const uiMsg = document.getElementById('ui-msg');

    // Game Config
    const PADDLE_HEIGHT = 15;
    const PADDLE_WIDTH_DEFAULT = 100;
    const BALL_RADIUS = 6;
    const BRICK_ROWS = 6;
    const BRICK_COLS = 8;
    const BRICK_HEIGHT = 30;
    
    let gameActive = false;
    let autoPlay = true;
    let lives = 3;
    let score = 0;
    let paddleWidth = PADDLE_WIDTH_DEFAULT;
    
    let paddle = { x: 350, y: 550, width: PADDLE_WIDTH_DEFAULT, height: PADDLE_HEIGHT, speed: 10 };
    let balls = [{ x: 400, y: 540, dx: 4, dy: -4, speed: 6 }];
    let bricks = [];
    let particles = [];
    let powerups = [];
    let keys = { left: false, right: false };

    // Initialization
    function initBricks() {
        bricks = [];
        const padding = 10;
        const width = (canvas.width - (BRICK_COLS + 1) * padding) / BRICK_COLS;
        for (let r = 0; r < BRICK_ROWS; r++) {
            for (let c = 0; c < BRICK_COLS; c++) {
                bricks.push({
                    x: padding + c * (width + padding),
                    y: 50 + r * (BRICK_HEIGHT + padding),
                    w: width,
                    h: BRICK_HEIGHT,
                    hits: (r % 2 === 0) ? 1 : 2,
                    maxHits: (r % 2 === 0) ? 1 : 2,
                    hasPowerUp: Math.random() < 0.2
                });
            }
        }
    }

    // Input
    window.addEventListener('keydown', e => {
        if (!gameActive) startGame();
        if (e.key === 'ArrowLeft') keys.left = true;
        if (e.key === 'ArrowRight') keys.right = true;
    });
    window.addEventListener('keyup', e => {
        if (e.key === 'ArrowLeft') keys.left = false;
        if (e.key === 'ArrowRight') keys.right = false;
    });
    canvas.addEventListener('mousemove', e => {
        if (!gameActive) startGame();
        const rect = canvas.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const scaleX = canvas.width / rect.width;
        paddle.x = (mouseX * scaleX) - (paddle.width / 2);
    });
    canvas.addEventListener('mousedown', () => startGame());

    function startGame() {
        if (gameActive) return;
        gameActive = true;
        autoPlay = false;
        lives = 3;
        score = 0;
        paddleWidth = PADDLE_WIDTH_DEFAULT;
        paddle.width = paddleWidth;
        balls = [{ x: 400, y: 540, dx: 4, dy: -4, speed: 6 }];
        particles = [];
        powerups = [];
        initBricks();
        overlay.classList.add('ui-hidden');
    }

    function gameOver(won) {
        gameActive = false;
        autoPlay = true;
        overlay.classList.remove('ui-hidden');
        uiTitle.innerText = won ? "VICTORY!" : "GAME OVER";
        uiMsg.innerText = `Final Score: ${score}. Click to restart`;
    }

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

    function update() {
        if (autoPlay) {
            // Simple AI
            const target = balls[0] ? balls[0].x : canvas.width/2;
            paddle.x += (target - (paddle.x + paddle.width/2)) * 0.1;
        } else {
            if (keys.left) paddle.x -= paddle.speed;
            if (keys.right) paddle.x += paddle.speed;
        }

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

        // Update Balls
        balls.forEach((ball, bIdx) => {
            ball.x += ball.dx;
            ball.y += ball.dy;

            // Walls
            if (ball.x < BALL_RADIUS || ball.x > canvas.width - BALL_RADIUS) ball.dx *= -1;
            if (ball.y < BALL_RADIUS) ball.dy *= -1;

            // Paddle
            if (ball.y + BALL_RADIUS > paddle.y && ball.y < paddle.y + paddle.height &&
                ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
                ball.y = paddle.y - BALL_RADIUS;
                ball.dy = -Math.abs(ball.dy);
                
                // Angle based on hit point
                let hitPoint = (ball.x - (paddle.x + paddle.width/2)) / (paddle.width/2);
                ball.dx = hitPoint * 6;
            }

            // Floor
            if (ball.y > canvas.height) {
                balls.splice(bIdx, 1);
                if (balls.length === 0) {
                    lives--;
                    if (lives > 0) {
                        balls.push({ x: 400, y: 540, dx: 4, dy: -4, speed: 6 });
                    } else {
                        gameOver(false);
                    }
                }
            }

            // Bricks
            bricks.forEach((b, i) => {
                if (b.hits > 0 && ball.x > b.x && ball.x < b.x + b.w && ball.y > b.y && ball.y < b.y + b.h) {
                    ball.dy *= -1;
                    b.hits--;
                    score += 10;
                    
                    if (b.hits === 0) {
                        createParticle(b.x + b.w/2, b.y + b.h/2, '#00d2ff');
                        if (b.hasPowerUp) {
                            powerups.push({ x: b.x + b.w/2, y: b.y + b.h/2, type: Math.random() > 0.5 ? 'WIDE' : 'MULTI' });
                        }
                        bricks.splice(i, 1);
                    } else {
                        createParticle(b.x + b.w/2, b.y + b.h/2, '#555');
                    }
                }
            });
        });

        if (bricks.length === 0 && gameActive) gameOver(true);

        // Powerups
        powerups.forEach((p, i) => {
            p.y += 3;
            if (p.y > paddle.y && p.y < paddle.y + paddle.height && p.x > paddle.x && p.x < paddle.x + paddle.width) {
                if (p.type === 'WIDE') {
                    paddleWidth = 150;
                    paddle.width = 150;
                    setTimeout(() => { paddleWidth = PADDLE_WIDTH_DEFAULT; paddle.width = PADDLE_WIDTH_DEFAULT; }, 10000);
                } else {
                    const b = balls[0];
                    balls.push({ x: b.x, y: b.y, dx: -b.dx, dy: b.dy, speed: b.speed });
                }
                powerups.splice(i, 1);
            }
        });

        // 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 = '#1a1a2e';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

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

        // Bricks
        bricks.forEach(b => {
            ctx.fillStyle = b.hits === 2 ? '#ff9e00' : '#00d2ff';
            ctx.fillRect(b.x, b.y, b.w, b.h);
            if (b.hits === 2) {
                ctx.strokeStyle = '#fff';
                ctx.beginPath();
                ctx.moveTo(b.x + 5, b.y + 5); ctx.lineTo(b.x + b.w - 5, b.y + b.h - 5);
                ctx.stroke();
            }
            if (b.hasPowerUp) {
                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.fillText('?', b.x + b.w/2 - 3, b.y + b.h/2 + 4);
            }
        });

        // Balls
        ctx.fillStyle = '#fff';
        balls.forEach(b => {
            ctx.beginPath();
            ctx.arc(b.x, b.y, BALL_RADIUS, 0, Math.PI * 2);
            ctx.fill();
        });

        // Powerups
        powerups.forEach(p => {
            ctx.fillStyle = p.type === 'WIDE' ? '#ffff00' : '#00ff00';
            ctx.fillRect(p.x - 5, p.y - 5, 10, 10);
        });

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

        // UI
        ctx.fillStyle = 'white';
        ctx.font = '20px Arial';
        ctx.fillText(`Score: ${score}`, 10, 30);
        ctx.fillText(`Lives: ${lives}`, canvas.width - 100, 30);
    }

    function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
    }

    initBricks();
    loop();
</script>
</body>
</html>

Reasoning trace (1,964 tokens)

**Devising Game Structure**

I'm currently outlining the core components for a self-contained Breakout game. My focus is on setting up the canvas, defining game objects like the paddle and ball, and establishing the initial game loop for rendering and basic physics.

**Implementing Game Elements**

I'm now working on integrating essential mechanics. This involves refining paddle control with both mouse and keyboard input, implementing variable bounce physics for the ball, and designing the multi-hit brick system with visual feedback. I'm also developing the power-up drop logic.

**Refining Core Mechanics**

I'm refining collision detection, particularly the ball's interaction with the paddle to achieve varied bounces. I'm also detailing the brick hit logic and how to manage their destruction and potential power-up drops.

**Controlling Ball Trajectory**

I'm now focusing on the nuances of ball physics and game states. This includes implementing a variable bounce angle based on where the ball hits the paddle, and how to handle tough bricks that require multiple hits. I'm also planning the logic for power-up drops.

**Modifying Paddle Behavior**

I'm adjusting the paddle's width, introducing a timed shrink effect after a power-up. I'm also beginning to draft the code, focusing on a clean game loop with update and draw functions, and ensuring robust collision response to prevent ball entrapment.

**Assembling Final Code**

I'm now focused on integrating all developed components into a cohesive, single-file structure. My priorities include refining input handling for both mouse and keyboard, ensuring responsiveness with CSS, and adding polish like particle effects and color transitions. I'm also setting up a demo mode.