Nemotron 3 Ultra (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>
:root {
  --bg: #1a1f2e;
  --grid: #252d42;
  --platform: #2d3a5c;
  --text: #e8eef8;
  --accent: #ffd93d;
  --loco: #e84545;
  --loco-dark: #b83030;
  --wheel: #1a1f2e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 10px; letter-spacing: 2px; text-transform: uppercase; }
.score-board { display: flex; gap: 30px; margin-bottom: 15px; font-size: clamp(1rem, 2.5vw, 1.3rem); }
.score-board span { color: var(--accent); }
#game-container { position: relative; }
canvas { display: block; background: var(--grid); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.4), inset 0 0 0 2px var(--platform); }
#overlay {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(26,31,46,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
#overlay.hidden { opacity: 0; visibility: hidden; }
#overlay h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); color: var(--accent); text-shadow: 0 0 20px rgba(255,217,61,0.5); }
#overlay p { font-size: clamp(1rem, 2.5vw, 1.3rem); color: #9ab0d6; text-align: center; max-width: 80%; line-height: 1.6; }
.controls-hint { font-size: 0.85rem; color: #6a7a9a; margin-top: 10px; }
@media (max-width: 500px) {
  body { padding: 10px; }
  .score-board { gap: 15px; font-size: 0.9rem; }
}
</style>
</head>
<body>
<h1>Train Snake</h1>
<div class="score-board">
  <div>Passengers: <span id="score">0</span></div>
  <div>Wagons: <span id="length">1</span></div>
  <div>Best: <span id="best">0</span></div>
</div>
<div id="game-container">
  <canvas id="canvas"></canvas>
  <div id="overlay">
    <h2>TRAIN SNAKE</h2>
    <p>Guide the locomotive to pick up waiting passengers.<br>Each passenger adds a colorful wagon to your train.<br>Don't crash into yourself or the edges!</p>
    <p class="controls-hint">Click or press any key to start • Arrow keys or WASD to steer</p>
  </div>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const overlay = document.getElementById('overlay');
const scoreEl = document.getElementById('score');
const lengthEl = document.getElementById('length');
const bestEl = document.getElementById('best');

const CELL = 32;
const COLS = 25;
const ROWS = 15;
canvas.width = COLS * CELL;
canvas.height = ROWS * CELL;

const COLORS = {
  bg: '#1a1f2e',
  grid: '#252d42',
  platform: '#2d3a5c',
  loco: '#e84545',
  locoDark: '#b83030',
  locoLight: '#ff6b6b',
  wheel: '#1a1f2e',
  wheelHighlight: '#3a4055',
  chimney: '#c03838',
  smoke: '#8a9ab0',
  passenger: '#ffd93d',
  passengerShadow: '#e8c030',
  text: '#e8eef8'
};

const WAGON_COLORS = [
  '#4ecdc4', '#45b7aa', '#ff6b6b', '#ff8e8e', '#ffe66d', '#fff08a',
  '#a8e6cf', '#b8f0d8', '#ffa07a', '#ffb89a', '#c7ceea', '#d8ddf0',
  '#ffd3b6', '#ffdfd0', '#b4f8c8', '#c8fad0', '#fbc4f6', '#fdd8f8',
  '#87ceeb', '#a8dff0', '#ffb347', '#ffcc77'
];

const DIRS = { up: {x:0,y:-1}, down:{x:0,y:1}, left:{x:-1,y:0}, right:{x:1,y:0} };
const KEY_MAP = {
  'ArrowUp':'up','ArrowDown':'down','ArrowLeft':'left','ArrowRight':'right',
  'w':'up','s':'down','a':'left','d':'right',
  'W':'up','S':'down','A':'left','D':'right'
};

let snake = [];
let direction = 'right';
let nextDirection = 'right';
let passengers = [];
let platforms = [];
let score = 0;
let best = parseInt(localStorage.getItem('trainSnakeBest') || '0');
let gameLoop = null;
let running = false;
let demoMode = true;
let animationTime = 0;
let smokeParticles = [];

bestEl.textContent = best;

function initGame() {
  snake = [
    {x: 3, y: 7},
    {x: 2, y: 7},
    {x: 1, y: 7}
  ];
  direction = 'right';
  nextDirection = 'right';
  score = 0;
  smokeParticles = [];
  generatePlatforms();
  spawnPassenger();
  scoreEl.textContent = score;
  lengthEl.textContent = snake.length;
}

function generatePlatforms() {
  platforms = [];
  const numPlatforms = 4;
  for (let i = 0; i < numPlatforms; i++) {
    let x, y;
    let attempts = 0;
    do {
      x = Math.floor(Math.random() * (COLS - 4)) + 2;
      y = Math.floor(Math.random() * (ROWS - 4)) + 2;
      attempts++;
    } while (attempts < 50 && (isOnSnake(x, y) || isNearPlatform(x, y)));
    if (attempts < 50) {
      platforms.push({x, y, w: 3, h: 2});
    }
  }
}

function isNearPlatform(x, y) {
  return platforms.some(p => Math.abs(p.x - x) < 5 && Math.abs(p.y - y) < 5);
}

function isOnSnake(x, y) {
  return snake.some(s => s.x === x && s.y === y);
}

function spawnPassenger() {
  if (platforms.length === 0) return;
  const platform = platforms[Math.floor(Math.random() * platforms.length)];
  let x, y;
  const spots = [];
  for (let px = platform.x; px < platform.x + platform.w; px++) {
    for (let py = platform.y; py < platform.y + platform.h; py++) {
      if (!isOnSnake(px, py) && !passengers.some(p => p.x === px && p.y === py)) {
        spots.push({x: px, y: py});
      }
    }
  }
  if (spots.length > 0) {
    const spot = spots[Math.floor(Math.random() * spots.length)];
    passengers.push({x: spot.x, y: spot.y, bob: Math.random() * Math.PI * 2, waitTime: 0});
  }
}

function updateDemoAI() {
  if (!demoMode) return;
  const head = snake[0];
  let target = null;
  let minDist = Infinity;
  passengers.forEach(p => {
    const dist = Math.abs(p.x - head.x) + Math.abs(p.y - head.y);
    if (dist < minDist) {
      minDist = dist;
      target = p;
    }
  });
  if (!target) return;
  
  const dx = target.x - head.x;
  const dy = target.y - head.y;
  
  const possibleDirs = [];
  if (Math.abs(dx) > Math.abs(dy)) {
    if (dx > 0 && direction !== 'left') possibleDirs.push('right');
    if (dx < 0 && direction !== 'right') possibleDirs.push('left');
    if (dy > 0 && direction !== 'up') possibleDirs.push('down');
    if (dy < 0 && direction !== 'down') possibleDirs.push('up');
  } else {
    if (dy > 0 && direction !== 'up') possibleDirs.push('down');
    if (dy < 0 && direction !== 'down') possibleDirs.push('up');
    if (dx > 0 && direction !== 'left') possibleDirs.push('right');
    if (dx < 0 && direction !== 'right') possibleDirs.push('left');
  }
  
  for (const dir of possibleDirs) {
    const testHead = {x: head.x + DIRS[dir].x, y: head.y + DIRS[dir].y};
    if (!willCollide(testHead)) {
      nextDirection = dir;
      return;
    }
  }
  
  for (const dir of ['up','down','left','right']) {
    if (dir !== oppositeDir(direction)) {
      const testHead = {x: head.x + DIRS[dir].x, y: head.y + DIRS[dir].y};
      if (!willCollide(testHead)) {
        nextDirection = dir;
        return;
      }
    }
  }
}

function oppositeDir(d) {
  return ({up:'down', down:'up', left:'right', right:'left'})[d];
}

function willCollide(pos) {
  if (pos.x < 0 || pos.x >= COLS || pos.y < 0 || pos.y >= ROWS) return true;
  return snake.some((s, i) => i < snake.length - 1 && s.x === pos.x && s.y === pos.y);
}

function step() {
  direction = nextDirection;
  const head = {x: snake[0].x + DIRS[direction].x, y: snake[0].y + DIRS[direction].y};
  
  if (willCollide(head)) {
    gameOver();
    return;
  }
  
  snake.unshift(head);
  
  let ate = false;
  passengers = passengers.filter(p => {
    if (p.x === head.x && p.y === head.y) {
      ate = true;
      score++;
      scoreEl.textContent = score;
      lengthEl.textContent = snake.length;
      if (score > best) {
        best = score;
        bestEl.textContent = best;
        localStorage.setItem('trainSnakeBest', best.toString());
      }
      return false;
    }
    return true;
  });
  
  if (!ate) {
    snake.pop();
  } else {
    spawnPassenger();
  }
  
  updateSmoke();
}

function updateSmoke() {
  const head = snake[0];
  const dir = DIRS[direction];
  const smokeX = head.x * CELL + CELL/2 - dir.x * CELL * 0.6;
  const smokeY = head.y * CELL + CELL/2 - dir.y * CELL * 0.6;
  
  for (let i = 0; i < 2; i++) {
    smokeParticles.push({
      x: smokeX + (Math.random() - 0.5) * 8,
      y: smokeY + (Math.random() - 0.5) * 8,
      vx: -dir.x * (0.5 + Math.random() * 0.5) + (Math.random() - 0.5) * 0.3,
      vy: -dir.y * (0.5 + Math.random() * 0.5) + (Math.random() - 0.5) * 0.3,
      life: 1,
      size: 4 + Math.random() * 6,
      color: `rgba(138, 154, 176, ${0.4 + Math.random() * 0.3})`
    });
  }
  
  smokeParticles = smokeParticles.filter(p => {
    p.x += p.vx;
    p.y += p.vy;
    p.life -= 0.02;
    p.size *= 1.02;
    return p.life > 0;
  });
}

function gameOver() {
  running = false;
  clearInterval(gameLoop);
  overlay.querySelector('h2').textContent = demoMode ? 'TRAIN SNAKE' : 'GAME OVER';
  overlay.querySelector('p').innerHTML = demoMode 
    ? 'Guide the locomotive to pick up waiting passengers.<br>Each passenger adds a colorful wagon to your train.<br>Don\'t crash into yourself or the edges!'
    : `Final passengers: ${score}<br>Train length: ${snake.length}<br>Best: ${best}`;
  overlay.classList.remove('hidden');
}

function draw() {
  ctx.fillStyle = COLORS.grid;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  drawGrid();
  drawPlatforms();
  drawPassengers();
  drawSmoke();
  drawTrain();
}

function drawGrid() {
  ctx.strokeStyle = '#1e2638';
  ctx.lineWidth = 1;
  for (let x = 0; x <= COLS; x++) {
    ctx.beginPath();
    ctx.moveTo(x * CELL, 0);
    ctx.lineTo(x * CELL, canvas.height);
    ctx.stroke();
  }
  for (let y = 0; y <= ROWS; y++) {
    ctx.beginPath();
    ctx.moveTo(0, y * CELL);
    ctx.lineTo(canvas.width, y * CELL);
    ctx.stroke();
  }
}

function drawPlatforms() {
  platforms.forEach(p => {
    const x = p.x * CELL;
    const y = p.y * CELL;
    const w = p.w * CELL;
    const h = p.h * CELL;
    
    const grad = ctx.createLinearGradient(x, y, x, y + h);
    grad.addColorStop(0, '#354268');
    grad.addColorStop(1, '#253050');
    ctx.fillStyle = grad;
    ctx.fillRect(x, y, w, h);
    
    ctx.strokeStyle = '#4a5a80';
    ctx.lineWidth = 2;
    ctx.strokeRect(x + 1, y + 1, w - 2, h - 2);
    
    ctx.fillStyle = '#3a4a6e';
    for (let i = 0; i < w; i += 8) {
      ctx.fillRect(x + i, y + 2, 4, h - 4);
    }
    
    ctx.fillStyle = '#5a6a90';
    ctx.font = 'bold 10px monospace';
    ctx.textAlign = 'center';
    ctx.fillText('PLATFORM', x + w/2, y + h/2 + 3);
  });
}

function drawPassengers() {
  animationTime += 0.1;
  passengers.forEach(p => {
    const cx = p.x * CELL + CELL/2;
    const cy = p.y * CELL + CELL/2;
    const bob = Math.sin(animationTime + p.bob) * 3;
    
    ctx.save();
    ctx.translate(cx, cy + bob);
    
    ctx.fillStyle = '#3a3a3a';
    ctx.beginPath();
    ctx.ellipse(0, CELL/2 - 2, 10, 3, 0, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.fillStyle = '#444';
    ctx.fillRect(-6, -10, 12, 18, 2);
    
    ctx.fillStyle = '#ffd93d';
    ctx.beginPath();
    ctx.arc(0, -16, 8, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.fillStyle = '#e8c030';
    ctx.beginPath();
    ctx.arc(0, -16, 5, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.fillStyle = '#fff8c0';
    ctx.beginPath();
    ctx.arc(-2, -18, 2, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.fillStyle = '#fff';
    ctx.fillRect(-3, -8, 6, 6);
    ctx.fillStyle = '#222';
    ctx.fillRect(-1, -6, 2, 2);
    ctx.fillRect(1, -6, 2, 2);
    
    ctx.fillStyle = '#ff6b6b';
    ctx.beginPath();
    ctx.moveTo(-8, 0);
    ctx.lineTo(0, 8);
    ctx.lineTo(8, 0);
    ctx.closePath();
    ctx.fill();
    
    ctx.fillStyle = '#ff8e8e';
    ctx.fillRect(-5, -2, 10, 4);
    
    ctx.restore();
  });
}

function drawSmoke() {
  smokeParticles.forEach(p => {
    ctx.globalAlpha = p.life * 0.6;
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
    ctx.fill();
  });
  ctx.globalAlpha = 1;
}

function drawTrain() {
  snake.forEach((seg, i) => {
    const x = seg.x * CELL;
    const y = seg.y * CELL;
    const cx = x + CELL/2;
    const cy = y + CELL/2;
    
    if (i === 0) {
      drawLocomotive(cx, cy, x, y);
    } else {
      drawWagon(cx, cy, x, y, i - 1);
    }
    
    if (i < snake.length - 1) {
      drawCoupling(snake[i], snake[i+1]);
    }
  });
}

function drawLocomotive(cx, cy, x, y) {
  const isHorizontal = direction === 'left' || direction === 'right';
  const facingRight = direction === 'right';
  const facingUp = direction === 'up';
  
  ctx.save();
  ctx.translate(cx, cy);
  
  if (facingRight) ctx.scale(1, 1);
  else if (direction === 'left') ctx.scale(-1, 1);
  else if (facingUp) ctx.rotate(-Math.PI/2);
  else ctx.rotate(Math.PI/2);
  
  ctx.translate(-cx, -cy);
  
  const baseX = x;
  const baseY = y;
  
  ctx.fillStyle = COLORS.locoDark;
  ctx.fillRect(baseX + 4, baseY + 8, CELL - 8, CELL - 12);
  
  ctx.fillStyle = COLORS.loco;
  ctx.fillRect(baseX + 6, baseY + 6, CELL - 12, CELL - 8);
  
  ctx.fillStyle = COLORS.locoLight;
  ctx.fillRect(baseX + 8, baseY + 6, CELL - 16, 4);
  ctx.fillRect(baseX + 8, baseY + 10, 4, CELL - 16);
  
  ctx.fillStyle = COLORS.chimney;
  ctx.fillRect(baseX + 10, baseY + 2, 10, 8);
  ctx.fillStyle = '#a02828';
  ctx.fillRect(baseX + 12, baseY + 2, 6, 4);
  
  const smokeOffset = animationTime * 0.5;
  for (let i = 0; i < 3; i++) {
    const sy = baseY + 2 - (i * 5) - (smokeOffset % 15);
    const alpha = 0.4 - i * 0.1;
    ctx.fillStyle = `rgba(138, 154, 176, ${alpha})`;
    ctx.beginPath();
    ctx.arc(baseX + 15, sy, 3 + i, 0, Math.PI * 2);
    ctx.fill();
  }
  
  ctx.fillStyle = '#3a3a3a';
  ctx.fillRect(baseX + 2, baseY + CELL - 6, CELL - 4, 6);
  
  ctx.fillStyle = COLORS.wheel;
  ctx.beginPath();
  ctx.arc(baseX + 8, baseY + CELL - 3, 6, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(baseX + CELL - 8, baseY + CELL - 3, 6, 0, Math.PI * 2);
  ctx.fill();
  
  ctx.fillStyle = COLORS.wheelHighlight;
  ctx.beginPath();
  ctx.arc(baseX + 8, baseY + CELL - 3, 3, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(baseX + CELL - 8, baseY + CELL - 3, 3, 0, Math.PI * 2);
  ctx.fill();
  
  ctx.fillStyle = '#ffd93d';
  ctx.beginPath();
  ctx.arc(baseX + CELL - 4, baseY + 10, 4, -Math.PI/2, Math.PI/2);
  ctx.fill();
  
  ctx.fillStyle = '#fff';
  ctx.fillRect(baseX + CELL - 14, baseY + 12, 8, 6);
  ctx.fillStyle = '#222';
  ctx.fillRect(baseX + CELL - 12, baseY + 13, 4, 4);
  
  ctx.restore();
}

function drawWagon(cx, cy, x, y, wagonIndex) {
  const color = WAGON_COLORS[wagonIndex % WAGON_COLORS.length];
  const darkColor = shadeColor(color, -30);
  const lightColor = shadeColor(color, 20);
  
  ctx.fillStyle = darkColor;
  ctx.fillRect(x + 2, y + 6, CELL - 4, CELL - 10, 4);
  
  ctx.fillStyle = color;
  ctx.fillRect(x + 4, y + 4, CELL - 8, CELL - 8, 3);
  
  ctx.fillStyle = lightColor;
  ctx.fillRect(x + 6, y + 6, CELL - 12, 4);
  ctx.fillRect(x + 6, y + 10, 4, CELL - 16);
  
  ctx.fillStyle = '#fff';
  ctx.fillRect(x + 8, y + 8, CELL - 16, CELL - 16);
  ctx.fillStyle = '#4a5a80';
  ctx.fillRect(x + 8, y + 8, CELL - 16, 2);
  ctx.fillRect(x + 8, y + 8, 2, CELL - 16);
  
  ctx.fillStyle = COLORS.wheel;
  ctx.beginPath();
  ctx.arc(x + 8, y + CELL - 3, 5, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(x + CELL - 8, y + CELL - 3, 5, 0, Math.PI * 2);
  ctx.fill();
  
  ctx.fillStyle = COLORS.wheelHighlight;
  ctx.beginPath();
  ctx.arc(x + 8, y + CELL - 3, 2.5, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(x + CELL - 8, y + CELL - 3, 2.5, 0, Math.PI * 2);
  ctx.fill();
  
  const num = (wagonIndex + 1).toString();
  ctx.fillStyle = '#fff';
  ctx.font = 'bold 14px monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(num, cx, cy + 1);
  ctx.fillStyle = '#222';
  ctx.fillText(num, cx, cy);
}

function drawCoupling(seg1, seg2) {
  const x1 = seg1.x * CELL + CELL/2;
  const y1 = seg1.y * CELL + CELL/2;
  const x2 = seg2.x * CELL + CELL/2;
  const y2 = seg2.y * CELL + CELL/2;
  
  ctx.strokeStyle = '#555';
  ctx.lineWidth = 3;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  
  ctx.fillStyle = '#777';
  const mx = (x1 + x2) / 2;
  const my = (y1 + y2) / 2;
  ctx.beginPath();
  ctx.arc(mx, my, 3, 0, Math.PI * 2);
  ctx.fill();
}

function shadeColor(color, percent) {
  const num = parseInt(color.slice(1), 16);
  const amt = Math.round(2.55 * percent);
  const R = (num >> 16) + amt;
  const G = (num >> 8 & 0x00FF) + amt;
  const B = (num & 0x0000FF) + amt;
  return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}

function gameLoopFn() {
  if (!running) return;
  updateDemoAI();
  step();
  draw();
}

function startGame(isDemo = true) {
  demoMode = isDemo;
  running = true;
  overlay.classList.add('hidden');
  initGame();
  draw();
  if (gameLoop) clearInterval(gameLoop);
  gameLoop = setInterval(gameLoopFn, 120);
}

function handleKey(e) {
  if (!running) {
    startGame(false);
    return;
  }
  if (demoMode) {
    startGame(false);
    return;
  }
  const dir = KEY_MAP[e.key];
  if (dir && dir !== oppositeDir(direction)) {
    nextDirection = dir;
  }
}

function handleClick() {
  if (!running) {
    startGame(false);
  } else if (demoMode) {
    startGame(false);
  }
}

window.addEventListener('keydown', handleKey);
canvas.addEventListener('click', handleClick);

startGame(true);
</script>
</body>
</html>