Nemotron 3 Nano Omni (free)
by NVIDIAReasoningClean
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>