Gemini 3.1 Flash Lite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Breakout Pro</title>
    <style>
        body { margin: 0; background: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: sans-serif; overflow: hidden; }
        #game-container { position: relative; cursor: none; }
        canvas { background: #000; border: 4px solid #444; display: block; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        #ui { position: absolute; top: 10px; left: 10px; pointer-events: none; font-size: 20px; font-weight: bold; }
        #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.8); z-index: 10; }
        button { padding: 15px 30px; font-size: 20px; cursor: pointer; background: #e74c3c; border: none; color: white; border-radius: 5px; margin-top: 20px; }
    </style>
</head>
<body>

<div id="game-container">
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="ui">Score: <span id="score">0</span> | Lives: <span id="lives">3</span></div>
    <div id="overlay">
        <h1 id="msg">BREAKOUT PRO</h1>
        <p>Use mouse or arrow keys to move</p>
        <button onclick="startGame()">Click to Start</button>
    </div>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreEl = document.getElementById('score');
    const livesEl = document.getElementById('lives');
    const overlay = document.getElementById('overlay');
    const msgEl = document.getElementById('msg');

    let gameRunning = false;
    let score = 0, lives = 3;
    let paddle = { x: 350, w: 100, h: 20 };
    let balls = [{ x: 400, y: 550, dx: 4, dy: -4, r: 8 }];
    let bricks = [], particles = [], powerups = [];
    let keys = { ArrowLeft: false, ArrowRight: false };

    function initLevel() {
        bricks = [];
        for(let r=0; r<6; r++) {
            for(let c=0; c<10; c++) {
                bricks.push({ 
                    x: 40 + c * 72, y: 50 + r * 40, w: 64, h: 30, 
                    hp: r > 3 ? 2 : 1, maxHp: r > 3 ? 2 : 1,
                    hasPower: Math.random() > 0.8
                });
            }
        }
    }

    window.addEventListener('keydown', e => keys[e.code] = true);
    window.addEventListener('keyup', e => keys[e.code] = false);
    canvas.addEventListener('mousemove', e => {
        let rect = canvas.getBoundingClientRect();
        paddle.x = (e.clientX - rect.left) - paddle.w/2;
    });

    function startGame() {
        gameRunning = true;
        overlay.style.display = 'none';
        score = 0; lives = 3;
        initLevel();
        loop();
    }

    function createParticles(x, y, color) {
        for(let i=0; i<8; i++) particles.push({ x, y, dx: Math.random()*4-2, dy: Math.random()*4-2, life: 30, color });
    }

    function update() {
        if (!gameRunning) return;
        
        // AI for demo
        if (balls.length > 0) {
            let target = balls[0].x;
            if (target < paddle.x + paddle.w/2) paddle.x -= 7;
            if (target > paddle.x + paddle.w/2) paddle.x += 7;
        }

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

        balls.forEach((b, i) => {
            b.x += b.dx; b.y += b.dy;
            if(b.x < b.r || b.x > canvas.width - b.r) b.dx *= -1;
            if(b.y < b.r) b.dy *= -1;
            
            if(b.y > canvas.height) {
                balls.splice(i, 1);
                if(balls.length === 0) {
                    lives--;
                    if(lives <= 0) { gameRunning = false; msgEl.innerText = "GAME OVER"; overlay.style.display = 'flex'; }
                    else balls.push({ x: 400, y: 550, dx: 4, dy: -4, r: 8 });
                }
            }

            // Paddle collision
            if(b.y + b.r > 570 && b.y < 590 && b.x > paddle.x && b.x < paddle.x + paddle.w) {
                let hitPos = (b.x - (paddle.x + paddle.w/2)) / (paddle.w/2);
                b.dx = hitPos * 8;
                b.dy = -Math.abs(b.dy);
            }

            // Brick collision
            bricks.forEach((brick, bi) => {
                if(b.x > brick.x && b.x < brick.x + brick.w && b.y > brick.y && b.y < brick.y + brick.h) {
                    b.dy *= -1;
                    brick.hp--;
                    createParticles(brick.x+brick.w/2, brick.y+brick.h/2, brick.hp > 0 ? '#aaa' : '#e74c3c');
                    if(brick.hp <= 0) {
                        if(brick.hasPower) powerups.push({ x: brick.x, y: brick.y, type: Math.random() > 0.5 ? 'wide' : 'multi' });
                        bricks.splice(bi, 1);
                        score += 10;
                    }
                }
            });
        });

        powerups.forEach((p, i) => {
            p.y += 3;
            if(p.y > 570 && p.x > paddle.x && p.x < paddle.x + paddle.w) {
                if(p.type === 'wide') { paddle.w = 200; setTimeout(() => paddle.w = 100, 10000); }
                else { let b = balls[0]; balls.push({...b, dx: -b.dx}, {...b, dy: -b.dy}); }
                powerups.splice(i, 1);
            }
        });
        
        particles.forEach((p, i) => { p.x += p.dx; p.y += p.dy; p.life--; if(p.life <= 0) particles.splice(i, 1); });
        scoreEl.innerText = score; livesEl.innerText = lives;
    }

    function draw() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.fillStyle = '#fff';
        ctx.fillRect(paddle.x, 570, paddle.w, paddle.h);
        balls.forEach(b => { ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, Math.PI*2); ctx.fill(); });
        bricks.forEach(b => {
            ctx.fillStyle = b.hp > 1 ? '#f1c40f' : '#3498db';
            ctx.fillRect(b.x, b.y, b.w, b.h);
            if(b.hp > 1) { ctx.strokeStyle = 'black'; ctx.strokeRect(b.x+10, b.y+10, b.w-20, b.h-20); }
        });
        powerups.forEach(p => { ctx.fillStyle = 'lime'; ctx.fillRect(p.x, p.y, 20, 20); });
        particles.forEach(p => { ctx.fillStyle = p.color; ctx.fillRect(p.x, p.y, 3, 3); });
    }

    function loop() {
        if(!gameRunning) return;
        update();
        draw();
        requestAnimationFrame(loop);
    }
</script>
</body>
</html>