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>Train Snake</title>
    <style>
        body {
            margin: 0;
            background: #2c3e50;
            color: white;
            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);
            background: #34495e;
            border: 4px solid #7f8c8d;
            border-radius: 8px;
        }
        canvas {
            display: block;
            max-width: 100vw;
            max-height: 80vh;
            cursor: pointer;
        }
        #ui {
            text-align: center;
            padding: 10px;
        }
        #msg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            pointer-events: none;
        }
    </style>
</head>
<body>

    <div id="ui">
        <h1>Train Express</h1>
        <p>Score: <span id="score">0</span></p>
    </div>

    <div id="game-container">
        <canvas id="gameCanvas" width="600" height="400"></canvas>
        <div id="msg">
            <h2>Train Express</h2>
            <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 msgEl = document.getElementById('msg');

    const gridSize = 20;
    const cols = canvas.width / gridSize;
    const rows = canvas.height / gridSize;

    let snake = [{x: 10, y: 10}];
    let direction = {x: 1, y: 0};
    let nextDirection = {x: 1, y: 0};
    let passengers = [];
    let score = 0;
    let playing = false;
    let attractMode = true;
    let speed = 100;
    let lastTime = 0;

    const wagonColors = ['#e74c3c', '#f1c40f', '#3498db', '#2ecc71', '#9b59b6'];

    function initGame() {
        snake = [{x: 5, y: 5}];
        direction = {x: 1, y: 0};
        nextDirection = {x: 1, y: 0};
        score = 0;
        scoreEl.innerText = score;
        spawnPassenger();
        playing = true;
        attractMode = false;
        msgEl.style.display = 'none';
    }

    function spawnPassenger() {
        let pos;
        while(true) {
            pos = {
                x: Math.floor(Math.random() * cols),
                y: Math.floor(Math.random() * rows)
            };
            if (!snake.find(s => s.x === pos.x && s.y === pos.y)) break;
        }
        passengers = [pos];
    }

    function update() {
        if (!playing && !attractMode) return;

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

        // Wrap around
        if (head.x < 0) head.x = cols - 1;
        if (head.x >= cols) head.x = 0;
        if (head.y < 0) head.y = rows - 1;
        if (head.y >= rows) head.y = 0;

        // Collision
        if (!attractMode && snake.slice(1).find(s => s.x === head.x && s.y === head.y)) {
            gameOver();
            return;
        }

        snake.unshift(head);

        if (passengers.some(p => p.x === head.x && p.y === head.y)) {
            score += 10;
            scoreEl.innerText = score;
            spawnPassenger();
        } else {
            snake.pop();
        }
    }

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

        // Grid lines
        ctx.strokeStyle = '#2c3e50';
        for(let i=0; i<cols; i++) ctx.strokeRect(i*gridSize, 0, gridSize, rows*gridSize);
        for(let i=0; i<rows; i++) ctx.strokeRect(0, i*gridSize, cols*gridSize, gridSize);

        // Passengers
        passengers.forEach(p => {
            ctx.fillStyle = '#ecf0f1';
            ctx.beginPath();
            ctx.arc(p.x * gridSize + gridSize/2, p.y * gridSize + gridSize/2, gridSize/4, 0, Math.PI*2);
            ctx.fill();
        });

        // Snake (Train)
        snake.forEach((s, i) => {
            ctx.fillStyle = i === 0 ? '#2c3e50' : wagonColors[i % wagonColors.length];
            ctx.fillRect(s.x * gridSize + 2, s.y * gridSize + 2, gridSize - 4, gridSize - 4);
            // Detail
            if(i === 0) {
                ctx.fillStyle = 'white';
                ctx.fillRect(s.x*gridSize+4, s.y*gridSize+4, 4, 4);
            }
        });
    }

    function gameOver() {
        playing = false;
        attractMode = true;
        msgEl.style.display = 'block';
        msgEl.querySelector('p').innerText = "Game Over! Click to restart.";
    }

    function aiMove() {
        const head = snake[0];
        const target = passengers[0];
        const possible = [
            {x: 1, y: 0}, {x: -1, y: 0}, {x: 0, y: 1}, {x: 0, y: -1}
        ];

        let bestDir = direction;
        let minDist = Infinity;

        possible.forEach(d => {
            const next = {x: head.x + d.x, y: head.y + d.y};
            const dist = Math.abs(next.x - target.x) + Math.abs(next.y - target.y);
            if (dist < minDist && (d.x !== -direction.x || d.y !== -direction.y)) {
                minDist = dist;
                bestDir = d;
            }
        });
        nextDirection = bestDir;
    }

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

    window.addEventListener('keydown', e => {
        if (!playing) initGame();
        const dirs = {ArrowUp: {x:0,y:-1}, ArrowDown: {x:0,y:1}, ArrowLeft: {x:-1,y:0}, ArrowRight: {x:1,y:0}};
        if (dirs[e.key]) {
            const d = dirs[e.key];
            if (d.x !== -direction.x || d.y !== -direction.y) nextDirection = d;
        }
    });

    canvas.addEventListener('click', () => { if (!playing) initGame(); });

    requestAnimationFrame(loop);
</script>
</body>
</html>