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>Polished Snake Game</title>
  <style>
    :root {
      --bg: #0a0a0f;
      --muted: #1a1a24;
      --fg: #e8e8f0;
      --accent: #00d4aa;
      --danger: #ff4757;
      --card: #11111a;
      --grid: #1e1e2a;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      background: var(--bg);
      color: var(--fg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      overflow: hidden;
    }

    #container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
    }

    #canvas {
      background: var(--grid);
      border-radius: 12px;
      box-shadow: 0 0 30px rgba(0,0,0,0.5);
      display: block;
    }

    #ui {
      display: flex;
      gap: 24px;
      align-items: center;
    }

    .score-panel {
      background: var(--card);
      padding: 12px 20px;
      border-radius: 8px;
      backdrop-filter: blur(10px);
      min-width: 120px;
      text-align: left;
    }

    .score-panel h3 {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .score-panel .value {
      font-size: 24px;
      font-weight: 700;
      color: var(--fg);
    }

    .best { color: var(--accent); }

    #start-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: all;
      color: var(--muted);
    }

    #start-message h2 {
      font-size: 24px;
      margin-bottom: 8px;
      color: var(--fg);
    }

    #start-message p {
      font-size: 14px;
      color: var(--muted);
    }

    #overlay {
      position: absolute;
      inset: 0;
      background: rgba(10,10,15,0.8);
      backdrop-filter: blur(4px);
      border-radius: 12px;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      z-index: 10;
    }

    #overlay.visible {
      display: flex;
    }

    #overlay h2 {
      font-size: 28px;
      color: var(--fg);
    }

    #overlay .score {
      font-size: 18px;
      color: var(--accent);
    }

    #overlay .best {
      color: var(--muted);
      font-size: 14px;
    }

    #overlay button {
      background: var(--accent);
      color: var(--bg);
      border: none;
      padding: 10px 24px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.1s;
    }

    #overlay button:hover {
      transform: scale(1.02);
    }

    #pause-indicator {
      position: absolute;
      top: 20px;
      background: rgba(0,212,170,0.2);
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 12px;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div id="container">
    <canvas id="canvas" width="600" height="600"></canvas>
    <div id="ui">
      <div class="score-panel">
        <h3>Score</h3>
        <div class="value" id="score">0</div>
      </div>
      <div class="score-panel">
        <h3>Best</h3>
        <div class="value best" id="best">0</div>
      </div>
    </div>
    <div id="pause-indicator">PAUSED</div>
    <div id="start-message">
      <h2>Snake</h2>
      <p>Arrow keys or WASD to move</p>
    </div>
    <div id="overlay">
      <h2>Game Over</h2>
      <div class="score" id="final-score">0</div>
      <div class="best" id="best-value">Best: 0</div>
      <button id="restart">Restart</button>
    </div>
  </div>

  <script>
    'use strict';

    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 bestValueEl = document.getElementById('best-value');
    const restartBtn = document.getElementById('restart');
    const overlay = document.getElementById('overlay');
    const startMessage = document.getElementById('start-message');
    const pauseIndicator = document.getElementById('pause-indicator');

    const GRID_SIZE = 20;
    const CELL = canvas.width / GRID_SIZE; // 30px cells

    let snake = [];
    let direction = { x: 1, y: 0 };
    let nextDirection = { x: 1, y: 0 };
    let food = null;
    let score = 0;
    let bestScore = parseInt(localStorage.getItem('snakeBest') || '0');
    let gameLoop = null;
    let isPaused = false;
    let particles = [];

    // UI updates
    function updateUI() {
      scoreEl.textContent = score;
      bestEl.textContent = bestScore;
    }

    // Reset game state
    function resetGame() {
      snake = [
        { x: 10, y: 10 },
        { x: 9, y: 10 },
        { x: 8, y: 10 }
      ];
      direction = { x: 1, y: 0 };
      nextDirection = { x: 1, y: 0 };
      score = 0;
      particles = [];
      updateUI();
      spawnFood();
      overlay.classList.remove('visible');
      startMessage.style.display = 'none';
      if (gameLoop) clearInterval(gameLoop);
      gameLoop = setInterval(update, 150);
      isPaused = false;
      pauseIndicator.style.display = 'none';
    }

    // Spawn food not on snake
    function spawnFood() {
      let valid = false;
      while (!valid) {
        food = {
          x: Math.floor(Math.random() * GRID_SIZE),
          y: Math.floor(Math.random() * GRID_SIZE)
        };
        valid = !snake.some(seg => seg.x === food.x && seg.y === food.y);
      }
    }

    // Particle burst on eat
    function createParticles(x, y) {
      const colors = ['#00d4aa', '#ff6b6b', '#4ecdc4'];
      for (let i = 0; i < 8; i++) {
        particles.push({
          x: x * CELL + CELL / 2,
          y: y * CELL + CELL / 2,
          vx: (Math.random() - 0.5) * 6,
          vy: (Math.random() - 0.5) * 6,
          color: colors[Math.floor(Math.random() * colors.length)],
          life: 1,
          decay: Math.random() * 0.01 + 0.005
        });
      }
    }

    // Main update loop
    function update() {
      if (isPaused) return;

      // Apply next direction (prevent reverse)
      if (
        nextDirection.x !== -direction.x &&
        nextDirection.y !== -direction.y
      ) {
        direction = { ...nextDirection };
      }

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

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

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

      snake.unshift(head);

      // Food eaten?
      if (head.x === food.x && head.y === food.y) {
        score += 10;
        bestScore = Math.max(score, bestScore);
        localStorage.setItem('snakeBest', bestScore);
        createParticles(food.x, food.y);
        spawnFood();
        updateUI();
      } else {
        snake.pop();
      }

      // Update particles
      particles = particles.filter(p => {
        p.x += p.vx;
        p.y += p.vy;
        p.life -= p.decay;
        return p.life > 0;
      });
    }

    // Game over handler
    function gameOver() {
      clearInterval(gameLoop);
      isPaused = true;
      finalScoreEl.textContent = score;
      bestValueEl.textContent = `Best: ${bestScore}`;
      overlay.classList.add('visible');
    }

    // Input handling
    function handleKeyDown(e) {
      // Prevent default on direction keys to avoid page scroll
      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'KeyW', 'KeyA', 'KeyS', 'KeyD', 'Space', 'Enter'].includes(e.code)) {
        e.preventDefault();
      }

      // Start game on first key press when at start message
      if (startMessage.style.display !== 'none' && !(e.code === 'Space' || e.code === 'Enter')) {
        startMessage.style.display = 'none';
        resetGame();
        return;
      }

      // Direction inputs
      const key = e.code;
      if (key === 'KeyW' || key === 'ArrowUp') {
        if (direction.y !== 1) nextDirection = { x: 0, y: -1 };
      } else if (key === 'KeyS' || key === 'ArrowDown') {
        if (direction.y !== -1) nextDirection = { x: 0, y: 1 };
      } else if (key === 'KeyA' || key === 'ArrowLeft') {
        if (direction.x !== 1) nextDirection = { x: -1, y: 0 };
      } else if (key === 'KeyD' || key === 'ArrowRight') {
        if (direction.x !== -1) nextDirection = { x: 1, y: 0 };
      }

      // Pause with P or P key
      if (key === 'KeyP') {
        isPaused = !isPaused;
        pauseIndicator.style.display = isPaused ? 'block' : 'none';
        if (!isPaused && gameLoop) {
          // resume
        }
      }

      // Restart or start with Space/Enter
      if ((e.code === 'Space' || e.code === 'Enter') && overlay.classList.contains('visible')) {
        resetGame();
      } else if ((e.code === 'Space' || e.code === 'Enter') && startMessage.style.display === 'none' && !overlay.classList.contains('visible')) {
        // already running
      }
    }

    // Draw everything
    function draw() {
      // Clear
      ctx.fillStyle = '#0a0a0f';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Grid
      ctx.strokeStyle = '#1e1e2a';
      ctx.lineWidth = 1;
      for (let i = 0; i <= GRID_SIZE; i++) {
        ctx.beginPath();
        ctx.moveTo(i * CELL, 0);
        ctx.lineTo(i * CELL, canvas.height);
        ctx.moveTo(0, i * CELL);
        ctx.lineTo(canvas.width, i * CELL);
        ctx.stroke();
      }

      // Food
      if (food) {
        ctx.fillStyle = '#ff5f57';
        ctx.beginPath();
        const radius = CELL * 0.4;
        ctx.arc(food.x * CELL + CELL / 2, food.y * CELL + CELL / 2, radius, 0, Math.PI * 2);
        ctx.fill();
      }

      // Snake
      snake.forEach((seg, i) => {
        const isHead = i === 0;
        const angle = Math.atan2(direction.y, direction.x);

        // Head color slightly different
        ctx.fillStyle = isHead ? '#00d4aa' : '#00a388';

        // Draw rounded rect for segment
        const radius = isHead ? 6 : 5;
        ctx.beginPath();
        const x = seg.x * CELL + CELL / 2;
        const y = seg.y * CELL + CELL / 2;

        // Eye positions based on direction
        const eyeSize = 3;
        let eye1x, eye1y, eye2x, eye2y;

        if (Math.abs(direction.x) > Math.abs(direction.y)) {
          // Horizontal movement
          eye1x = x + (direction.x > 0 ? radius + eyeSize : -eyeSize - radius);
          eye2x = x + (direction.x > 0 ? radius + eyeSize : -eyeSize - radius);
          eye1y = y - radius / 2;
          eye2y = y + radius / 2;
        } else {
          // Vertical movement
          eye1x = x - radius / 2;
          eye2x = x + radius / 2;
          eye1y = y + (direction.y > 0 ? radius + eyeSize : -eyeSize - radius);
          eye2y = y + (direction.y > 0 ? radius + eyeSize : -eyeSize - radius);
        }

        // Draw head with rounded corners
        const diameter = isHead ? CELL - 2 : CELL - 4;
        ctx.moveTo(x + radius, y);
        ctx.arcTo(x + CELL / 2, y, x + CELL - radius, y, radius);
        ctx.arcTo(x + CELL, y + radius, x + CELL - radius, y + CELL, radius);
        ctx.arcTo(x + CELL, y + CELL - radius, x + CELL - radius, y + CELL, radius);
        ctx.arcTo(x + CELL - radius, y + CELL, x, y + CELL - radius, radius);
        ctx.arcTo(x, y + radius, x, y + radius, radius);
        ctx.arcTo(x, y, x + radius, y, radius);
        ctx.fill();

        // Eyes
        ctx.fillStyle = '#11111a';
        ctx.beginPath();
        ctx.arc(eye1x, eye1y, eyeSize, 0, Math.PI * 2);
        ctx.arc(eye2x, eye2y, eyeSize, 0, Math.PI * 2);
        ctx.fill();
      });

      // Particles
      particles.forEach(p => {
        ctx.fillStyle = p.color;
        ctx.globalAlpha = p.life;
        ctx.beginPath();
        ctx.arc(p.x, p.y, 3 * p.life, 0, Math.PI * 2);
        ctx.fill();
      });
      ctx.globalAlpha = 1;
    }

    // Game loop
    let lastTime = 0;
    function frame(timestamp) {
      if (!lastTime) lastTime = timestamp;
      const delta = timestamp - lastTime;
      // Fixed step: move every ~150ms
      if (delta > 150) {
        update();
        draw();
        lastTime = timestamp - (delta % 150);
      }
      requestAnimationFrame(frame);
    }

    // Initialize
    bestEl.textContent = bestScore;
    updateUI();

    // Event listeners
    document.addEventListener('keydown', handleKeyDown);
    restartBtn.addEventListener('click', resetGame);

    // Start prompt
    setTimeout(() => {
      startMessage.style.display = 'block';
    }, 100);

    requestAnimationFrame(frame);
  </script>
</body>
</html>