Ministral 3 14B 2512

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Train Snake Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            overflow: hidden;
            user-select: none;
        }

        #game-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 600px;
            background-color: #2c3e50;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #game-board {
            position: relative;
            width: 750px;
            height: 550px;
            background-color: #1a252f;
            border: 2px solid #34495e;
            border-radius: 5px;
        }

        #start-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            text-align: center;
            z-index: 10;
            width: 80%;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px;
            border-radius: 10px;
            display: none;
        }

        #score-display {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 20px;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 5px 10px;
            border-radius: 5px;
        }

        #controls {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 16px;
            z-index: 10;
            text-align: center;
        }

        .train {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #3498db;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .train-locomotive {
            background-color: #e74c3c;
            border-radius: 5px 5px 0 0;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: white;
        }

        .train-wagon {
            background-color: #2ecc71;
            border-radius: 0 0 5px 5px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: white;
        }

        .passenger {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #f1c40f;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #2c3e50;
        }

        .platform {
            position: absolute;
            width: 750px;
            height: 20px;
            background-color: #7f8c8d;
            top: 20px;
            left: 0;
        }

        .platform-passenger {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #f1c40f;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #2c3e50;
            top: 5px;
        }

        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 36px;
            text-align: center;
            z-index: 10;
            width: 80%;
            background-color: rgba(0, 0, 0, 0.9);
            padding: 30px;
            border-radius: 10px;
            display: none;
        }

        .restart-btn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 18px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .restart-btn:hover {
            background-color: #2980b9;
        }

        @media (max-width: 768px) {
            #game-container {
                width: 95%;
                height: 90vh;
            }

            #game-board {
                width: 95%;
                height: 85vh;
            }

            #start-message, .game-over {
                font-size: 18px;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="game-board">
            <div class="platform"></div>
            <div id="score-display">Score: 0</div>
            <div id="controls">
                <div>Use arrow keys or WASD to control the train</div>
            </div>
            <div id="start-message">
                Click or press a key to start
            </div>
            <div id="game-over">
                Game Over!
                <div id="final-score">Score: 0</div>
                <button class="restart-btn" id="restart-btn">Play Again</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const gameBoard = document.getElementById('game-board');
            const startMessage = document.getElementById('start-message');
            const gameOverDisplay = document.getElementById('game-over');
            const finalScoreDisplay = document.getElementById('final-score');
            const scoreDisplay = document.getElementById('score-display');
            const restartBtn = document.getElementById('restart-btn');

            let gameRunning = false;
            let gameSpeed = 150;
            let score = 0;
            let train = [];
            let direction = 'right';
            let nextDirection = 'right';
            let passengers = [];
            let platformPassengers = [];
            let gameLoop;
            let lastPassengerTime = 0;
        const passengerInterval = 1000;

            // Initialize the game
            function initGame() {
                train = [];
                direction = 'right';
                nextDirection = 'right';
                score = 0;
                scoreDisplay.textContent = `Score: ${score}`;
                passengers = [];
                platformPassengers = [];
                gameBoard.innerHTML = '';
                gameBoard.innerHTML = '<div class="platform"></div>';

                // Create initial train (locomotive + 1 wagon)
                createTrain(0, 0, 0);

                // Create initial platform passengers
                for (let i = 0; i < 3; i++) {
                    spawnPlatformPassenger();
                }

                gameRunning = true;
                startMessage.style.display = 'none';
                gameOverDisplay.style.display = 'none';
                lastPassengerTime = Date.now();

                gameLoop = setInterval(gameStep, gameSpeed);
            }

            // Create train segments
            function createTrain(x, y, length) {
                // Locomotive
                const locomotive = document.createElement('div');
                locomotive.className = 'train-locomotive';
                locomotive.style.left = `${x * 40}px`;
                locomotive.style.top = `${y * 40}px`;
                locomotive.textContent = '🚂';
                gameBoard.appendChild(locomotive);
                train.push({ element: locomotive, type: 'locomotive', x, y });

                // Wagons
                for (let i = 1; i <= length; i++) {
                    const wagon = document.createElement('div');
                    wagon.className = 'train-wagon';
                    wagon.style.left = `${(x - i) * 40}px`;
                    wagon.style.top = `${y * 40}px`;
                    wagon.textContent = '🚃';
                    gameBoard.appendChild(wagon);
                    train.push({ element: wagon, type: 'wagon', x: x - i, y });
                }
            }

            // Spawn a passenger on the platform
            function spawnPlatformPassenger() {
                const platform = document.querySelector('.platform');
                const passenger = document.createElement('div');
                passenger.className = 'platform-passenger';
                passenger.textContent = '👤';

                // Position passenger randomly along the platform
                const x = Math.floor(Math.random() * 18) + 1; // 18 segments (720px) + 1 for 0-based
                passenger.style.left = `${x * 40}px`;
                passenger.style.top = '5px';

                platform.appendChild(passenger);
                platformPassengers.push({ element: passenger, x, y: 0 });
            }

            // Spawn a passenger in the game area
            function spawnPassenger() {
                const passenger = document.createElement('div');
                passenger.className = 'passenger';
                passenger.textContent = '👥';

                // Position passenger randomly in the game area
                const x = Math.floor(Math.random() * 17) + 1; // 17 segments (680px) + 1 for 0-based
                const y = Math.floor(Math.random() * 12) + 1; // 12 segments (480px) + 1 for 0-based

                passenger.style.left = `${x * 40}px`;
                passenger.style.top = `${y * 40}px`;

                gameBoard.appendChild(passenger);
                passengers.push({ element: passenger, x, y });
            }

            // Move the train
            function moveTrain() {
                direction = nextDirection;

                // Calculate new positions
                const head = train[0];
                let newX = head.x;
                let newY = head.y;

                switch (direction) {
                    case 'up':
                        newY--;
                        break;
                    case 'down':
                        newY++;
                        break;
                    case 'left':
                        newX--;
                        break;
                    case 'right':
                        newX++;
                        break;
                }

                // Check for collisions with walls
                if (newX < 0 || newX >= 18 || newY < 0 || newY >= 13) {
                    gameOver();
                    return;
                }

                // Check for collisions with self
                for (let i = 1; i < train.length; i++) {
                    if (train[i].x === newX && train[i].y === newY) {
                        gameOver();
                        return;
                    }
                }

                // Move the train
                train.unshift({ element: head.element, type: head.type, x: newX, y: newY });

                // Check if the head is at the platform
                if (newY === 0) {
                    // Check if the head is over a platform passenger
                    for (let i = 0; i < platformPassengers.length; i++) {
                        if (platformPassengers[i].x === newX) {
                            // Pick up passenger
                            platformPassengers.splice(i, 1);
                            platformPassengers[i].element.remove();

                            // Add passenger to the train
                            const wagonIndex = train.findIndex(segment => segment.type === 'wagon');
                            if (wagonIndex > 0) {
                                // Add passenger to the wagon
                                const passengerElement = document.createElement('div');
                                passengerElement.className = 'passenger';
                                passengerElement.textContent = '👥';
                                passengerElement.style.position = 'absolute';
                                passengerElement.style.left = '10px';
                                passengerElement.style.top = '10px';
                                train[wagonIndex].element.appendChild(passengerElement);

                                // Increase score
                                score += 10;
                                scoreDisplay.textContent = `Score: ${score}`;

                                // Speed up the game
                                if (gameSpeed > 50) {
                                    gameSpeed -= 2;
                                    clearInterval(gameLoop);
                                    gameLoop = setInterval(gameStep, gameSpeed);
                                }
                            } else {
                                // If no wagon, add a new wagon
                                createTrain(newX - 1, newY, 1);
                            }
                            break;
                        }
                    }
                } else {
                    // Check if the head is over a regular passenger
                    for (let i = 0; i < passengers.length; i++) {
                        if (passengers[i].x === newX && passengers[i].y === newY) {
                            // Pick up passenger
                            passengers.splice(i, 1);
                            passengers[i].element.remove();

                            // Increase score
                            score += 5;
                            scoreDisplay.textContent = `Score: ${score}`;

                            // Speed up the game
                            if (gameSpeed > 50) {
                                gameSpeed -= 2;
                                clearInterval(gameLoop);
                                gameLoop = setInterval(gameStep, gameSpeed);
                            }
                            break;
                        }
                    }
                }

                // Move the rest of the train
                for (let i = 1; i < train.length; i++) {
                    train[i].x = train[i - 1].x;
                    train[i].y = train[i - 1].y;
                    train[i].element.style.left = `${train[i].x * 40}px`;
                    train[i].element.style.top = `${train[i].y * 40}px`;
                }

                // Remove the tail if the train is too long
                if (train.length > 5) {
                    const tail = train.pop();
                    tail.element.remove();
                }
            }

            // Game step
            function gameStep() {
                if (!gameRunning) return;

                moveTrain();

                // Spawn passengers
                const currentTime = Date.now();
                if (currentTime - lastPassengerTime > passengerInterval) {
                    spawnPassenger();
                    lastPassengerTime = currentTime;

                    // Spawn platform passengers occasionally
                    if (Math.random() < 0.3) {
                        spawnPlatformPassenger();
                    }
                }

                // Check if the train is at the platform and needs to spawn more passengers
                if (train[0].y === 0 && Math.random() < 0.1) {
                    spawnPlatformPassenger();
                }
            }

            // Game over
            function gameOver() {
                gameRunning = false;
                clearInterval(gameLoop);
                finalScoreDisplay.textContent = `Score: ${score}`;
                gameOverDisplay.style.display = 'block';
            }

            // Restart game
            function restartGame() {
                gameOverDisplay.style.display = 'none';
                initGame();
            }

            // Handle keyboard input
            function handleKeyDown(e) {
                if (!gameRunning) {
                    if (e.code === 'Space' || e.key === 'Enter') {
                        initGame();
                    }
                    return;
                }

                switch (e.key) {
                    case 'ArrowUp':
                    case 'w':
                    case 'W':
                        if (direction !== 'down') nextDirection = 'up';
                        break;
                    case 'ArrowDown':
                    case 's':
                    case 'S':
                        if (direction !== 'up') nextDirection = 'down';
                        break;
                    case 'ArrowLeft':
                    case 'a':
                    case 'A':
                        if (direction !== 'right') nextDirection = 'left';
                        break;
                    case 'ArrowRight':
                    case 'd':
                    case 'D':
                        if (direction !== 'left') nextDirection = 'right';
                        break;
                }
            }

            // Handle mouse click
            function handleClick() {
                if (!gameRunning) {
                    initGame();
                }
            }

            // Event listeners
            document.addEventListener('keydown', handleKeyDown);
            gameBoard.addEventListener('click', handleClick);
            restartBtn.addEventListener('click', restartGame);

            // Start the game automatically after a delay
            setTimeout(() => {
                if (!gameRunning) {
                    initGame();
                }
            }, 3000);
        });
    </script>
</body>
</html>