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; width: 800px; max-width: 95vw; height: 600px; border: 4px solid #444; background: #000; cursor: none; }
        canvas { display: block; width: 100%; height: 100%; }
        #ui { position: absolute; top: 10px; left: 10px; pointer-events: none; font-size: 20px; font-weight: bold; }
        #overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; }
        button { padding: 15px 30px; font-size: 20px; cursor: pointer; background: #4a90e2; border: none; color: white; border-radius: 5px; margin-top: 20px; }
    </style>
</head>
<body>
<div id="game-container">
    <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>
        <button onclick="startGame()">Click to Start</button>
    </div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
</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 msg = document.getElementById('msg');

    let balls = [], paddle, bricks = [], particles = [], powerups = [], score = 0, lives = 3, gameRunning = false, autoPlay = true;

    class Paddle {
        constructor() { this.w = 100; this.h = 15; this.x = 350; this.y = 550; this.ext = 0; }
        draw() { 
            ctx.fillStyle = this.ext > 0 ? '#f0f' : '#4a90e2';
            ctx.fillRect(this.x, this.y, this.w + this.ext, this.h); 
        }
    }

    class Ball {
        constructor(x, y, dx, dy) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.r = 7; }
        draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI*2); ctx.fillStyle = 'white'; ctx.fill(); }
        update() {
            this.x += this.dx; this.y += this.dy;
            if (this.x < this.r || this.x > 800-this.r) this.dx *= -1;
            if (this.y < this.r) this.dy *= -1;
            if (this.y > 600) return false;
            
            let pW = paddle.w + paddle.ext;
            if (this.y + this.r > paddle.y && this.y < paddle.y + paddle.h && this.x > paddle.x && this.x < paddle.x + pW) {
                let hitPoint = (this.x - (paddle.x + pW/2)) / (pW/2);
                this.dx = hitPoint * 6; this.dy = -Math.abs(this.dy);
            }
            return true;
        }
    }

    function initLevel() {
        bricks = [];
        for(let r=0; r<6; r++) {
            for(let c=0; c<10; c++) {
                let health = (r + c) % 4 === 0 ? 2 : 1;
                bricks.push({x: c*80, y: r*40 + 50, w: 78, h: 38, health, maxH: health, power: Math.random() < 0.2 ? (Math.random() < 0.5 ? 'W' : 'M') : null});
            }
        }
    }

    function startGame() { 
        overlay.style.display = 'none'; gameRunning = true; autoPlay = false; score = 0; lives = 3; 
        balls = [new Ball(400, 540, 3, -5)]; paddle = new Paddle(); initLevel();
    }

    document.addEventListener('mousemove', e => {
        let rect = canvas.getBoundingClientRect();
        paddle.x = (e.clientX - rect.left) / (rect.width/800) - (paddle.w + paddle.ext)/2;
    });

    function update() {
        if (!gameRunning) return;
        if (autoPlay) paddle.x = balls[0].x - (paddle.w+paddle.ext)/2;
        
        balls = balls.filter(b => b.update());
        if (balls.length === 0) {
            lives--; livesEl.textContent = lives;
            if (lives <= 0) { gameRunning = false; overlay.style.display = 'flex'; msg.textContent = "GAME OVER"; }
            else balls.push(new Ball(400, 540, 3, -5));
        }

        bricks.forEach((b, i) => {
            balls.forEach(ball => {
                if (ball.x > b.x && ball.x < b.x+b.w && ball.y > b.y && ball.y < b.y+b.h) {
                    ball.dy *= -1; b.health--; score += 10;
                    if (b.health <= 0) {
                        if (b.power) powerups.push({x: b.x + 30, y: b.y, type: b.power});
                        bricks.splice(i, 1);
                        for(let k=0; k<10; k++) particles.push({x: b.x+b.w/2, y: b.y+b.h/2, dx: (Math.random()-0.5)*5, dy: (Math.random()-0.5)*5, life: 30});
                    }
                }
            });
        });

        powerups.forEach((p, i) => {
            p.y += 3;
            if (p.y > paddle.y && p.y < paddle.y+paddle.h && p.x > paddle.x && p.x < paddle.x+paddle.w+paddle.ext) {
                if (p.type === 'W') { paddle.ext = 100; setTimeout(() => paddle.ext = 0, 10000); }
                else { let b = balls[0]; balls.push(new Ball(b.x, b.y, -b.dx, b.dy), new Ball(b.x, b.y, 0, 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.textContent = score;
    }

    function draw() {
        ctx.fillStyle = 'black'; ctx.fillRect(0,0,800,600);
        paddle.draw();
        balls.forEach(b => b.draw());
        bricks.forEach(b => {
            ctx.fillStyle = b.health > 1 ? '#e74c3c' : '#2ecc71';
            ctx.fillRect(b.x, b.y, b.w, b.h);
            if (b.health > 1) { ctx.strokeStyle = 'white'; ctx.strokeRect(b.x+10, b.y+10, b.w-20, b.h-20); }
            if (b.power) { ctx.fillStyle = 'white'; ctx.fillText(b.power, b.x+35, b.y+25); }
        });
        powerups.forEach(p => { ctx.fillStyle = 'yellow'; ctx.fillRect(p.x, p.y, 10, 10); });
        particles.forEach(p => { ctx.fillStyle = 'orange'; ctx.fillRect(p.x, p.y, 3, 3); });
        requestAnimationFrame(() => { update(); draw(); });
    }
    draw();
</script>
</body>
</html>