Gemini 3.1 Flash Lite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Breakout Deluxe</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; }
        canvas { background: #000; border: 2px solid #444; box-shadow: 0 0 20px rgba(0,0,0,0.5); cursor: none; }
        #ui { position: absolute; top: 10px; left: 10px; pointer-events: none; }
        #overlay { position: absolute; text-align: center; }
        .hidden { display: none; }
    </style>
</head>
<body>
    <div id="ui">Score: <span id="score">0</span> | Lives: <span id="lives">3</span></div>
    <div id="overlay">
        <h1 id="msg">BREAKOUT DELUXE</h1>
        <p>Click or press a key to start</p>
    </div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

<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 gameActive = false, score = 0, lives = 3, balls = [], paddle = { x: 350, w: 100, h: 15 }, bricks = [], particles = [], powerups = [], keys = {}, paddleWidthBoost = 0;
    
    function init() {
        balls = [{ x: 400, y: 500, dx: 4, dy: -4, r: 8 }];
        bricks = [];
        for(let r=0; r<6; r++) for(let c=0; c<10; c++) {
            bricks.push({ x: c*75+30, y: r*30+50, w: 70, h: 20, health: r>3 ? 2 : 1, powerup: Math.random() < 0.2 ? (Math.random() < 0.5 ? 'W' : 'M') : null });
        }
    }

    window.addEventListener('keydown', e => { keys[e.code] = true; startGame(); });
    window.addEventListener('keyup', e => keys[e.code] = false);
    canvas.addEventListener('mousemove', e => paddle.x = e.clientX - canvas.offsetLeft - (paddle.w + paddleWidthBoost)/2);
    canvas.addEventListener('click', startGame);

    function startGame() { if(!gameActive) { gameActive = true; overlay.classList.add('hidden'); init(); requestAnimationFrame(loop); } }

    function loop() {
        if(!gameActive) return;
        update();
        draw();
        requestAnimationFrame(loop);
    }

    function update() {
        if(keys['ArrowLeft'] && paddle.x > 0) paddle.x -= 8;
        if(keys['ArrowRight'] && paddle.x < canvas.width - (paddle.w + paddleWidthBoost)) paddle.x += 8;
        
        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) gameOver(false); else balls.push({x:400, y:500, dx:4, dy:-4, r:8}); } }
            
            if(b.y + b.r > 580 && b.x > paddle.x && b.x < paddle.x + paddle.w + paddleWidthBoost) {
                b.dy = -Math.abs(b.dy);
                b.dx = (b.x - (paddle.x + (paddle.w+paddleWidthBoost)/2)) / 10;
            }

            bricks.forEach((br, bi) => {
                if(b.x > br.x && b.x < br.x + br.w && b.y > br.y && b.y < br.y + br.h) {
                    b.dy *= -1; br.health--; score += 10;
                    if(br.health <= 0) { 
                        if(br.powerup) powerups.push({x:br.x, y:br.y, type:br.powerup});
                        spawnParticles(br.x, br.y); bricks.splice(bi, 1); 
                    }
                }
            });
        });

        powerups.forEach((p, i) => {
            p.y += 3;
            if(p.y > 580 && p.x > paddle.x && p.x < paddle.x + paddle.w + paddleWidthBoost) {
                if(p.type === 'W') { paddleWidthBoost = 100; setTimeout(() => paddleWidthBoost = 0, 10000); }
                else { let b = balls[0]; balls.push({x:b.x, y:b.y, dx:5, dy:-5, r:8}, {x:b.x, y:b.y, dx:-5, dy:-5, r:8}); }
                powerups.splice(i, 1);
            }
        });

        scoreEl.innerText = score; livesEl.innerText = lives;
        if(bricks.length === 0) gameOver(true);
    }

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

    function draw() {
        ctx.fillStyle = '#000'; ctx.fillRect(0,0,800,600);
        ctx.fillStyle = '#fff'; ctx.fillRect(paddle.x, 580, paddle.w + paddleWidthBoost, 10);
        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.health === 2 ? '#f00' : '#0f0';
            ctx.fillRect(b.x, b.y, b.w, b.h);
            if(b.powerup) { ctx.fillStyle = '#fff'; ctx.fillText(b.powerup, b.x + 30, b.y + 15); }
        });
        powerups.forEach(p => { ctx.fillStyle = 'yellow'; ctx.fillRect(p.x, p.y, 10, 10); });
    }

    function gameOver(win) { gameActive = false; overlay.classList.remove('hidden'); msg.innerText = win ? "YOU WIN!" : "GAME OVER"; }
</script>
</body>
</html>