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; color: #eee; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
        canvas { background: #222; box-shadow: 0 0 20px rgba(0,0,0,0.5); border: 2px solid #444; }
        .ui { position: absolute; text-align: center; pointer-events: none; }
        #overlay { background: rgba(0,0,0,0.8); padding: 20px; border-radius: 10px; display: none; }
        h1 { margin: 0 0 10px; }
        .stats { display: flex; gap: 20px; margin-bottom: 10px; font-weight: bold; }
    </style>
</head>
<body>
    <div class="stats"><span>Score: <span id="score">0</span></span><span>Best: <span id="best">0</span></span></div>
    <canvas id="gameCanvas"></canvas>
    <div id="overlay" class="ui">
        <h1 id="msg">GAME OVER</h1>
        <p>Press Space or Enter to restart</p>
    </div>
    <div id="startScreen" class="ui">
        <h1>SNAKE</h1>
        <p>Click or press a key to start</p>
    </div>

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

    const gridSize = 20;
    const tileCount = 20;
    canvas.width = canvas.height = gridSize * tileCount;

    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 gameActive = false, paused = false;
    let particles = [];

    function reset() {
        snake = [{x: 10, y: 10}];
        dx = 1; dy = 0; nextDx = 1; nextDy = 0;
        score = 0; scoreEl.innerText = score;
        particles = [];
        overlay.style.display = 'none';
        startScreen.style.display = 'none';
        gameActive = true;
    }

    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 (!gameActive && (e.code === 'Space' || e.code === 'Enter')) reset();
        if (e.code === 'KeyP') paused = !paused;
        if (!gameActive) return;
        
        const key = e.key.toLowerCase();
        if ((key === 'arrowup' || key === 'w') && dy === 0) { nextDx = 0; nextDy = -1; }
        if ((key === 'arrowdown' || key === 's') && dy === 0) { nextDx = 0; nextDy = 1; }
        if ((key === 'arrowleft' || key === 'a') && dx === 0) { nextDx = -1; nextDy = 0; }
        if ((key === 'arrowright' || key === 'd') && dx === 0) { nextDx = 1; nextDy = 0; }
    });

    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;
            overlay.style.display = 'block';
            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+10, y: food.y*gridSize+10, vx: (Math.random()-0.5)*5, vy: (Math.random()-0.5)*5, life: 1});
            spawnFood();
        } else {
            snake.pop();
        }
    }

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

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

        // Snake
        snake.forEach((s, i) => {
            ctx.fillStyle = i === 0 ? '#4a4' : '#282';
            ctx.fillRect(s.x * gridSize + 1, s.y * gridSize + 1, gridSize - 2, gridSize - 2);
            if(i === 0) {
                ctx.fillStyle = '#fff';
                const eyeX = s.x * gridSize + (dx === 1 ? 14 : dx === -1 ? 2 : 10);
                const eyeY = s.y * gridSize + (dy === 1 ? 14 : dy === -1 ? 2 : 10);
                ctx.fillRect(eyeX, eyeY, 4, 4);
            }
        });

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

    // Auto-play AI
    setInterval(() => {
        if (!gameActive) return;
        if (food.x !== snake[0].x) {
            const diff = food.x - snake[0].x;
            if (dx === 0) { nextDx = diff > 0 ? 1 : -1; nextDy = 0; }
        } else if (food.y !== snake[0].y) {
            const diff = food.y - snake[0].y;
            if (dy === 0) { nextDy = diff > 0 ? 1 : -1; nextDx = 0; }
        }
    }, 100);

    function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
    }
    loop();
    canvas.addEventListener('mousedown', () => { if (!gameActive) reset(); });
</script>
</body>
</html>