Mistral Small 4

<!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;
      background: #222;
      color: #fff;
      font-family: Arial, sans-serif;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #game-container {
      position: relative;
      width: 600px;
      height: 400px;
      background: #333;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    #game-board {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
      background-size: 20px 20px;
    }

    #train {
      position: absolute;
      display: flex;
      align-items: center;
      transition: all 0.1s ease-out;
    }

    .wagon {
      width: 20px;
      height: 20px;
      border-radius: 2px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: bold;
    }

    .locomotive {
      width: 24px;
      height: 20px;
      background: linear-gradient(135deg, #ff6b6b, #ee5a52);
      border-radius: 4px 0 0 4px;
      box-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
    }

    .locomotive::before {
      content: "🚂";
      position: absolute;
      font-size: 12px;
    }

    .passenger {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ffd166;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      box-shadow: 0 0 5px rgba(255, 209, 102, 0.7);
    }

    .passenger::before {
      content: "👨";
      font-size: 8px;
    }

    #platform {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
      border-top: 2px solid #555;
    }

    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 16px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      padding: 5px 10px;
      border-radius: 4px;
    }

    #start-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      font-size: 20px;
      cursor: pointer;
      z-index: 10;
    }

    #game-over {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 20;
    }

    #game-over h2 {
      font-size: 32px;
      margin-bottom: 20px;
    }

    #restart-btn {
      background: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 4px;
      cursor: pointer;
    }

    #restart-btn:hover {
      background: #45a049;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="game-board"></div>
    <div id="train"></div>
    <div id="platform"></div>
    <div id="score">Passengers: 0</div>
    <div id="start-message">Click or press a key to start</div>
    <div id="game-over">
      <h2>Game Over!</h2>
      <p id="final-score">Passengers picked up: 0</p>
      <button id="restart-btn">Play Again</button>
    </div>
  </div>

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

      // Game state
      let gameActive = false;
      let gameOver = false;
      let score = 0;
      let direction = 'right';
      let nextDirection = 'right';
      let trainSpeed = 100;
      let gameLoopId;
      let passengerSpawnInterval;
      let passengers = [];
      let trainSegments = [];

      // Initialize train segments
      function initTrain() {
        train.innerHTML = '';
        trainSegments = [];

        // Locomotive
        const locomotive = document.createElement('div');
        locomotive.className = 'wagon locomotive';
        train.appendChild(locomotive);
        trainSegments.push({ element: locomotive, x: 5, y: 5, type: 'locomotive' });

        // Initial wagons
        for (let i = 0; i < 2; i++) {
          addWagon();
        }
      }

      // Add a wagon to the train
      function addWagon() {
        const wagon = document.createElement('div');
        wagon.className = 'wagon';
        const color = getRandomColor();
        wagon.style.background = color;
        train.appendChild(wagon);
        trainSegments.push({
          element: wagon,
          x: trainSegments.length,
          y: 5,
          type: 'wagon',
          color: color
        });
      }

      // Get random color for wagons
      function getRandomColor() {
        const colors = [
          '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4',
          '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd'
        ];
        return colors[Math.floor(Math.random() * colors.length)];
      }

      // Spawn passengers on platform
      function spawnPassenger() {
        if (!gameActive || gameOver) return;

        const x = Math.floor(Math.random() * 25) + 2;
        const passenger = document.createElement('div');
        passenger.className = 'passenger';
        platform.appendChild(passenger);

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

        passenger.style.left = `${x * 20}px`;
        passenger.style.bottom = '15px';
      }

      // Move train
      function moveTrain() {
        if (!gameActive || gameOver) return;

        direction = nextDirection;

        // Calculate new head position
        const head = trainSegments[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
        if (newX < 0 || newX >= 30 || newY < 0 || newY >= 20) {
          gameOver = true;
          endGame();
          return;
        }

        // Check for self-collision
        for (let i = 1; i < trainSegments.length; i++) {
          if (trainSegments[i].x === newX && trainSegments[i].y === newY) {
            gameOver = true;
            endGame();
            return;
          }
        }

        // Check for passenger pickup
        for (let i = 0; i < passengers.length; i++) {
          if (passengers[i].x === newX && passengers[i].y === newY) {
            passengers[i].element.remove();
            passengers.splice(i, 1);
            addWagon();
            score++;
            scoreDisplay.textContent = `Passengers: ${score}`;
            break;
          }
        }

        // Move train segments
        const newHead = { ...head, x: newX, y: newY };
        trainSegments.unshift(newHead);

        // Update locomotive position and direction
        const locomotive = trainSegments[0].element;
        locomotive.style.left = `${newX * 20}px`;
        locomotive.style.top = `${newY * 20}px`;

        // Update wagon positions
        for (let i = 1; i < trainSegments.length; i++) {
          const segment = trainSegments[i];
          segment.element.style.left = `${segment.x * 20}px`;
          segment.element.style.top = `${segment.y * 20}px`;
          segment.x = trainSegments[i-1].x;
          segment.y = trainSegments[i-1].y;
        }

        // Remove tail if no passengers picked up
        if (trainSegments.length > 3) {
          const tail = trainSegments.pop();
          tail.element.remove();
        }
      }

      // Game loop
      function gameLoop() {
        if (gameOver) return;

        moveTrain();
      }

      // Start game
      function startGame() {
        if (gameActive) return;

        gameActive = true;
        gameOver = false;
        score = 0;
        direction = 'right';
        nextDirection = 'right';
        scoreDisplay.textContent = `Passengers: ${score}`;
        startMessage.style.display = 'none';
        gameOverScreen.style.display = 'none';

        initTrain();
        clearInterval(passengerSpawnInterval);
        passengerSpawnInterval = setInterval(spawnPassenger, 2000);

        if (gameLoopId) clearInterval(gameLoopId);
        gameLoopId = setInterval(gameLoop, trainSpeed);
      }

      // End game
      function endGame() {
        gameActive = false;
        clearInterval(gameLoopId);
        clearInterval(passengerSpawnInterval);
        finalScoreDisplay.textContent = `Passengers picked up: ${score}`;
        gameOverScreen.style.display = 'flex';
      }

      // Handle keyboard input
      document.addEventListener('keydown', (e) => {
        if (!gameActive && !gameOver) {
          startGame();
          return;
        }

        if (gameOver) return;

        switch (e.key) {
          case 'ArrowUp':
            if (direction !== 'down') nextDirection = 'up';
            break;
          case 'ArrowDown':
            if (direction !== 'up') nextDirection = 'down';
            break;
          case 'ArrowLeft':
            if (direction !== 'right') nextDirection = 'left';
            break;
          case 'ArrowRight':
            if (direction !== 'left') nextDirection = 'right';
            break;
        }
      });

      // Handle click to start
      gameContainer.addEventListener('click', () => {
        if (!gameActive && !gameOver) {
          startGame();
        }
      });

      // Restart button
      restartBtn.addEventListener('click', startGame);

      // Initial setup
      initTrain();
    });
  </script>
</body>
</html>