Hamburger breakoutOne-line

Nemotron 3 Ultra (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: 4 min 58 s
Cost: $0
Output tokens: 2,062
Spent thinking: 178 tokens
Speed: 52.1 tok/s
Console errors: 0

First token after: 4 min 19 s
First visible text after: 4 min 26 s
Prompt tokens: 414
Code size: 7.1 KB
Finish reason: error
Served by: Nvidia
Model id: nvidia/nemotron-3-ultra-550b-a55b:free
Reasoning sent: {"effort":"high"}
Max output: 32,000 tokens
Generated: Nov 9, 2026

What it was asked

The prompt

“i want a breakout game where the paddle is a hamburger and every brick you break explodes into tons of little hearts”

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 · 221 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Burger Breakout</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      overflow: hidden;
      position: relative;
    }
    body::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, #ff6b9d, transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, #ff6b9d, transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent);
      background-repeat: repeat;
      background-size: 200px 100px;
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }
    canvas { 
      display: block; 
      border-radius: 12px;
      box-shadow: 
        0 20px 60px rgba(0,0,0,0.5),
        0 0 0 4px rgba(255,107,157,0.2),
        inset 0 0 60px rgba(0,0,0,0.3);
      background: #0d0d1a;
    }
    #overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 10;
      transition: opacity 0.3s ease;
    }
    #overlay.hidden { opacity: 0; pointer-events: none; }
    #startMsg {
      font-size: clamp(1.2rem, 4vw, 2rem);
      font-weight: 700;
      color: #fff;
      text-shadow: 0 0 20px #ff6b9d, 0 0 40px #ff6b9d;
      text-align: center;
      animation: pulse 1.5s ease-in-out infinite;
      margin-bottom: 1rem;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); text-shadow: 0 0 20px #ff6b9d, 0 0 40px #ff6b9d; }
      50% { transform: scale(1.05); text-shadow: 0 0 30px #ff6b9d, 0 0 60px #ff6b9d, 0 0 80px #ff6b9d; }
    }
    #stats {
      display: flex;
      gap: clamp(1rem, 3vw, 2rem);
      color: #fff;
      font-size: clamp(0.9rem, 2.5vw, 1.2rem);
      font-weight: 600;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }
    .stat { display: flex; align-items: center; gap: 0.5rem; }
    .stat-icon { font-size: 1.2em; }
    .heart { color: #ff6b9d; animation: beat 1s ease-in-out infinite; }
    @keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
    #gameOver {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      z-index: 20;
    }
    #gameOver.show { opacity: 1; pointer-events: auto; }
    #gameOver h1 {
      font-size: clamp(2rem, 6vw, 3.5rem);
      font-weight: 800;
      background: linear-gradient(135deg, #ff6b9d, #ffd700, #ff6b9d);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 2s linear infinite;
      margin-bottom: 1rem;
      text-shadow: none;
    }
    @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
    #gameOver p { color: #aaa; font-size: clamp(1rem, 3vw, 1.3rem); margin-bottom: 1.5rem; }
    #restartBtn {
      padding: 1rem 2.5rem;
      font-size: clamp(1rem, 2.5vw, 1.2rem);
      font-weight: 700;
      color: #1a1a2e;
      background: linear-gradient(135deg, #ff6b9d, #ff9eb8);
      border: none;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(255,107,157,0.4);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #restartBtn:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(255,107,157,0.6); }
    #restartBtn:active { transform: scale(0.98); }
  </style>
</head>
<body>
  <canvas id="game"></canvas>
  <div id="overlay">
    <div id="startMsg">Click or press any key to start</div>
    <div id="stats">
      <div class="stat"><span class="stat-icon heart">♥</span><span id="score">0</span></div>
      <div class="stat"><span class="stat-icon">🍔</span><span id="lives">3</span></div>
      <div class="stat"><span class="stat-icon">🧱</span><span id="bricksLeft">0</span></div>
    </div>
  </div>
  <div id="gameOver">
    <h1>Game Over</h1>
    <p>Final Score: <span id="finalScore">0</span></p>
    <button id="restartBtn">Play Again</button>
  </div>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const overlay = document.getElementById('overlay');
const startMsg = document.getElementById('startMsg');
const scoreEl = document.getElementById('score');
const livesEl = document.getElementById('lives');
const bricksLeftEl = document.getElementById('bricksLeft');
const gameOverEl = document.getElementById('gameOver');
const finalScoreEl = document.getElementById('finalScore');
const restartBtn = document.getElementById('restartBtn');

let width, height, scale;
function resize() {
  const maxW = Math.min(1200, window.innerWidth - 20);
  const maxH = Math.min(750, window.innerHeight - 20);
  const aspect = 4 / 3;
  if (maxW / maxH > aspect) {
    height = maxH;
    width = height * aspect;
  } else {
    width = maxW;
    height = width / aspect;
  }
  canvas.width = width;
  canvas.height = height;
  scale = width / 800;
  if (paddle) paddle.width = 120 * scale;
  if (ball) ball.radius = 10 * scale;
}
window.addEventListener('resize', resize);
resize();

// Game state
let paddle, ball, bricks, particles, powerUps;
let score = 0, lives = 3, bricksTotal = 0;
let gameState = 'start'; // start, playing, gameover, won
let demoMode = true;
let keys = { left: false, right: false };
let lastTime = 0;

// Colors
const BRICK_COLORS = [
  ['#ff6b9d', '#ff9eb8'],
  ['#ffd700', '#fff380'],
  ['#00d4ff', '#70e4ff'],
  ['#a855f7', '#d8b4fe'],
  ['#f97316', '#fdba74'],
  ['#22c55e', '#86efac']
];

// Paddle - Hamburger
class Paddle {
  constructor() {
    this.width = 120 * scale;
    this.height = 30 * scale;
    this.x = width / 2 - this.width / 2;
    this.y = height - 50 * scale;
    this.speed = 500 * scale;
    this.targetX = this.x;
    this.wobble = 0;
  }
  update(dt) {
    if (demoMode) {
      // AI: track ball with some lag and prediction
      const ballCenterX = ball.x + ball.vx * 0.3;
      this.targetX = ballCenterX - this.width / 2;
      this.targetX = Math.max(0, Math.min(width - this.width, this.targetX));
      this.x += (this.targetX - this.x) * Math.min(1, dt * 8);
    } else {
      if (keys.left) this.x -= this.speed * dt;
      if (keys.right) this.x += this.speed * dt;
      this.x = Math.max(0, Math.min(width - this.width, this.x));
    }
    this.wobble += dt * 10;
  }
  draw() {
    const x = this.x, y = this.y, w = this.width, h = this.height;
    const cx = x + w/2;
    const bounce = Math.sin(this.wobble) * 2 * scale;
    
    // Shadow
    ctx.fillStyle = '

Reasoning trace (178 tokens)

The user wants a Breakout game with a hamburger paddle and hearts explosion when bricks break. Let me create this with:
1. A hamburger-shaped paddle (drawing a burger)
2. Bricks that explode into many small hearts when hit
3. Self-playing demo mode with "Click or press a key to start"
4. All inline CSS/JS in a single HTML file
5. Responsive design for 1280x800 down to 375px

I'll use Canvas for rendering. The hamburger paddle will be drawn with multiple layers (bun, patty, cheese, lettuce, etc.). When bricks break, they'll spawn many heart particles that float up and fade.

For the demo mode, I'll have a simple AI that tracks the ball's x position and moves the paddle toward it with some lag.