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;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #2c3e50;
            color: white;
            font-family: 'Segoe UI', sans-serif;
            overflow: hidden;
        }
        #gameContainer {
            position: relative;
            width: 90vw;
            max-width: 600px;
            aspect-ratio: 1/1;
        }
        canvas {
            width: 100%;
            height: 100%;
            background-color: #ecf0f1;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        #ui {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(44, 62, 80, 0.7);
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
        }
        h1 { margin-bottom: 10px; }
        .score-board {
            position: absolute;
            top: -40px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="score-board">Passengers Picked Up: <span id="score">0</span></div>
    <div id="gameContainer">
        <canvas id="gameCanvas" width="600" height="600"></canvas>
        <div id="ui">
            <h1>TRAIN SNAKE</h1>
            <p>Click or press a key to start</p>
        </div>
    </div>

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

        const GRID_SIZE = 20;
        const CELL = canvas.width / GRID_SIZE;
        let snake = [{x: 10, y: 10}];
        let direction = {x: 1, y: 0};
        let nextDirection = {x: 1, y: 0};
        let passenger = {x: 5, y: 5};
        let score = 0;
        let isAttractMode = true;
        let isGameOver = false;
        let gameLoopId = null;

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

        function init() {
            snake = [{x: 10, y: 10}];
            direction = {x: 1, y: 0};
            nextDirection = {x: 1, y: 0};
            score = 0;
            scoreEl.innerText = score;
            spawnPassenger();
            isGameOver = false;
        }

        function spawnPassenger() {
            passenger = {
                x: Math.floor(Math.random() * GRID_SIZE),
                y: Math.floor(Math.random() * GRID_SIZE)
            };
            // Ensure not on snake
            snake.forEach(s => {
                if(s.x === passenger.x && s.y === passenger.y) spawnPassenger();
            });
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw Passenger
            ctx.fillStyle = '#ff00ff';
            ctx.beginPath();
            ctx.arc((passenger.x + 0.5) * CELL, (passenger.y + 0.5) * CELL, CELL * 0.3, 0, Math.PI * 2);
            ctx.fill();
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc((passenger.x + 0.5) * CELL, (passenger.y + 0.4) * CELL, CELL * 0.1, 0, Math.PI * 2);
            ctx.fill();

            // Draw Snake
            snake.forEach((s, i) => {
                const x = s.x * CELL;
                const y = s.y * CELL;

                if (i === 0) {
                    // Locomotive
                    ctx.fillStyle = '#2c3e50';
                    ctx.fillRect(x + 2, y + 2, CELL - 4, CELL - 4);
                    ctx.fillStyle = '#7f8c8d';
                    ctx.fillRect(x + CELL * 0.3, y + CELL * 0.1, CELL * 0.4, CELL * 0.2); // Funnel
                } else {
                    // Wagon
                    ctx.fillStyle = wagonColors[(i - 1) % wagonColors.length];
                    ctx.fillRect(x + 2, y + 2, CELL - 4, CELL - 4);
                    // Wheels
                    ctx.fillStyle = '#333';
                    ctx.beginPath();
                    ctx.arc(x + CELL * 0.25, y + CELL * 0.85, CELL * 0.15, 0, Math.PI * 2);
                    ctx.arc(x + CELL * 0.75, y + CELL * 0.85, CELL * 0.15, 0, Math.PI * 2);
                    ctx.fill();
                }
            });
        }

        function getAiMove() {
            const head = snake[0];
            const moves = [
                {x: 1, y: 0}, {x: -1, y: 0},
                {x: 0, y: 1}, {x: 0, y: -1}
            ];

            let bestMove = direction;
            let minDistance = Infinity;

            for (let move of moves) {
                // Prevent reversing
                if (move.x === -direction.x && move.y === -direction.y) continue;

                const nextX = head.x + move.x;
                const nextY = head.y + move.y;

                // Collision with walls
                if (nextX < 0 || nextX >= GRID_SIZE || nextY < 0 || nextY >= GRID_SIZE) continue;
                
                // Collision with self
                let collision = false;
                for(let i=0; i<snake.length-1; i++) {
                    if(snake[i].x === nextX && snake[i].y === nextY) collision = true;
                }
                if (collision) continue;

                const dist = Math.abs(nextX - passenger.x) + Math.abs(nextY - passenger.y);
                if (dist < minDistance) {
                    minDistance = dist;
                    bestMove = move;
                }
            }
            return bestMove;
        }

        function update() {
            if (isAttractMode) {
                direction = getAiMove();
            } else {
                direction = nextDirection;
            }

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

            // Wall collision
            if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
                gameOver();
                return;
            }

            // Self collision
            for (let i = 0; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    gameOver();
                    return;
                }
            }

            snake.unshift(head);

            if (head.x === passenger.x && head.y === passenger.y) {
                score++;
                scoreEl.innerText = score;
                spawnPassenger();
            } else {
                snake.pop();
            }

            draw();
        }

        function gameOver() {
            if (isAttractMode) {
                init();
            } else {
                isAttractMode = true;
                ui.style.display = 'flex';
                ui.innerHTML = '<h1>GAME OVER</h1><p>Score: ' + score + '</p><p>Click to restart</p>';
            }
        }

        function startGame() {
            if (isAttractMode) {
                isAttractMode = false;
                ui.style.display = 'none';
                init();
            }
        }

        window.addEventListener('keydown', e => {
            startGame();
            switch(e.key) {
                case 'ArrowUp': if(direction.y === 0) nextDirection = {x: 0, y: -1}; break;
                case 'ArrowDown': if(direction.y === 0) nextDirection = {x: 0, y: 1}; break;
                case 'ArrowLeft': if(direction.x === 0) nextDirection = {x: -1, y: 0}; break;
                case 'ArrowRight': if(direction.x === 0) nextDirection = {x: 1, y: 0}; break;
            }
        });

        ui.addEventListener('click', () => {
            startGame();
        });

        setInterval(update, 120);
    </script>
</body>
</html>