Gemini 3.1 Flash Lite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Polished Snake</title>
    <style>
        body { margin: 0; background: #1a1a1a; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; color: #eee; font-family: 'Segoe UI', sans-serif; }
        canvas { background: #000; box-shadow: 0 0 20px rgba(0,0,0,0.5); border: 4px solid #333; image-rendering: pixelated; }
        .ui { margin-bottom: 10px; text-align: center; }
        .stats { display: flex; gap: 20px; font-size: 1.2rem; font-weight: bold; }
        #overlay { position: absolute; background: rgba(0,0,0,0.85); padding: 20px; text-align: center; border-radius: 10px; display: none; }
        h1 { margin: 0 0 10px 0; color: #4CAF50; }
    </style>
</head>
<body>
    <div class="ui">
        <div class="stats">
            <div>Score: <span id="score">0</span></div>
            <div>Best: <span id="best">0</span></div>
        </div>
    </div>
    <canvas id="game" width="400" height="400"></canvas>
    <div id="overlay">
        <h1 id="msg">GAME OVER</h1>
        <p>Press SPACE or ENTER to restart</p>
    </div>

<script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const scoreEl = document.getElementById('score');
    const bestEl = document.getElementById('best');
    const overlay = document.getElementById('overlay');
    
    const gridSize = 20;
    const tileCount = 20;
    let snake = [{x: 10, y: 10}], food = {x: 5, y: 5}, vel = {x: 0, y: 0}, score = 0, best = 0, paused = false, gameActive = false, particles = [];

    function reset() {
        snake = [{x: 10, y: 10}]; vel = {x: 1, y: 0}; score = 0; scoreEl.innerText = 0;
        spawnFood(); overlay.style.display = 'none'; gameActive = true;
    }

    function spawnFood() {
        food = { x: Math.floor(Math.random()*tileCount), y: Math.floor(Math.random()*tileCount) };
        if(snake.some(s => s.x === food.x && s.y === food.y)) spawnFood();
    }

    function draw() {
        ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // Draw Food
        ctx.fillStyle = '#f44336'; ctx.beginPath(); ctx.arc((food.x+0.5)*gridSize, (food.y+0.5)*gridSize, gridSize/3, 0, Math.PI*2); ctx.fill();

        // Draw Snake
        snake.forEach((part, i) => {
            ctx.fillStyle = i === 0 ? '#4CAF50' : '#8BC34A';
            ctx.fillRect(part.x*gridSize+1, part.y*gridSize+1, gridSize-2, gridSize-2);
            if(i === 0) { // Eyes
                ctx.fillStyle = 'white';
                let ex = part.x*gridSize + (vel.x === 1 ? 14 : vel.x === -1 ? 2 : 7);
                let ey = part.y*gridSize + (vel.y === 1 ? 14 : vel.y === -1 ? 2 : 7);
                ctx.fillRect(ex, ey, 4, 4);
            }
        });

        // Particles
        particles.forEach((p, i) => {
            p.life -= 0.1; ctx.fillStyle = `rgba(244,67,54,${p.life})`;
            ctx.fillRect(p.x, p.y, 4, 4);
            p.x += p.vx; p.y += p.vy;
            if(p.life <= 0) particles.splice(i, 1);
        });
    }

    function update() {
        if(!gameActive || paused) return;
        let head = {x: snake[0].x + vel.x, y: snake[0].y + vel.y};
        if(head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || snake.some(s => s.x === head.x && s.y === head.y)) {
            gameActive = false; overlay.style.display = 'block';
            best = Math.max(best, score); bestEl.innerText = best; return;
        }
        snake.unshift(head);
        if(head.x === food.x && head.y === food.y) {
            score += 10; scoreEl.innerText = score;
            for(let i=0; i<10; i++) particles.push({x: food.x*gridSize, y: food.y*gridSize, vx: (Math.random()-0.5)*5, vy: (Math.random()-0.5)*5, life: 1});
            spawnFood();
        } else snake.pop();
        draw();
    }

    window.addEventListener('keydown', e => {
        if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','w','a','s','d',' '].includes(e.key)) e.preventDefault();
        if(e.key === ' ' || e.key === 'Enter') gameActive ? paused = !paused : reset();
        if(e.key === 'p') paused = !paused;
        if((e.key === 'ArrowUp' || e.key === 'w') && vel.y !== 1) vel = {x: 0, y: -1};
        if((e.key === 'ArrowDown' || e.key === 's') && vel.y !== -1) vel = {x: 0, y: 1};
        if((e.key === 'ArrowLeft' || e.key === 'a') && vel.x !== 1) vel = {x: -1, y: 0};
        if((e.key === 'ArrowRight' || e.key === 'd') && vel.x !== -1) vel = {x: 1, y: 0};
    });

    setInterval(update, 100);
    // AI Demo Mode
    setInterval(() => {
        if(gameActive && !paused && Math.random() > 0.7) {
            const possible = [{x:0, y:-1}, {x:0, y:1}, {x:-1, y:0}, {x:1, y:0}];
            const next = possible[Math.floor(Math.random()*4)];
            if(!(next.x === -vel.x && next.y === -vel.y)) vel = next;
        }
    }, 500);
</script>
</body>
</html>