Models 44

Nemotron 3 Nano Omni (free)

by NVIDIAReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
19.3 s
Cost
$0
Output tokens
1,976
Spent thinking
0 tokens
Speed
104.1 tok/s
Console errors
0
First token after
279 ms
First visible text after
279 ms
Prompt tokens
517
Code size
5.8 KB
Finish reason
stop
Served by
Nvidia
Model id
nvidia/nemotron-3-nano-omni-30b-a3b-reasoning:free
Reasoning sent
{"effort":"none"}
Max output
32,000 tokens
Generated
Nov 9, 2026

What it was asked

The prompt
Build a polished Snake game in a single HTML file using vanilla JavaScript and a <canvas>. Requirements: - A grid of at least 20×20 cells, centered on the page. - Arrow keys and WASD control the snake. Quick successive key presses must both be honored, but the snake can never reverse onto itself. - Eating food adds 10 points and grows the snake by one cell; new food never spawns on the snake. - Game over when the snake hits a wall or itself, with an overlay showing the score; Space or Enter restarts, P pauses. - Visual polish: smooth movement, a snake with a distinct head and eyes facing its direction, and a small particle burst when eating. - Display the current score and the best score of the session.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 259 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #111;
    font-family: Arial, sans-serif;
    color: #fff;
  }
  canvas {
    background: #222;
    border: 2px solid #555;
  }
  #overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #ff0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }
  #overlay.show {
    opacity: 1;
    pointer-events: all;
  }
</style>
</head>
<body>
<canvas id="game" width="600" height="600"></canvas>
<div id="overlay">Game Over<br>Score: <span id="score">0</span><br>Best: <span id="best">0</span><br>Press Space or Enter to Restart</div>

<script>
(() => {
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');
  const scoreEl = document.getElementById('score');
  const bestEl = document.getElementById('best');

  const GRID_SIZE = 20;
  const CELL_PX = canvas.width / GRID_SIZE;
  const DIRECTIONS = {
    ArrowUp: {x:0, y:-1},
    ArrowDown: {x:0, y:1},
    ArrowLeft: {x:-1, y:0},
    ArrowRight: {x:1, y:0},
    w: {x:-1, y:0},
    a: {x:-1, y:0},
    s: {x:0, y:1},
    d: {x:1, y:0}
  };
  let snake = [{x: 9, y: 9}];
  let dir = {x:0, y:0};
  let nextDir = {x:0, y:0};
  let food = randomFood();
  let score = 0;
  let best = 0;
  let gameRunning = false;
  let isPaused = false;

  function randomFood() {
    let pos;
    do {
      pos = {
        x: Math.floor(Math.random() * GRID_SIZE),
        y: Math.floor(Math.random() * GRID_SIZE)
      };
    } while (snake.some(s => s.x === pos.x && s.y === pos.y));
    return pos;
  }

  function update() {
    if (!gameRunning) return;
    if (isPaused) return;

    dir = nextDir;

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

    // wall collision
    if (newHead.x < 0 || newHead.x >= GRID_SIZE || newHead.y < 0 || newHead.y >= GRID_SIZE) {
      endGame();
      return;
    }

    // self collision
    if (snake.some(s => s.x === newHead.x && s.y === newHead.y)) {
      endGame();
      return;
    }

    snake.unshift(newHead);

    if (newHead.x === food.x && newHead.y === food.y) {
      score += 10;
      scoreEl.textContent = score;
      if (score > best) {
        best = score;
        bestEl.textContent = best;
      }
      food = randomFood();
      spawnParticles(newHead);
    } else {
      snake.pop();
    }
  }

  function spawnParticles(pos) {
    const particles = 12;
    for (let i = 0; i < particles; i++) {
      const p = {
        x: pos.x + (Math.random() - 0.5) * 0.5,
        y: pos.y + (Math.random() - 0.5) * 0.5,
        life: 1,
        size: 2 + Math.random() * 3
      };
      particlesList.push(p);
    }
  }

  const particles = [];

  function updateParticles() {
    for (let i = particles.length - 1; i >= 0; i--) {
      const p = particles[i];
      p.life -= 0.02;
      p.size *= 0.98;
      if (p.life <= 0) {
        particles.splice(i, 1);
      }
    }
  }

  function draw() {
    // clear
    ctx.fillStyle = '#222';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // draw food
    ctx.fillStyle = '#f00';
    ctx.beginPath();
    ctx.arc(
      (food.x + 0.5) * CELL_PX + CELL_PX/2,
      (food.y + 0.5) * CELL_PX + CELL_PX/2,
      CELL_PX/2 - 2, 0, Math.PI*2);
    ctx.fill();

    // draw snake
    snake.forEach((segment, idx) => {
      const x = segment.x + 0.5;
      const y = segment.y + 0.5;
      const cx = x * CELL_PX + CELL_PX/2;
      const cy = y * CELL_PX + CELL_PX/2;

      // body
      ctx.fillStyle = (idx===0) ? '#0f0' : '#0a0';
      ctx.fillRect(cx - CELL_PX/2, cy - CELL_PX/2, CELL_PX, CELL_PX);

      // head eyes
      if (idx===0) {
        const eyeSize = CELL_PX * 0.2;
        ctx.fillStyle = '#fff';
        const dirX = Math.abs(dir.x);
        const dirY = Math.abs(dir.y);
        const eyeX = dirX > dirY ? cx - eyeSize : cx + eyeSize;
        const eyeY = dirY > dirX ? cy - eyeSize : cy + eyeSize;
        ctx.fillRect(eyeX, cy - eyeSize/2, eyeSize/2, eyeSize/2);
        ctx.fillRect(cx - eyeSize/2, eyeY, eyeSize/2, eyeSize/2);
      }
    });

    // draw particles
    particles.forEach(p => {
      ctx.fillStyle = `rgba(255,255,255,${p.life})`;
      ctx.beginPath();
      ctx.arc(
        (p.x + 0.5) * CELL_PX + CELL_PX/2,
        (p.y + 0.5) * CELL_PX + CELL_PX/2,
        p.size, 0, Math.PI*2);
      ctx.fill();
    });
  }

  function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
  }

  function startGame() {
    snake = [{x: 9, y: 9}];
    dir = {x:0, y:0};
    nextDir = {x:0, y:0};
    food = randomFood();
    score = 0;
    scoreEl.textContent = score;
    best = Math.max(best, score);
    bestEl.textContent = best;
    gameRunning = true;
    isPaused = false;
    overlay.classList.remove('show');
  }

  function endGame() {
    gameRunning = false;
    overlay.classList.add('show');
  }

  function handleKey(e) {
    if (!gameRunning) {
      if (e.code === 'Space' || e.code === 'Enter') {
        startGame();
      }
      return;
    }

    if (e.code in DIRECTIONS) {
      const newDir = DIRECTIONS[e.code];
      if (newDir.x === -dir.x && newDir.y === -dir.y) return; // prevent reverse
      nextDir = newDir;
    }

    if (e.code === 'KeyP') {
      isPaused = !isPaused;
    }
  }

  // input
  window.addEventListener('keydown', handleKey);
  canvas.addEventListener('click', () => {
    if (!gameRunning) startGame();
  });

  // init
  best = Math.max(best, score);
  bestEl.textContent = best;
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>