Gemini 3.1 Flash Lite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Deluxe</title>
    <style>
        body {
            margin: 0;
            background: #1a1a2e;
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        #game-container {
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            border: 4px solid #4e4e6a;
            background: #0f0f1a;
        }
        canvas {
            display: block;
            image-rendering: pixelated;
        }
        #ui {
            position: absolute;
            top: 10px;
            left: 10px;
            pointer-events: none;
            font-size: 18px;
            text-shadow: 1px 1px 2px #000;
        }
        #overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }
        h1 { margin: 0 0 10px 0; color: #4ecca3; }
        .btn { padding: 10px 20px; cursor: pointer; background: #4ecca3; border: none; font-weight: bold; }
    </style>
</head>
<body>

    <div id="game-container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div id="ui">
            Score: <span id="score">0</span><br>
            Best: <span id="best">0</span>
        </div>
        <div id="overlay">
            <h1 id="msg">Snake Deluxe</h1>
            <p>Click or press any key to start</p>
        </div>
    </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 msgEl = document.getElementById('msg');

    const gridSize = 20;
    const tileCount = 20;
    const tileSize = canvas.width / tileCount;

    let snake, food, direction, nextDirection, score, best = 0;
    let gameLoop, particles = [], isPaused = false, isGameOver = true, isDemo = true;
    let lastTime = 0;
    const speed = 100;

    function init() {
        snake = [{x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10}];
        direction = {x: 1, y: 0};
        nextDirection = {x: 1, y: 0};
        score = 0;
        particles = [];
        spawnFood();
        updateScore();
        isGameOver = false;
        overlay.style.display = 'none';
        lastTime = performance.now();
        requestAnimationFrame(loop);
    }

    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);
        }
    }

    function spawnParticles(x, y) {
        for (let i = 0; i < 8; i++) {
            particles.push({
                x: (x + 0.5) * tileSize, y: (y + 0.5) * tileSize,
                vx: (Math.random() - 0.5) * 4, vy: (Math.random() - 0.5) * 4,
                life: 1.0
            });
        }
    }

    function update() {
        if (isPaused || isGameOver) return;

        if (isDemo) aiMove();

        direction = nextDirection;
        const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};

        // Wall collision
        if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || 
            snake.some(s => s.x === head.x && s.y === head.y)) {
            gameOver();
            return;
        }

        snake.unshift(head);

        if (head.x === food.x && head.y === food.y) {
            score += 10;
            if (score > best) best = score;
            updateScore();
            spawnParticles(head.x, head.y);
            spawnFood();
        } else {
            snake.pop();
        }

        particles.forEach(p => {
            p.x += p.vx; p.y += p.vy; p.life -= 0.05;
        });
        particles = particles.filter(p => p.life > 0);
    }

    function aiMove() {
        let targets = [];
        const head = snake[0];
        [{x:0,y:-1}, {x:0,y:1}, {x:-1,y:0}, {x:1,y:0}].forEach(d => {
            if (d.x === -direction.x && d.y === -direction.y) return;
            let nx = head.x + d.x, ny = head.y + d.y;
            if (nx >= 0 && nx < tileCount && ny >= 0 && ny < tileCount && !snake.some(s => s.x === nx && s.y === ny)) {
                let dist = Math.abs(nx - food.x) + Math.abs(ny - food.y);
                targets.push({d, dist});
            }
        });
        if (targets.length > 0) {
            targets.sort((a,b) => a.dist - b.dist);
            nextDirection = targets[0].d;
        }
    }

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

        // Grid
        ctx.strokeStyle = '#1a1a2e';
        for(let i=0; i<tileCount; i++) {
            ctx.strokeRect(i*tileSize, 0, tileSize, canvas.height);
            ctx.strokeRect(0, i*tileSize, canvas.width, tileSize);
        }

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

        // Snake
        snake.forEach((s, i) => {
            ctx.fillStyle = i === 0 ? '#4ecca3' : '#45b791';
            ctx.fillRect(s.x * tileSize + 1, s.y * tileSize + 1, tileSize - 2, tileSize - 2);
            if (i === 0) {
                ctx.fillStyle = '#fff';
                let ex = s.x * tileSize, ey = s.y * tileSize;
                ctx.fillRect(ex + 4, ey + 4, 4, 4);
                ctx.fillRect(ex + 12, ey + 4, 4, 4);
            }
        });

        // Particles
        ctx.fillStyle = '#ffcc00';
        particles.forEach(p => {
            ctx.globalAlpha = p.life;
            ctx.fillRect(p.x, p.y, 4, 4);
        });
        ctx.globalAlpha = 1.0;
    }

    function loop(time) {
        if (time - lastTime > speed) {
            update();
            lastTime = time;
        }
        draw();
        requestAnimationFrame(loop);
    }

    function gameOver() {
        isGameOver = true;
        overlay.style.display = 'flex';
        msgEl.innerText = "Game Over!";
    }

    function updateScore() {
        scoreEl.innerText = score;
        bestEl.innerText = best;
    }

    window.addEventListener('keydown', e => {
        if (isGameOver) { init(); isDemo = false; return; }
        if (e.code === 'Space' || e.code === 'Enter') isPaused = !isPaused;
        if (e.code === 'KeyP') isPaused = !isPaused;
        
        const keyMap = {ArrowUp: {x:0,y:-1}, ArrowDown: {x:0,y:1}, ArrowLeft: {x:-1,y:0}, ArrowRight: {x:1,y:0},
                        KeyW: {x:0,y:-1}, KeyS: {x:0,y:1}, KeyA: {x:-1,y:0}, KeyD: {x:1,y:0}};
        if (keyMap[e.code]) {
            let nd = keyMap[e.code];
            if (!(nd.x === -direction.x && nd.y === -direction.y)) nextDirection = nd;
        }
    });

    canvas.addEventListener('mousedown', () => { if (isGameOver) { init(); isDemo = false; } });
    init();
</script>
</body>
</html>