Mistral Small 4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Train Snake Game</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #111;
    color: #fff;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    touch-action: none;
  }
  #game {
    position: absolute;
    top: 0;
    left: 0;
    width: 1024px;
    height: 768px;
    margin: auto;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
  }
  #board {
    width: 600px;
    height: 600px;
    background: #222;
    border: 4px solid #444;
    position: relative;
    overflow: hidden;
  }
  #start {
    font-size: 24px;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
  }
  #score {
    font-size: 20px;
    margin-top: 10px;
  }
  .wagon {
    position: absolute;
    border-radius: 8px;
    transition: all 0.1s linear;
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
  }
  .locomotive {
    background: linear-gradient(90deg, #ff6b6b, #ee5a24);
    width: 60px;
    height: 40px;
    border-radius: 8px 0 0 8px;
  }
  .wagon {
    width: 50px;
    height: 40px;
    border-radius: 0 8px 8px 0;
  }
  .wagon-1 { background: linear-gradient(90deg, #4834d4, #686de0); }
  .wagon-2 { background: linear-gradient(90deg, #00d2d3, #01a3a4); }
  .wagon-3 { background: linear-gradient(90deg, #feca57, #ff9ff3); }
  .wagon-4 { background: linear-gradient(90deg, #ff9ff3, #54a0ff); }
  .wagon-5 { background: linear-gradient(90deg, #5f27cd, #00d2d3); }
  .passenger {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
  }
  .platform {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 600px;
    height: 80px;
    background: linear-gradient(to bottom, #555, #333);
    border-top: 4px solid #666;
  }
  .rail {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 600px;
    height: 4px;
    background: #333;
    border-bottom: 2px solid #555;
  }
  @media (max-width: 768px) {
    #board { width: 95vw; height: 95vw; max-height: 600px; }
  }
</style>
</head>
<body>
<div id="game">
  <div id="start">Click or press a key to start</div>
  <div id="board">
    <div id="score">Passengers: 0</div>
    <div class="platform" id="platform"></div>
    <div class="rail"></div>
  </div>
</div>

<script>
const GRID = 24;
const WIDTH = 600;
const HEIGHT = 600;
const COLORS = ['#4834d4','#00d2d3','#feca57','#ff9ff3','#5f27cd'];
let snake = [];
let passengers = [];
let gameOver = true;
let score = 0;
let direction = {x: 1, y: 0};
let nextDirection = {x: 1, y: 0};
let speed = 100;
let lastTime = 0;
let gameLoopId = null;

function createLocomotive(x, y) {
  const loco = document.createElement('div');
  loco.className = 'wagon locomotive';
  loco.style.left = (x * GRID) + 'px';
  loco.style.top = (y * GRID) + 'px';
  document.getElementById('board').appendChild(loco);
  return loco;
}

function createWagon(x, y, colorIndex) {
  const wagon = document.createElement('div');
  wagon.className = 'wagon ' + 'wagon-' + (colorIndex % 5 + 1);
  wagon.style.left = (x * GRID) + 'px';
  wagon.style.top = (y * GRID) + 'px';
  document.getElementById('board').appendChild(wagon);
  return wagon;
}

function createPassenger() {
  const x = Math.floor(Math.random() * (WIDTH / GRID));
  const y = Math.floor(Math.random() * 3) + 1;
  const p = document.createElement('div');
  p.className = 'passenger';
  p.textContent = '🚶';
  p.style.left = (x * GRID + 18) + 'px';
  p.style.top = (y * GRID + 28) + 'px';
  document.getElementById('board').appendChild(p);
  passengers.push({x, y, elem: p});
}

function initGame() {
  snake = [
    {x: 5, y: 5, elem: createLocomotive(5, 5)}
  ];
  for (let i = 1; i < 3; i++) {
    snake.push({x: 5 - i, y: 5, elem: createWagon(5 - i, 5, i)});
  }
  passengers = [];
  for (let i = 0; i < 8; i++) createPassenger();
  direction = {x: 1, y: 0};
  nextDirection = {x: 1, y: 0};
  score = 0;
  document.getElementById('score').textContent = 'Passengers: ' + score;
  gameOver = false;
}

function moveSnake() {
  const head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
  if (head.x < 0 || head.x >= WIDTH / GRID || head.y < 0 || head.y >= HEIGHT / GRID) {
    gameOver = true;
    return;
  }
  for (let i = 0; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      gameOver = true;
      return;
    }
  }
  const newWagon = createWagon(head.x, head.y, snake.length);
  snake.unshift({x: head.x, y: head.y, elem: newWagon});
  if (passengers.length > 0) {
    for (let i = 0; i < passengers.length; i++) {
      if (head.x === passengers[i].x && head.y === passengers[i].y) {
        passengers[i].elem.remove();
        passengers.splice(i, 1);
        score++;
        document.getElementById('score').textContent = 'Passengers: ' + score;
        createPassenger();
        break;
      }
    }
  } else {
    createPassenger();
  }
  const tail = snake.pop();
  tail.elem.remove();
}

function gameLoop(time) {
  if (!gameOver) {
    if (time - lastTime >= speed) {
      direction = {...nextDirection};
      moveSnake();
      lastTime = time;
    }
    gameLoopId = requestAnimationFrame(gameLoop);
  }
}

function startGame() {
  if (!gameOver) return;
  if (gameLoopId) cancelAnimationFrame(gameLoopId);
  initGame();
  document.getElementById('start').style.display = 'none';
  gameLoopId = requestAnimationFrame(gameLoop);
}

function handleKey(e) {
  if (gameOver && (e.key === ' ' || e.key === 'Enter')) {
    startGame();
    return;
  }
  if (gameOver) return;
  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;
  }
}

document.getElementById('start').addEventListener('click', startGame);
document.addEventListener('keydown', handleKey);

// Touch controls for mobile
let touchStartX = 0;
let touchStartY = 0;
document.getElementById('board').addEventListener('touchstart', (e) => {
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
}, false);
document.getElementById('board').addEventListener('touchmove', (e) => {
  if (!gameOver) {
    const touchX = e.touches[0].clientX;
    const touchY = e.touches[0].clientY;
    const diffX = touchX - touchStartX;
    const diffY = touchY - touchStartY;
    if (Math.abs(diffX) > Math.abs(diffY)) {
      if (diffX > 0 && direction.x === 0) nextDirection = {x: 1, y: 0};
      if (diffX < 0 && direction.x === 0) nextDirection = {x: -1, y: 0};
    } else {
      if (diffY > 0 && direction.y === 0) nextDirection = {x: 0, y: 1};
      if (diffY < 0 && direction.y === 0) nextDirection = {x: 0, y: -1};
    }
    e.preventDefault();
  }
}, false);

</script>
</body>
</html>