North Mini Code (free)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bun Buster – Heart Burst Breakout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    :root {
      --paddle-width: 80px;
      --paddle-height: 12px;
      --ball-size: 10px;
      --brick-width: 60px;
      --brick-height: 20px;
      --brick-gap: 4px;
      --canvas-bg: #1a1a1a;
      --paddle-color: #c1272d; /* burger red */
      --ball-color: #ff6f61;
      --brick-base: #e63946;
      --heart-color: #ff9f1c;
      --text-color: #f1faee;
      --shadow: 0 2px 6px rgba(0,0,0,.5);
    }
    * { box-sizing: border-box; margin:0; padding:0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: linear-gradient(135deg,#2b2d42,#1a1a2e);
      color: var(--text-color);
      display: flex; flex-direction: column; align-items: center;
      width:100vw; height:100vh; overflow:hidden;
    }
    h1 { margin: 10px 0; font-size: clamp(1.5rem,4vw,2.5rem); }
    .info { display:flex; gap:20px; margin-bottom:10px; font-size:1.1rem; }
    #canvas {
      background: var(--canvas-bg);
      border: 2px solid #444;
      border-radius: 8px;
      display: block;
      box-shadow: var(--shadow);
    }
    .overlay {
      position:absolute; inset:0; background:rgba(0,0,0,.7);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      font-size:1.5rem; cursor:pointer; z-index:10;
    }
    .hidden { display:none; }
    .hamburger { fill: var(--paddle-color); transition: transform .1s; }
    .heart { fill: var(--heart-color); }
  </style>
</head>
<body>
  <h1>Bun Buster – Heart Burst Breakout</h1>
  <div class="info">
    <span>Hits: <span id="hits">0</span></span>
    <span>Lives: <span id="lives">3</span></span>
  </div>
  <canvas id="canvas" width="800" height="600"></canvas>
  <div id="startOverlay" class="overlay">
    <p>Click or press any key to start</p>
    <svg class="hamburger" width="80" height="12" viewBox="0 0 80 12">
      <rect width="80" height="12" rx="6" />
    </svg>
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const startOverlay = document.getElementById('startOverlay');
    const hitsEl = document.getElementById('hits');
    const livesEl = document.getElementById('lives');

    // Game state
    let keys = {};
    let gameRunning = false;
    let animationId = null;

    // Paddle (hamburger)
    const paddleWidth = 80;
    const paddleHeight = 12;
    const paddle = {
      x: (canvas.width - paddleWidth) / 2,
      y: canvas.height - 30,
      width: paddleWidth,
      height: paddleHeight,
      dy: 0,
      speed: 8
    };

    // Ball
    const ball = {
      x: canvas.width / 2,
      y: canvas.height - 60,
      radius: 6,
      vx: (Math.random() - 0.5) * 6,
      vy: -5,
      speed: 5
    };

    // Bricks: grid of hearts and burger parts
    const cols = 10;
    const rows = 6;
    const brickW = (canvas.width - (cols + 1) * 4) / cols; // include gap
    const brickH = 20;
    const bricks = [];
    for (let c = 0; c < cols; c++) {
      bricks[c] = [];
      for (let r = 0; r < rows; r++) {
        // Randomly make a "heart brick" or regular brick
        const isHeart = Math.random() < 0.3;
        bricks[c][r] = {
          x: c * (brickW + 4) + 4,
          y: r * (brickH + 4) + 30,
          w: brickW,
          h: brickH,
          status: 1, // 1 = intact, 0 = broken
          isHeart
        };
      }
    }

    // Hearts for burst effect
    const hearts = []; // {x, y, vx, vy, life}

    let hits = 0;
    let lives = 3;
    let paused = false;

    // Start / restart
    function startGame() {
      if (gameRunning) return;
      gameRunning = true;
      hits = 0; hitsEl.textContent = hits;
      lives = 3; livesEl.textContent = lives;
      paddle.x = (canvas.width - paddle.width) / 2;
      paddle.dy = 0;
      ball.x = canvas.width / 2;
      ball.y = canvas.height - 60;
      ball.vx = (Math.random() - 0.5) * 6;
      ball.vy = -5;
      hearts.length = 0;
      // reset bricks
      for (let c = 0; c < cols; c++) {
        for (let r = 0; r < rows; r++) {
          bricks[c][r].status = 1;
        }
      }
      startOverlay.classList.add('hidden');
      animationId = requestAnimationFrame(loop);
    }

    // Event listeners
    window.addEventListener('keydown', e => {
      keys[e.code] = true;
      if (!gameRunning) startGame();
    });
    window.addEventListener('keyup', e => {
      keys[e.code] = false;
    });
    canvas.addEventListener('click', () => {
      if (!gameRunning) startGame();
    });

    // Paddle movement
    function updatePaddle() {
      if (keys['ArrowLeft']) paddle.dy = -1;
      else if (keys['ArrowRight']) paddle.dy = 1;
      else paddle.dy = 0;
      paddle.x += paddle.dy * paddle.speed;
      // Keep paddle in bounds
      if (paddle.x < 0) paddle.x = 0;
      if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
    }

    // Ball update
    function updateBall() {
      ball.x += ball.vx;
      ball.y += ball.vy;

      // Wall collisions
      if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
        ball.vx = -ball.vx;
      }
      if (ball.y - ball.radius < 0) {
        ball.vy = -ball.vy;
      }

      // Paddle collision
      if (ball.y + ball.radius > paddle.y &&
          ball.y - ball.radius < paddle.y + paddle.height &&
          ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
        ball.vy = -ball.vy;
        // Add some angle based on where it hit the paddle
        let diff = (ball.x - (paddle.x + paddle.width / 2)) / (paddle.width / 2);
        ball.vx = diff * 6;
      }

      // If ball falls below paddle
      if (ball.y > canvas.height) {
        lives--;
        livesEl.textContent = lives;
        if (lives <= 0) {
          gameRunning = false;
          cancelAnimationFrame(animationId);
          startOverlay.classList.remove('hidden');
          startOverlay.innerHTML = '<p>Game Over!<br/>Click to restart</p>';
          return;
        }
        resetBall();
      }
    }

    function resetBall() {
      ball.x = canvas.width / 2;
      ball.y = canvas.height - 60;
      ball.vx = (Math.random() - 0.5)Now we need to add randomness in generating initial ball velocity. Let's adjust.
      ball.vx = (Math.random() - 0.5) * 6;
      ball.vy = -5;
      hearts.length = 0;
    }

    // Brick collision + heart burst
    function collisionDetect() {
      for (let c = 0; c < cols; c++) {
        for (let r = 0; r < rows; r++) {
          const b = bricks[c][r];
          if (b.status === 0) return;
          if (b.status === 1) {
            if (ball.x + ball.radius > b.x &&
                ball.x - ball.radius < b.x + b.w &&
                ball.y + ball.radius > b.y &&
                ball.y - ball.radius < b.y + b.h) {
              // Hit!
              b.status = 0;
              hits++;
              hitsEl.textContent = hits;

              // Heart burst if heart brick
              if (b.isHeart) {
                burstHearts(b.x + b.w / 2, b.y + b.h / 2);
              }

              // Reflect ball
              ball.vy = -ball.vy;
            }
          }
        }
      }
    }

    // Burst hearts
    function burstHearts(startX, startY) {
      const count = 30;
      for (let i = 0; i < count; i++) {
        const angle = (Math.PI * 2 * i) / count + (Math.random() - 0.5) * 0.5;
        const vx = Math.cos(angle) * (Math.random() * 4 + 2);
        const vy = Math.sin(angle) * (Math.random() * 4 + 2);
        hearts.push({
          x: startX,
          y: startY,
          vx,
          vy,
          life: 30
        });
      }
    }

    // Update hearts animation
    function updateHearts() {
      for (let i = hearts.length - 1; i >= 0; i--) {
        const h = hearts[i];
        h.x += h.vx;
        h.y += h.vy;
        h.vy += 0.2; // gravity
        h.life--;
        if (h.life <= 0) {
          hearts.splice(i, 1);
        }
      }
    }

    // Check win condition
    function checkWin() {
      for (let c = 0; c < cols; c++) {
        for (let r = 0; r < rows; r++) {
          if (bricks[c][r].status === 1) return;
        }
      }
      // All bricks gone
      gameRunning = false;
      cancelAnimationFrame(animationId);
      startOverlay.classList.remove('hidden');
      startOverlay.innerHTML = '<p>Victory!<br/>Click to restart</p>';
    }

    // Draw everything
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw hearts burst
      hearts.forEach(h => {
        ctx.beginPath();
        ctx.arc(h.x, h.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${255},${159},${28},${h.life / 30})`;
        ctx.fill();
      });

      // Draw bricks
      for (let c = 0; c < cols; c++) {
        for (let r = 0; r < rows; r++) {
          const b = bricks[c][r];
          if (b.status === 0) continue;
          // Gradient fill based on heart or not
          if (b.isHeart) {
            const grad = ctx.createLinearGradient(b.x, b.y, b.x, b.y + b.h);
            grad.addColorStop(0, '#ff9f1c');
            grad.addColorStop(1, '#e63946');
            ctx.fillStyle = grad;
          } else {
            ctx.fillStyle = b.isHeart ? '#e63946' : '#c1272d';
          }
          ctx.fillRect(b.x, b.y, b.w, b.h);
          // outline
          ctx.strokeStyle = '#333';
          ctx.strokeRect(b.x, b.y, b.w, b.h);
        }
      }

      // Draw paddle (hamburger)
      ctx.fillStyle = '#c1272d';
      ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
      // Top burger bun style
      ctx.beginPath();
      ctx.arc(paddle.x + paddle.width/4, paddle.y - 6, 8, 0, Math.PI * 2);
      ctx.arc(paddle.x + 3 * paddle.width/4, paddle.y - 6, 8, 0, Math.PI * 2);
      ctx.fillStyle = '#c1272d';
      ctx.fill();

      // Draw ball
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      ctx.fillStyle = '#ff6f61';
      ctx.shadowBlur = 10;
      ctx.shadowColor = '#ff6f61';
      ctx.fill();
      ctx.shadowBlur = 0;

      // Optional: draw hearts as small icons above the paddle
    }

    // Main loop
    function loop() {
      if (!gameRunning || paused) return;
      updatePaddle();
      updateBall();
      collisionDetect();
      updateHearts();
      draw();
      checkWin();
      animationId = requestAnimationFrame(loop);
    }

    // Init start overlay click to start
    startOverlay.addEventListener('click', startGame);
  </script>
</body>
</html>