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; background: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: sans-serif; color: white; }
        #gameContainer { position: relative; width: 100%; max-width: 800px; aspect-ratio: 16/9; border: 4px solid #444; box-shadow: 0 0 20px rgba(0,0,0,0.5); background: #222; }
        canvas { display: block; width: 100%; height: 100%; cursor: none; }
        #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.6); flex-direction: column; }
    </style>
</head>
<body>
    <div id="gameContainer">
        <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');
    
    canvas.width = 800;
    canvas.height = 450;

    let playing = false;
    let demoMode = true;

    const ball = { x: 400, y: 350, dx: 4, dy: -4, radius: 8 };
    const paddle = { x: 350, width: 100, height: 30 };
    const bricks = [];
    const particles = [];

    function initBricks() {
        for(let c=0; c<8; c++) {
            for(let r=0; r<4; r++) {
                bricks.push({ x: c * 95 + 35, y: r * 40 + 50, w: 80, h: 20, active: true, color: `hsl(${r*60}, 70%, 60%)` });
            }
        }
    }

    function drawBurger(x, y, w, h) {
        // Bun
        ctx.fillStyle = '#D2691E';
        ctx.fillRect(x, y + 10, w, h - 10);
        ctx.beginPath(); ctx.arc(x + w/2, y + 10, w/2, Math.PI, 0); ctx.fill();
        // Patty
        ctx.fillStyle = '#4B2E2A';
        ctx.fillRect(x + 5, y + 15, w - 10, 8);
        // Lettuce
        ctx.fillStyle = '#228B22';
        ctx.fillRect(x, y + 23, w, 4);
    }

    function createExplosion(x, y) {
        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
            });
        }
    }

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

        if (demoMode) paddle.x = ball.x - paddle.width / 2;

        ball.x += ball.dx;
        ball.y += ball.dy;

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

        if (ball.y > canvas.height) {
            if (demoMode) { ball.y = 350; ball.dy = -4; }
            else { playing = false; overlay.style.display = 'flex'; }
        }

        // Paddle Collision
        if (ball.y + ball.radius > canvas.height - 50 && ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
            ball.dy = -Math.abs(ball.dy);
            ball.dx += (ball.x - (paddle.x + paddle.width/2)) * 0.1;
        }

        // 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);
            }
        });

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

    function draw() {
        ctx.clearRect(0,0, canvas.width, canvas.height);
        
        bricks.forEach(b => { if(b.active) { ctx.fillStyle = b.color; ctx.fillRect(b.x, b.y, b.w, b.h); } });
        
        ctx.fillStyle = 'white';
        ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); ctx.fill();
        
        drawBurger(paddle.x, canvas.height - 50, paddle.width, paddle.height);

        ctx.font = "20px Arial";
        particles.forEach(p => {
            ctx.globalAlpha = p.life;
            ctx.fillText('❤️', p.x, p.y);
        });
        ctx.globalAlpha = 1.0;

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

    canvas.addEventListener('mousemove', e => {
        if (!demoMode) {
            const rect = canvas.getBoundingClientRect();
            paddle.x = (e.clientX - rect.left) * (canvas.width / rect.width) - paddle.width / 2;
        }
    });

    function start() {
        if (!playing) {
            playing = true;
            demoMode = false;
            overlay.style.display = 'none';
        }
    }

    window.addEventListener('keydown', start);
    canvas.addEventListener('mousedown', start);

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