Nemotron 3.5 Super VL (free)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polished Snake Demo</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0f0f1a;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

#game-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding: 20px;
}

#canvas {
  width: 100%;
  max-width: 600px;
  height: auto;
  background: linear-gradient(#1a1a2e, #0d0d15);
  border: 4px solid #2a2a4e;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
  display: block;
}

canvas {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

#hud {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #aaa;
}

#score, #best { font-weight: bold; color: #fff; }

#overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,15,26,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-align: center;
  padding: 30px;
  z-index: 10;
}

#overlay h1 {
  font-size: 48px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#overlay p {
  color: #888;
  margin-bottom: 20px;
  font-size: 16px;
}

#final-score {
  font-size: 28px;
  color: #00d2ff;
  margin-bottom: 25px;
}

button {
  background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
  border: none;
  color: white;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,210,255,0.3);
  transition: transform 0.1s;
}

button:active { transform: scale(0.95); }

#controls-hint {
  position: absolute;
  bottom: -35px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #666;
}

.paused-text {
  font-size: 32px;
  color: #fff;
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 480px) {
  #overlay h1 { font-size: 32px; }
  #hud { top: -30px; font-size: 12px; }
}
</style>
</head>
<body>

<div id="game-container">
  <div id="hud">
    <span>Score: <span id="score">0</span></span>
    <span>Best: <span id="best">0</span></span>
  </div>

  <canvas id="canvas" width="600" height="600"></canvas>

  <div id="overlay">
    <h1>SNAKE</h1>
    <div id="final-score">Final Score: 0</div>
    <p>Click or press any key to start</p>
    <button id="start-btn">Start Game</button>
  </div>

  <div class="paused-text" id="paused">Paused</div>

  <div id="controls-hint">
    Arrow keys / WASD to move • P to pause • Space/Enter to restart
  </div>
</div>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');
const bestEl = document.getElementById('best');
const finalScoreEl = document.getElementById('final-score');
const overlay = document.getElementById('overlay');
const startBtn = document.getElementById('start-btn');
const pausedEl = document.getElementById('paused');

// Game constants
const GRID = 20;
const CELL = canvas.width / GRID; // 30px

// Game state
let score = 0;
let best = 0;
let gameRunning = false;
let gamePaused = false;
let snake = [];
let food = { x: 0, y: 0 };
let dir = { x: 1, y: 0 };
let nextDir = { x: 1, y: 0 };
let lastKeyDir = { x: 1, y: 0 };
let lastTime = 0;
let moveInterval = 120; // ms per grid step
let accumulator = 0;
let particles = [];
let animationId;

// Direction vectors
const DIRS = {
  up: { x: 0, y: -1 },
  down: { x: 0, y: 1 },
  left: { x: -1, y: 0 },
  right: { x: 1, y: 0 }
};

// Initialize
function init() {
  resetGame();
  draw();
  updateHUD();
}

function resetGame() {
  snake = [
    { x: 5, y: 10 },
    { x: 4, y: 10 },
    { x: 3, y: 10 }
  ];
  dir = { x: 1, y: 0 };
  nextDir = { x: 1, y: 0 };
  lastKeyDir = { x: 1, y: 0 };
  score = 0;
  moveInterval = 120;
  particles = [];
  placeFood();
  gameRunning = true;
  gamePaused = false;
  overlay.style.display = 'none';
  pausedEl.style.display = 'none';
  scoreEl.textContent = '0';
  lastTime = performance.now();
  requestAnimationFrame(loop);
}

function placeFood() {
  let valid = false;
  while (!valid) {
    food.x = Math.floor(Math.random() * GRID);
    food.y = Math.floor(Math.random() * GRID);
    valid = !snake.some(s => s.x === food.x && s.y === food.y);
  }
}

function updateHUD() {
  scoreEl.textContent = score;
  bestEl.textContent = best;
}

function gameOver() {
  gameRunning = false;
  if (score > best) {
    best = score;
    updateHUD();
  }
  finalScoreEl.textContent = `Final Score: ${score}`;
  overlay.style.display = 'flex';
}

function handleInput(key) {
  if (!gameRunning) {
    resetGame();
    return;
  }

  if (key === ' ' || key === 'Enter') {
    if (!gamePaused) {
      gamePaused = true;
      pausedEl.style.display = 'flex';
    } else {
      gamePaused = false;
      pausedEl.style.display = 'none';
      lastTime = performance.now();
      requestAnimationFrame(loop);
    }
    return;
  }

  if (key === 'p' || key === 'P') {
    if (!gamePaused) {
      gamePaused = true;
      pausedEl.style.display = 'flex';
    } else {
      gamePaused = false;
      pausedEl.style.display = 'none';
      lastTime = performance.now();
      requestAnimationFrame(loop);
    }
    return;
  }

  if (gamePaused) return;

  let newDir = null;
  switch(key) {
    case 'ArrowUp': case 'w': case 'W': newDir = DIRS.up; break;
    case 'ArrowDown': case 's': case 'S': newDir = DIRS.down; break;
    case 'ArrowLeft': case 'a': case 'A': newDir = DIRS.left; break;
    case 'ArrowRight': case 'd': case 'D': newDir = DIRS.right; break;
    default: return;
  }

  // Prevent 180-degree reversal
  if (newDir.x === -dir.x && newDir.y === -dir.y) return;

  // Quick successive presses: only accept if different from last key press
  // to avoid skipping, but allow same direction to buffer
  if (newDir.x !== lastKeyDir.x || newDir.y !== lastKeyDir.y) {
    lastKeyDir = { ...newDir };
    nextDir = { ...newDir };
  }
}

window.addEventListener('keydown', e => {
  if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' ','Enter'].includes(e.key)) {
    e.preventDefault();
  }
  handleInput(e.key);
});

startBtn.addEventListener('click', () => {
  resetGame();
});

// Touch buttons for mobile could go here, but keyboard is primary

// Particles
function createParticles(x, y) {
  const cx = x * CELL + CELL / 2;
  const cy = y * CELL + CELL / 2;
  for (let i = 0; i < 12; i++) {
    particles.push({
      x: cx,
      y: cy,
      vx: (Math.random() - 0.5) * 4,
      vy: (Math.random() - 0.5) * 4,
      life: 1.0,
      decay: 0.02 + Math.random() * 0.03,
      color: `hsl(${180 + Math.random() * 60}, 100%, 60%)`
    });
  }
}

function updateParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    p.x += p.vx;
    p.y += p.vy;
    p.life -= p.decay;
    if (p.life <= 0) particles.splice(i, 1);
  }
}

function drawParticles() {
  for (const p of particles) {
    ctx.globalAlpha = p.life;
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x, p.y, 2.5, 0, Math.PI * 2);
    ctx.fill();
    ctx.globalAlpha = 1;
  }
}

// Drawing helpers
function drawCell(x, y, color, glow = true) {
  const px = x * CELL;
  const py = y * CELL;
  if (glow) {
    ctx.shadowColor = color;
    ctx.shadowBlur = 12;
  }
  ctx.fillStyle = color;
  ctx.fillRect(px + 1, py + 1, CELL - 2, CELL - 2);
  ctx.shadowBlur = 0;
}

function drawSnake() {
  for (let i = snake.length - 1; i >= 0; i--) {
    const seg = snake[i];
    const isHead = i === 0;
    
    if (isHead) {
      // Head with gradient
      const grad = ctx.createLinearGradient(
        seg.x * CELL, seg.y * CELL,
        seg.x * CELL + CELL, seg.y * CELL + CELL
      );
      grad.addColorStop(0, '#00d2ff');
      grad.addColorStop(1, '#3a7bd5');
      drawCell(seg.x, seg.y, grad, true);
      
      // Eyes
      ctx.fillStyle = '#fff';
      const ex = seg.x * CELL + CELL / 2;
      const ey = seg.y * CELL + CELL / 2;
      const r = 4;
      
      let eye1x, eye1y, eye2x, eye2y;
      if (dir.x === 1) { // right
        eye1x = ex + 6; eye1y = ey - 5;
        eye2x = ex + 6; eye2y = ey + 5;
      } else if (dir.x === -1) { // left
        eye1x = ex - 6; eye1y = ey - 5;
        eye2x = ex - 6; eye2y = ey + 5;
      } else if (dir.y === -1) { // up
        eye1x = ex - 5; eye1y = ey - 6;
        eye2x = ex + 5; eye2y = ey - 6;
      } else { // down
        eye1x = ex - 5; eye1y = ey + 6;
        eye2x = ex + 5; eye2y = ey + 6;
      }
      
      ctx.beginPath();
      ctx.arc(eye1x, eye1y, r, 0, Math.PI*2);
      ctx.arc(eye2x, eye2y, r, 0, Math.PI*2);
      ctx.fill();
      
      // Pupils
      ctx.fillStyle = '#000';
      ctx.beginPath();
      ctx.arc(eye1x + (dir.x * 2), eye1y + (dir.y * 2), 1.5, 0, Math.PI*2);
      ctx.arc(eye2x + (dir.x * 2), eye2y + (dir.y * 2), 1.5, 0, Math.PI*2);
      ctx.fill();
    } else {
      // Body with alternating shade
      ctx.fillStyle = i % 2 === 0 ? '#4facfe' : '#00d2ff';
      ctx.fillRect(
        seg.x * CELL + 2, seg.y * CELL + 2,
        CELL - 4, CELL - 4
      );
    }
  }
}

function drawFood() {
  ctx.fillStyle = '#ff4757';
  ctx.shadowColor = '#ff4757';
  ctx.shadowBlur = 15;
  ctx.beginPath();
  ctx.arc(
    food.x * CELL + CELL/2,
    food.y * CELL + CELL/2,
    CELL/2 - 3,
    0, Math.PI * 2
  );
  ctx.fill();
  ctx.shadowBlur = 0;
}

function drawGrid() {
  ctx.strokeStyle = '#1a1a2e';
  ctx.lineWidth = 1;
  for (let i = 0; i <= GRID; i++) {
    ctx.beginPath();
    ctx.moveTo(i * CELL, 0);
    ctx.lineTo(i * CELL, canvas.height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, i * CELL);
    ctx.lineTo(canvas.width, i * CELL);
    ctx.stroke();
  }
}

function draw() {
  // Clear
  ctx.fillStyle = '#0d0d15';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  drawGrid();
  drawFood();
  drawSnake();
  drawParticles();
}

function update(deltaTime) {
  if (gamePaused || !gameRunning) return;

  accumulator += deltaTime;

  while (accumulator >= moveInterval) {
    accumulator -= moveInterval;
    
    // Apply queued direction
    dir = { ...nextDir };

    const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };

    // Wall collision
    if (head.x < 0 || head.x >= GRID || head.y < 0 || head.y >= GRID) {
      gameOver();
      return;
    }

    // Self collision
    if (snake.some(s => s.x === head.x && s.y === head.y)) {
      gameOver();
      return;
    }

    snake.unshift(head);

    // Eat food
    if (head.x === food.x && head.y === food.y) {
      score += 10;
      updateHUD();
      createParticles(food.x, food.y);
      placeFood();
      // Speed up slightly
      if (moveInterval > 60) moveInterval -= 2;
    } else {
      snake.pop();
    }
  }
}

function loop(now) {
  if (!gameRunning) return;
  const deltaTime = now - lastTime;
  lastTime = now;

  update(deltaTime);
  draw();
  animationId = requestAnimationFrame(loop);
}

init();
</script>

</body>
</html>