Gemini 3.1 Flash Lite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Burger Breakout!</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #1a1a2e;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            color: white;
            user-select: none;
        }

        #game-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            aspect-ratio: 4/3;
            background: #0f3460;
            border: 4px solid #e94560;
            box-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
            overflow: hidden;
        }

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

        #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);
            cursor: pointer;
        }

        h1 { font-size: 3rem; margin-bottom: 0.5rem; text-shadow: 2px 2px #e94560; }
        p { font-size: 1.2rem; }
    </style>
</head>
<body>

<div id="game-container">
    <canvas id="gameCanvas"></canvas>
    <div id="overlay">
        <h1>BURGER BREAKOUT</h1>
        <p>Click or press any key to start!</p>
    </div>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const overlay = document.getElementById('overlay');
    
    // Set internal canvas resolution
    canvas.width = 800;
    canvas.height = 600;

    let gameStarted = false;
    let autoPlay = true;

    // Game Objects
    const paddle = { x: 350, y: 550, w: 100, h: 40 };
    const ball = { x: 400, y: 530, dx: 4, dy: -4, radius: 8 };
    const bricks = [];
    const particles = [];
    const colors = ['#FF6B6B', '#4ECDC4', '#FFE66D', '#FF9F1C', '#A8D5BA'];

    function initBricks() {
        bricks.length = 0;
        for (let r = 0; r < 5; r++) {
            for (let c = 0; c < 8; c++) {
                bricks.push({
                    x: 50 + c * 90,
                    y: 50 + r * 40,
                    w: 80,
                    h: 30,
                    color: colors[r % colors.length],
                    active: true
                });
            }
        }
    }

    initBricks();

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

    function drawBurgerPaddle() {
        // Bun bottom
        ctx.fillStyle = '#D2691E';
        ctx.beginPath();
        ctx.roundRect(paddle.x, paddle.y + 20, paddle.w, 20, [0, 0, 10, 10]);
        ctx.fill();
        // Patty
        ctx.fillStyle = '#5D4037';
        ctx.fillRect(paddle.x + 5, paddle.y + 10, paddle.w - 10, 15);
        // Bun top
        ctx.fillStyle = '#FFB347';
        ctx.beginPath();
        ctx.roundRect(paddle.x, paddle.y, paddle.w, 20, [15, 15, 0, 0]);
        ctx.fill();
    }

    function drawHearts() {
        ctx.save();
        particles.forEach((p, index) => {
            p.x += p.dx;
            p.y += p.dy;
            p.life -= 0.02;
            
            ctx.fillStyle = p.color;
            ctx.globalAlpha = p.life;
            // Draw heart
            ctx.beginPath();
            const s = 6;
            ctx.moveTo(p.x, p.y + s/2);
            ctx.bezierCurveTo(p.x, p.y, p.x - s, p.y, p.x - s, p.y + s/2);
            ctx.bezierCurveTo(p.x - s, p.y + s, p.x, p.y + s * 1.5, p.x + s/2, p.y + s * 1.8);
            ctx.bezierCurveTo(p.x + s, p.y + s * 1.5, p.x + s * 2, p.y + s, p.x + s * 2, p.y + s/2);
            ctx.bezierCurveTo(p.x + s * 2, p.y, p.x + s, p.y, p.x + s, p.y + s/2);
            ctx.fill();
        });
        
        // Remove dead particles
        for(let i = particles.length - 1; i >= 0; i--) {
            if(particles[i].life <= 0) particles.splice(i, 1);
        }
        ctx.restore();
    }

    function update() {
        if (!gameStarted) return;

        // Auto play logic
        if (autoPlay) {
            const targetX = ball.x - paddle.w / 2;
            paddle.x += (targetX - paddle.x) * 0.15;
        }

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

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

        // Wall collisions
        if (ball.x < 0 || ball.x > canvas.width) ball.dx *= -1;
        if (ball.y < 0) 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);
            // Add spin
            ball.dx += (ball.x - (paddle.x + paddle.w/2)) * 0.1;
        }

        // Floor collision
        if (ball.y > canvas.height) {
            ball.x = 400; ball.y = 530; ball.dy = -4; ball.dx = 4;
        }

        // 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;
                createExplosion(b.x + b.w/2, b.y + b.h/2, b.color);
            }
        });
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw bricks
        bricks.forEach(b => {
            if (b.active) {
                ctx.fillStyle = b.color;
                ctx.fillRect(b.x + 2, b.y + 2, b.w - 4, b.h - 4);
            }
        });

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

        drawHearts();
        
        requestAnimationFrame(() => {
            update();
            draw();
        });
    }

    function startGame() {
        if (!gameStarted) {
            gameStarted = true;
            autoPlay = false; // Player takes control
            overlay.style.display = 'none';
        }
    }

    // Controls
    window.addEventListener('keydown', () => startGame());
    canvas.addEventListener('mousedown', () => startGame());
    canvas.addEventListener('mousemove', (e) => {
        if (gameStarted) {
            const rect = canvas.getBoundingClientRect();
            const scaleX = canvas.width / rect.width;
            paddle.x = (e.clientX - rect.left) * scaleX - paddle.w / 2;
        }
    });

    // Kickoff
    draw();
</script>
</body>
</html>