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>Breakout</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { 
      background: linear-gradient(135deg, #1a0a2e, #2d1b4e);
      min-height: 100vh; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      overflow: hidden;
    }
    canvas { 
      display: block; 
      background: linear-gradient(135deg, #ff6b6b, #5f27cd);
      border-radius: 12px;
      box-shadow: 0 0 30px rgba(255,107,107,0.4), 0 0 60px rgba(95,39,205,0.3);
    }
    #start-message {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white;
      pointer-events: none;
      user-select: none;
    }
    #start-message h1 {
      font-size: 3rem;
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: linear-gradient(135deg, #ff6b6b, #88d4fa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
      margin-bottom: 0.5rem;
    }
    #start-message p {
      font-size: 1.2rem;
      color: #e0e0e0;
    }
    .info {
      position: absolute;
      bottom: 20px;
      color: #e0e0e0;
      font-size: 0.8rem;
    }
    .lives { position: absolute; top: 20px; left: 20px; color: white; font-size: 1.2rem; }
    .score { position: absolute; top: 20px; right: 20px; color: white; font-size: 1.2rem; text-align: right; }
  </style>
</head>
<body>
  <canvas id="game"></canvas>
  <div id="start-message">
    <h1>🍔 Breakout</h1>
    <p>Click or press any key to start</p>
  </div>
  <div class="lives">Lives: <span id="lives">3</span></div>
  <div class="score">Score: <span id="score">0</span></div>

  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const startMessage = document.getElementById('start-message');
    const livesEl = document.getElementById('lives');
    const scoreEl = document.getElementById('score');

    let width = 1280, height = 800;
    let scale = Math.min(1280 / width, 800 / height);
    canvas.width = width * scale;
    canvas.height = height * scale;
    canvas.style.width = `${1280 * scale}px`;
    canvas.style.height = `${800 * scale}px`;
    ctx.scale(scale, scale);

    const GAME_WIDTH = 1280;
    const GAME_HEIGHT = 800;

    let gameRunning = false;
    let score = 0;
    let lives = 3;
    let particles = [];

    // Hamburger paddle
    const paddle = {
      width: 120,
      height: 20,
      x: GAME_WIDTH / 2 - 60,
      y: GAME_HEIGHT - 40,
      dx: 8,
      color: '#ffe8e8'
    };

    // Ball
    let ball = {
      x: GAME_WIDTH / 2,
      y: GAME_HEIGHT / 2,
      radius: 12,
      dx: 5,
      dy: -5,
      color: '#ff6b6b'
    };

    // Bricks
    const brickRowCount = 5;
    const brickColumnCount = 10;
    const brickWidth = 100;
    const brickHeight = 30;
    const brickPadding = 10;
    const brickOffsetTop = 50;
    const brickOffsetLeft = 50;

    let bricks = [];
    function initBricks() {
      bricks = [];
      for (let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for (let r = 0; r < brickRowCount; r++) {
          bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
      }
    }

    // Heart particle
    function createHeartParticle(x, y) {
      const colors = ['#ff1a5a', '#ff6b6b', '#ff8c42', '#ffd93d'];
      const color = colors[Math.floor(Math.random() * colors.length)];
      const particle = {
        x: x,
        y: y,
        color: color,
        size: Math.random() * 6 + 2,
        angle: Math.random() * Math.PI * 2,
        speedX: (Math.random() - 0.5) * 8,
        speedY: (Math.random() - 0.5) * 8,
        decay: Math.random() * 0.003 + 0.002
      };
      particles.push(particle);
    }

    // Power-up particles (hearts)
    function createHeartExplosion(x, y) {
      for (let i = 0; i < 25; i++) {
        createHeartParticle(x, y);
      }
    }

    // Input
    const keys = { left: false, right: false };
    window.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft') keys.left = true;
      if (e.key === 'ArrowRight') keys.right = true;
      if (!gameRunning && (e.key === ' ' || e.key !== ' ' && e.key.length === 1)) {
        startGame();
      }
    });
    window.addEventListener('keyup', (e) => {
      if (e.key === 'ArrowLeft') keys.left = false;
      if (e.key === 'ArrowRight') keys.right = false;
    });
    canvas.addEventListener('click', () => { if (!gameRunning) startGame(); });

    function startGame() {
      gameRunning = true;
      startMessage.style.display = 'none';
      initBricks();
      particles = [];
      score = 0;
      lives = 3;
      livesEl.textContent = lives;
      scoreEl.textContent = score;
      paddle.x = GAME_WIDTH / 2 - paddle.width / 2;
      ball.x = GAME_WIDTH / 2;
      ball.y = GAME_HEIGHT / 2;
      ball.dx = 5;
      ball.dy = -5;
      gameLoop();
    }

    // Draw hamburger
    function drawPaddle() {
      const p = paddle;
      ctx.fillStyle = p.color;
      // Bun bottom
      ctx.beginPath();
      ctx.roundRect(p.x, p.y + 25, p.width, p.height, 8);
      ctx.fill();
      // Top curve
      ctx.beginPath();
      ctx.arc(p.x + p.width / 2, p.y + 15, 25, Math.PI, 0);
      ctx.lineTo(p.x + p.width / 2 + 20, p.y + 10);
      ctx.arc(p.x + p.width / 2 + 20, p.y + 15, 15, Math.PI / 2, -Math.PI / 2);
      ctx.lineTo(p.x + p.width / 2, p.y + 5);
      ctx.arc(p.x + p.width / 2, p.y + 15, 15, -Math.PI / 2, Math.PI / 2);
      ctx.fill();
      // Sesame seeds
      ctx.fillStyle '#333';
      for (let i = 0; i < 8; i++) {
        const sx = p.x + 15 + i * 25;
        const sy = p.y + 10;
        ctx.beginPath();
        ctx.ellipse(sx, sy, 4, 2, 0, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    // Draw ball
    function drawBall() {
      const b = ball;
      ctx.fillStyle = b.color;
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
      ctx.fill();
      // Happy face
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      ctx.arc(b.x - 4, b.y - 3, 3, 0, Math.PI * 2);
      ctx.arc(b.x + 4, b.y - 3, 3, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#000';
      ctx.beginPath();
      ctx.arc(b.x - 4, b.y - 3, 1.5, 0, Math.PI * 2);
      ctx.arc(b.x + 4, b.y - 3, 1.5, 0, Math.PI * 2);
      ctx.fill();
      // Smile
      ctx.beginPath();
      ctx.arc(b.x, b.y + 3, 5, 0, Math.PI);
      ctx.stroke();
    }

    // Draw bricks
    function drawBricks() {
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status === 1) {
            const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
            const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.fillStyle = `hsl(${r * 50}, 70%, 60%)`;
            ctx.fillRect(brickX, brickY, brickWidth, brickHeight);
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            ctx.strokeRect(brickX, brickY, brickWidth, brickHeight);
          }
        }
      }
    }

    // Draw particles
    function drawParticles() {
      particles.forEach((p, i) => {
        p.x += p.speedX;
        p.y += p.speedY;
        p.speedX *= 0.99;
        p.speedY *= 0.99;
        p.size -= p.decay;
        if (p.size <= 0) {
          particles.splice(i, 1);
          return;
        }
        ctx.fillStyle = p.color;
        ctx.beginPath();
        ctx.arc(p.x, p.y, Math.max(0, p.size), 0, Math.PI * 2);
        ctx.fill();
      });
    }

    // Collision detection
    function collisionDetection() {
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          const b = bricks[c][r];
          if (b.status === 1) {
            if (ball.x > b.x && ball.x < b.x + brickWidth && ball.y > b.y && ball.y < b.y + brickHeight) {
              ball.dy = -ball.dy;
              b.status = 0;
              score += 10;
              scoreEl.textContent = score;
              createHeartExplosion(b.x + brickWidth / 2, b.y + brickHeight / 2);
              if (score > 0 && score % 50 === 0) {
                lives = Math.min(5, lives + 1);
                livesEl.textContent = lives;
              }
            }
          }
        }
      }
      // Paddle collision
      if (ball.x > paddle.x && ball.x < paddle.x + paddle.width && ball.y + ball.radius > paddle.y) {
        ball.dy = -ball.dy;
        ball.x = paddle.x + paddle.width / 2;
      }
    }

    // Game over
    function gameOver() {
      gameRunning = false;
      ctx.fillStyle = 'rgba(0,0,0,0.8)';
      ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
      ctx.fillStyle = 'white';
      ctx.font = '30px Arial';
      ctx.textAlign = 'center';
      ctx.fillText('Game Over', GAME_WIDTH / 2, GAME_HEIGHT / 2);
      ctx.fillText(`Final Score: ${score}`, GAME_WIDTH / 2, GAME_HEIGHT / 2 + 40);
      setTimeout(() => {
        startMessage.style.display = 'block';
        startMessage.innerHTML = '<h1>🍔 Breakout</h1><p>Click or press any key to restart</p>';
      }, 2000);
    }

    // Win
    function checkWin() {
      let remaining = 0;
      for (let c = 0; c < brickColumnCount; c++) {
        for (let r = 0; r < brickRowCount; r++) {
          if (bricks[c][r].status === 1) remaining++;
        }
      }
      if (remaining === 0) {
        gameRunning = false;
        ctx.fillStyle = 'rgba(0,0,0,0.8)';
        ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
        ctx.fillStyle = 'gold';
        ctx.font = '30px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('You Win!', GAME_WIDTH / 2, GAME_HEIGHT / 2);
        ctx.fillText(`Final Score: ${score}`, GAME_WIDTH / 2, GAME_HEIGHT / 2 + 40);
        setTimeout(() => {
          startMessage.style.display = 'block';
          startMessage.innerHTML = '<h1>🍔 Breakout</h1><p>Click or press any key to play again</p>';
        }, 2000);
      }
    }

    // Main loop
    function gameLoop() {
      ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

      // Background gradient
      const gradient = ctx.createLinearGradient(0, 0, GAME_WIDTH, GAME_HEIGHT);
      gradient.addColorStop(0, '#1a0a2e');
      gradient.addColorStop(0.5, '#2d1b4e');
      gradient.addColorStop(1, '#1a0a2e');
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

      // Draw elements
      drawBricks();
      drawPaddle();
      drawBall();
      drawParticles();

      // Move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

      // Wall collision
      if (ball.x + ball.radius > GAME_WIDTH || ball.x - ball.radius < 0) {
        ball.dx = -ball.dx;
      }
      if (ball.y - ball.radius < 0) {
        ball.dy = -ball.dy;
      }

      // Bottom missed
      if (ball.y + ball.radius > GAME_HEIGHT) {
        lives--;
        livesEl.textContent = lives;
        if (lives <= 0) {
          gameOver();
          return;
        }
        ball.x = GAME_WIDTH / 2;
        ball.y = GAME_HEIGHT / 2;
        ball.dx = 5;
        ball.dy = -5;
        paddle.x = GAME_WIDTH / 2 - paddle.width / 2;
        return;
      }

      collisionDetection();
      checkWin();

      // Animate paddle movement with keys
      if (keys.left && paddle.x > 0) {
        paddle.x -= paddle.dx;
      }
      if (keys.right && paddle.x + paddle.width < GAME_WIDTH) {
        paddle.x += paddle.dx;
      }

      requestAnimationFrame(gameLoop);
    }

    // Start on first key click
    startMessage.addEventListener('click', () => {
      if (!gameRunning) startGame();
    });
    window.addEventListener('keydown', (e) => {
      if (!gameRunning && e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') startGame();
    });

    // Initialize
    initBricks();
  </script>
</body>
</html>