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; justify-content: center; align-items: center; height: 100vh; font-family: 'Segoe UI', Tahoma, sans-serif; color: white; overflow: hidden; }
        #game-container { position: relative; }
        canvas { background: #222; border: 4px solid #444; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        #ui { position: absolute; top: 10px; left: 10px; pointer-events: none; }
        #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.7); }
        h1 { margin: 0; color: #4CAF50; }
        .hidden { display: none !important; }
    </style>
</head>
<body>

<div id="game-container">
    <div id="ui">
        <div>Score: <span id="score">0</span></div>
        <div>Best: <span id="best">0</span></div>
    </div>
    <canvas id="canvas" width="400" height="400"></canvas>
    <div id="overlay">
        <h1 id="msg">SNAKE</h1>
        <p id="submsg">Click or press any key to start</p>
    </div>
</div>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const scoreEl = document.getElementById('score');
    const bestEl = document.getElementById('best');
    const overlay = document.getElementById('overlay');
    const msg = document.getElementById('msg');
    const submsg = document.getElementById('submsg');

    const gridSize = 20;
    const tileCount = 20;
    let snake = [{x: 10, y: 10}];
    let food = {x: 15, y: 10};
    let dx = 1, dy = 0;
    let nextDx = 1, nextDy = 0;
    let score = 0, best = 0;
    let particles = [];
    let gameActive = false, paused = false, started = false;

    function reset() {
        snake = [{x: 10, y: 10}, {x: 9, y: 10}];
        dx = 1; dy = 0;
        nextDx = 1; nextDy = 0;
        score = 0;
        scoreEl.innerText = score;
        gameActive = true;
        overlay.classList.add('hidden');
    }

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

    window.addEventListener('keydown', e => {
        if (!started) { started = true; reset(); return; }
        if (e.key === 'p' || e.key === 'P') paused = !paused;
        if (e.key === ' ' || e.key === 'Enter') if (!gameActive) reset();
        
        const keyMap = { ArrowUp: [0, -1], w: [0, -1], ArrowDown: [0, 1], s: [0, 1], ArrowLeft: [-1, 0], a: [-1, 0], ArrowRight: [1, 0], d: [1, 0] };
        if (keyMap[e.key]) {
            const [ndx, ndy] = keyMap[e.key];
            if (ndx !== -dx && ndy !== -dy) { nextDx = ndx; nextDy = ndy; }
        }
    });

    function draw() {
        ctx.fillStyle = '#222';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        if (!gameActive) return;

        // Snake
        snake.forEach((s, i) => {
            ctx.fillStyle = i === 0 ? '#4CAF50' : '#388E3C';
            ctx.fillRect(s.x * gridSize, s.y * gridSize, gridSize - 2, gridSize - 2);
            if (i === 0) {
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(s.x*gridSize + (dx > 0 ? 14 : 6), s.y*gridSize + (dy > 0 ? 14 : 6), 3, 0, Math.PI*2);
                ctx.fill();
            }
        });

        // Food
        ctx.fillStyle = '#FF5252';
        ctx.beginPath();
        ctx.arc(food.x * gridSize + gridSize/2, food.y * gridSize + gridSize/2, gridSize/3, 0, Math.PI*2);
        ctx.fill();

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

    function update() {
        if (!gameActive || paused) return;

        dx = nextDx; dy = nextDy;
        const head = { x: snake[0].x + dx, y: snake[0].y + dy };

        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;
            best = Math.max(best, score);
            bestEl.innerText = best;
            msg.innerText = "GAME OVER";
            submsg.innerText = "Press Space to Restart";
            overlay.classList.remove('hidden');
            return;
        }

        snake.unshift(head);
        if (head.x === food.x && head.y === food.y) {
            score += 10;
            scoreEl.innerText = score;
            for(let i=0; i<8; i++) particles.push({x: head.x*gridSize, y: head.y*gridSize, vx: (Math.random()-0.5)*4, vy: (Math.random()-0.5)*4, life: 1});
            spawnFood();
        } else {
            snake.pop();
        }
    }

    setInterval(() => { update(); draw(); }, 100);
</script>
</body>
</html>