Nemotron 3.5 Lightning (free)

<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 100%);
      min-height: 100vh;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #gameContainer {
      position: relative;
      width: 100%;
      max-width: 1280px;
      aspect-ratio: 4/3;
      background: #2C3E50;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

    canvas {
      display: block;
      background: #ECF0F1;
    }

    #ui {
      position: absolute;
      top: 20px;
      left: 20px;
      color: white;
      pointer-events: none;
    }

    #score {
      background: rgba(0,0,0,0.5);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 18px;
    }

    #highScore {
      margin-left: 20px;
      background: rgba(0,0,0,0.5);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      color: #bdc3c7;
    }

    #startMsg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
      pointer-events: auto;
      z-index: 100;
      background: rgba(0,0,0,0.6);
      padding: 20px 40px;
      border-radius: 25px;
      white-space: nowrap;
    }

    #startMsg.invisible {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

    .controlsHint {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #bdc3c7;
      font-size: 14px;
      pointer-events: auto;
    }

    .controlsHint span {
      color: #e74c3c;
      margin: 0 8px;
    }

    .wagon {
      position: absolute;
      border-radius: 6px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .locomotive {
      border-radius: 8px 8px 0 0;
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <canvas id="gameCanvas"></canvas>
    <div id="ui">
      <div id="score">Score: 0</div>
      <div id="highScore">High: 0</div>
    </div>
    <div id="startMsg">Click or press a key to start</div>
    <div class="controlsHint">Use <span>WASD</span> or <span>Arrow keys</span> to move</div>
  </div>

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

    let viewportWidth = 1280;
    let viewportHeight = 800;
    canvas.width = viewportWidth;
    canvas.height = viewportHeight;

    const gridSize = 20;
    const cellCount = Math.floor(viewportWidth / gridSize);
    const snakeSpeed = 150; // ms per move

    // Colors for wagons
    const wagonColors = [
      '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4',
      '#FFE65D', '#FF8C42', '#AB5CF2', '#FFA07A'
    ];

    // Passenger colors
    const passengerColors = [
      '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4',
      '#FFE65D', '#FF8C42', '#AB5CF2', '#FFA07A'
    ];

    // Snake train structure: each segment has type 'locomotive' or 'wagon'
    // Wagons have a passenger indicator
    const gameState = {
      snake: [],
      direction: { x: 1, y: 0 },
      nextDirection: { x: 1, y: 0 },
      food: null,
      passengers: [],
      score: 0,
      highScore: parseInt(localStorage.getItem('trainSnakeHigh') || '0'),
      gameOver: false,
      isPlaying: false,
      moveTimer: 0,
      wagonGrowth: 0
    };

    // Initialize high score display
    highScoreEl.textContent = `High: ${gameState.highScore}`;

    // Responsive canvas
    function resizeCanvas() {
      const container = document.getElementById('gameContainer');
      const rect = container.getBoundingClientRect();
      const width = Math.min(rect.width, 1280);
      const height = Math.min(rect.height, 800);
      viewportWidth = width;
      viewportHeight = height;
      canvas.width = viewportWidth;
      canvas.height = viewportHeight;
      gameState.food = null;
      gameState.passengers = [];
    }

    window.addEventListener('resize', resizeCanvas);

    // Snake train classes
    class Locomotive {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = gridSize;
        this.height = gridSize;
      }

      draw() {
        // Locomotive body
        ctx.fillStyle = '#2C3E50';
        ctx.fillRect(this.x, this.y, this.width, this.height);

        // Locomotive details
        ctx.fillStyle = '#34495E';
        // Front
        ctx.fillRect(this.x, this.y, this.width, this.height / 2);
        // Windows
        ctx.fillStyle = '#EA630C';
        ctx.fillRect(this.x + 4, this.y + 4, 8, 8);
        ctx.fillRect(this.x + this.width - 12, this.y + 4, 8, 8);
        ctx.fillRect(this.x + 4, this.y + this.height / 2 - 4, 8, 8);
        ctx.fillRect(this.x + this.width - 12, this.y + this.height / 2 - 4, 8, 8);
        
        // Grill
        ctx.fillStyle = '#1A1A1A';
        ctx.fillRect(this.x + 2, this.y + this.height - 6, this.width - 4, 4);
        
        // Headlight
        ctx.fillStyle = '#FFFF00';
        ctx.beginPath();
        ctx.arc(this.x + this.width - 6, this.y + this.height / 2, 4, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    class Wagon {
      constructor(x, y, colorIndex) {
        this.x = x;
        this.y = y;
        this.width = gridSize;
        this.height = gridSize;
        this.color = wagonColors[colorIndex % wagonColors.length];
        this.hasPassenger = false;
        this.passengerColor = null;
      }

      draw() {
        // Wagon body
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        
        // Wagon detail
        ctx.fillStyle = '#ECF0F1';
        ctx.fillRect(this.x + 2, this.y + 2, this.width - 4, this.height - 4);
        
        // Side stripes
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y + this.height / 3, this.width, 3);
        ctx.fillRect(this.x, this.y + this.height * 2 / 3, this.width, 3);
      }

      drawPassenger() {
        if (!this.hasPassenger) return;
        
        ctx.fillStyle = this.passengerColor;
        ctx.beginPath();
        ctx.arc(
          this.x + this.width / 2,
          this.y + this.height / 2,
          this.width / 3,
          0,
          Math.PI * 2
        );
        ctx.fill();
        
        // Passenger eyes
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(this.x + this.width / 2 - 4, this.y + this.height / 2 - 3, 2, 0, Math.PI * 2);
        ctx.arc(this.x + this.width / 2 + 4, this.y + this.height / 2 - 3, 2, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    class Passenger {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.width = gridSize;
        this.height = gridSize;
        this.color = passengerColors[Math.floor(Math.random() * passengerColors.length)];
      }

      draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        
        // Happy face
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(this.x + 6, this.y + 6, 3, 0, Math.PI * 2);
        ctx.arc(this.x + this.width - 6, this.y + 6, 3, 0, Math.PI * 2);
        ctx.fill();
        
        // Mouth
        ctx.strokeStyle = 'darken(' + this.color + ', 20%)';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(this.x + this.width / 2, this.y + this.height - 6);
        ctx.arc(this.x + this.width / 2, this.y + this.height - 6, 4, 0, Math.PI);
        ctx.stroke();
      }
    }

    // Generate food (platform)
    function createFood() {
      let valid = false;
      while (!valid) {
        const x = Math.floor(Math.random() * (cellCount - 2)) + 1;
        const y = Math.floor(Math.random() * (cellCount - 2)) + 1;
        valid = !gameState.snake.some(seg => seg.x === x && seg.y === y);
        if (valid) {
          gameState.food = { x, y };
        }
      }
    }

    // Generate passengers on platform
    function createPassengers() {
      gameState.passengers = [];
      const passengerCount = Math.min(3 + Math.floor(gameState.score / 5), 8);
      
      for (let i = 0; i < passengerCount; i++) {
        let valid = false;
        while (!valid) {
          const x = Math.floor(Math.random() * (cellCount - 2)) + 1;
          const y = Math.floor(Math.random() * (cellCount - 2)) + 1;
          // Don't spawn on snake
          valid = !gameState.snake.some(seg => seg.x === x && seg.y === y);
          if (valid) {
            gameState.passengers.push(new Passenger(x * gridSize, y * gridSize));
          }
        }
      }
    }

    // Check collision
    function checkCollision(seg) {
      // Wall collision
      if (seg.x < 0 || seg.x >= cellCount || seg.y < 0 || seg.y >= cellCount) {
        return true;
      }
      // Self collision (except head checking against body segments)
      for (let i = 0; i < gameState.snake.length - 1; i++) {
        if (gameState.snake[i].x === seg.x && gameState.snake[i].y === seg.y) {
          return true;
        }
      }
      return false;
    }

    // Main game loop
    function gameLoop(timestamp) {
      if (!gameState.isPlaying) {
        startMsg.classList.remove('invisible');
        return;
      }

      startMsg.classList.add('invisible');

      // Handle direction changes
      gameState.direction = { ...gameState.nextDirection };

      // Move timer
      gameState.moveTimer += timestamp - (gameState.moveTimestamp || timestamp);
      gameState.moveTimestamp = timestamp;

      if (gameState.moveTimer >= snakeSpeed) {
        gameState.moveTimer = 0;

        // Create new head
        const head = gameState.snake[0];
        const newHead = {
          x: head.x + gameState.direction.x,
          y: head.y + gameState.direction.y,
          type: 'locomotive'
        };

        // Check collisions
        if (checkCollision(newHead)) {
          gameOver();
          return;
        }

        // Check food collision
        if (newHead.x === gameState.food.x && newHead.y === gameState.food.y) {
          gameState.score++;
          scoreEl.textContent = `Score: ${gameState.score}`;
          
          // Update high score
          if (gameState.score > gameState.highScore) {
            gameState.highScore = gameState.score;
            localStorage.setItem('trainSnakeHigh', gameState.score.toString());
            highScoreEl.textContent = `High: ${gameState.highScore}`;
          }
          
          createFood();
          createPassengers();
          gameState.wagonGrowth += 2; // Add 2 wagon segments
        }

        // Move snake
        gameState.sunshift(newHead);

        // Handle wagon growth
        if (gameState.wagonGrowth > 0) {
          gameState.wagonGrowth--;
        } else {
          gameState.snake.pop();
        }

        // Assign passengers to new wagons
        if (gameState.snake.length > 1 && Math.random() < 0.3) {
          const lastWagon = gameState.snake[gameState.snake.length - 1];
          if (lastWagon.type === 'wagon') {
            lastWagon.hasPassenger = true;
            lastWagon.passengerColor = passengerColors[Math.floor(Math.random() * passengerColors.length)];
          }
        }

        // Draw everything
        drawGame();
      }

      requestAnimationFrame(gameLoop);
    }

    function drawGame() {
      // Clear canvas
      ctx.fillStyle = '#2C3E50';
      ctx.fillRect(0, 0, viewportWidth, viewportHeight);

      // Draw grid
      ctx.strokeStyle = '#5D6D7E';
      ctx.lineWidth = 1;
      for (let i = 0; i < cellCount; i++) {
        ctx.beginPath();
        ctx.moveTo(i * gridSize, 0);
        ctx.lineTo(i * gridSize, viewportHeight);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize);
        ctx.lineTo(viewportWidth, i * gridSize);
        ctx.stroke();
      }

      // Draw food (platform)
      if (gameState.food) {
        ctx.fillStyle = '#E74C3C';
        ctx.beginPath();
        const x = gameState.food.x * gridSize + gridSize / 2;
        const y = gameState.food.y * gridSize + gridSize / 2;
        const radius = gridSize / 2 - 4;
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();

        // Platform base
        ctx.fillStyle = '#C0392B';
        ctx.fillRect(gameState.food.x * gridSize, gameState.food.y * gridSize + gridSize / 2, gridSize, gridSize / 2);
      }

      // Draw passengers on platform
      gameState.passengers.forEach(passenger => {
        passenger.draw();
      });

      // Draw snake train
      gameState.snake.forEach((seg, index) => {
        if (seg.type === 'locomotive') {
          const loco = new Locomotive(seg.x, seg.y);
          loco.draw();
        } else if (seg.type === 'wagon') {
          const wagon = new Wagon(seg.x, seg.y, index);
          wagon.draw();
          wagon.drawPassenger();
        }
      });

      // Draw UI border info
      ctx.fillStyle = 'rgba(0,0,0,0.5)';
      ctx.fillRect(0, 0, viewportWidth, 30);
    }

    function gameOver() {
      gameState.isPlaying = false;
      // Show final score message
      startMsg.textContent = `Game Over! Score: ${gameState.score}`;
      startMsg.classList.remove('invisible');
    }

    function startGame() {
      // Reset game state
      gameState.snake = [];
      gameState.direction = { x: 1, y: 0 };
      gameState.nextDirection = { x: 1, y: 0 };
      gameState.food = null;
      gameState.passengers = [];
      gameState.score = 0;
      gameState.gameOver = false;
      gameState.wagonGrowth = 0;
      gameState.isPlaying = true;
      startMsg.classList.add('invisible');

      // Initialize snake - start with locomotive + 2 wagons
      const startX = Math.floor(cellCount / 2);
      const startY = Math.floor(cellCount / 2);
      
      gameState.snake.push({ x: startX, y: startY, type: 'locomotive' });
      gameState.snake.push({ x: startX - 1, y: startY, type: 'wagon' });
      gameState.snake.push({ x: startX - 2, y: startY, type: 'wagon' });

      // Set initial wagon passengers
      if (gameState.snake[1]) gameState.snake[1].hasPassenger = true;
      if (gameState.snake[2]) gameState.snake[2].hasPassenger = true;

      // Initial food and passengers
      createFood();
      createPassengers();

      // Start loop
      requestAnimationFrame(gameLoop);
    }

    // Controls
    document.addEventListener('keydown', (e) => {
      if (!gameState.isPlaying) {
        if (e.code === 'Space' || e.code === 'Enter' || e.key === ' ') {
          startGame();
        }
        return;
      }

      const key = e.key.toLowerCase();
      
      if (key === 'w' || key === 'arrowup') {
        gameState.nextDirection = { x: 0, y: -1 };
      } else if (key === 's' || key === 'arrowdown') {
        gameState.nextDirection = { x: 0, y: 1 };
      } else if (key === 'a' || key === 'arrowleft') {
        gameState.nextDirection = { x: -1, y: 0 };
      } else if (key === 'd' || key === 'arrowright') {
        gameState.nextDirection = { x: 1, y: 0 };
      }
    });

    // Click to start
    document.getElementById('gameContainer').addEventListener('click', () => {
      if (!gameState.isPlaying) {
        startGame();
      }
    });

    // Initialize on load
    window.addEventListener('load', () => {
      resizeCanvas();
      startMsg.classList.remove('invisible');
    });
  </script>
</body>
</html>