Lời giải: Vẽ procedural bằng Canvas và cache khung hình

OG.Level.addHook({
  id: 'demo-star',
  order: 95,
  drawScreen: function (ctx, st, t) {
    var POINTS = 5, R_OUT = 22, R_IN = 10;           // px
    var pulse = 1 + 0.15 * Math.sin(t * 6);          // nhịp đập: hàm của t
    ctx.save();                                      // mọi transform bên dưới chỉ sống tới restore()
    ctx.translate(900, 110);                         // 1) dời gốc tới tâm ngôi sao
    ctx.rotate(t * 1.5);                             // 2) xoay quanh gốc mới (= tâm)
    ctx.scale(pulse, pulse);                         // 3) phóng to/thu nhỏ quanh tâm
    ctx.beginPath();
    for (var i = 0; i < POINTS * 2; i++) {
      var r = i % 2 ? R_IN : R_OUT;                  // xen kẽ đỉnh ngoài / đỉnh trong
      var a = (i * Math.PI) / POINTS - Math.PI / 2;  // bắt đầu từ đỉnh trên cùng
      if (i === 0) ctx.moveTo(Math.cos(a) * r, Math.sin(a) * r);
      else ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r);
    }
    ctx.closePath();
    // Viền kiểu hoạt hình: stroke nét DÀY trước, fill đè lên → chỉ còn nửa ngoài của nét.
    ctx.lineJoin = 'round';
    ctx.lineWidth = 6; ctx.strokeStyle = '#17233d'; ctx.stroke();
    ctx.fillStyle = '#ffc94a'; ctx.fill();
    ctx.restore();
  }
});

(function () {
  var PERIOD = 1.1;        // giây cho một lần nảy
  var HEIGHT = 140;        // px: độ cao đỉnh
  var R = 18;              // px: bán kính bóng
  var CONTACT = 0.16;      // phần chu kỳ bóng dính đất (bị bẹp), 0..1
  var MAX_SQUASH = 0.35;   // bẹp dọc tối đa: sy = 1 − 0.35
  var MAX_STRETCH = 0.25;  // giãn dọc tối đa khi bay nhanh nhất

  /**
   * Tính tư thế quả bóng tại thời điểm t (giây). KHÔNG vẽ, KHÔNG nhớ gì giữa các frame.
   * @param {number} t giây
   * @returns {{h:number, sx:number, sy:number}} h = độ cao so với đất (px), sx/sy = hệ số co giãn
   */
  function ballPose(t) {
    var k = (((t % PERIOD) + PERIOD) % PERIOD) / PERIOD; // pha 0..1 (an toàn cả khi t âm)
    var h, sy;
    if (k < CONTACT) {
      // Pha CHẠM ĐẤT: bẹp dần rồi bung lại theo nửa sóng sin (0 → 1 → 0).
      var amt = Math.sin(Math.PI * k / CONTACT);
      h = 0;
      sy = 1 - MAX_SQUASH * amt;
    } else {
      // Pha BAY: u chạy 0..1 trong phần còn lại của chu kỳ.
      var u = (k - CONTACT) / (1 - CONTACT);
      h = 4 * HEIGHT * u * (1 - u);                       // parabol: 0 ở hai đầu, HEIGHT ở giữa
      var speed = Math.abs(1 - 2 * u);                    // |vận tốc| chuẩn hoá: 1 sát đất, 0 ở đỉnh
      sy = 1 + MAX_STRETCH * speed;                       // bay nhanh → giãn dọc
    }
    return { h: h, sx: 1 / sy, sy: sy };                  // sx = 1/sy: giữ "diện tích" không đổi
  }
  window.ballPose = ballPose;

  OG.Level.addHook({
    id: 'demo-ball',
    order: 95,
    drawWorld: function (ctx, st, t) {
      var P = ballPose(t);
      var footX = st.level.spawn.x + 220, footY = OG.FLOOR_Y; // toạ độ THẾ GIỚI (camera đã áp)
      // bóng đổ: nhỏ và nhạt dần khi bóng lên cao
      var near = 1 - P.h / HEIGHT;
      ctx.save();
      ctx.globalAlpha = 0.15 + 0.2 * near;
      ctx.fillStyle = '#17233d';
      ctx.beginPath(); ctx.ellipse(footX, footY - 2, R * (0.6 + 0.5 * near), 5, 0, 0, Math.PI * 2); ctx.fill();
      ctx.restore();
      // thân bóng: dời tới CHÂN bóng rồi mới scale → co giãn quanh điểm chạm đất
      ctx.save();
      ctx.translate(footX, footY - P.h);
      ctx.scale(P.sx, P.sy);
      ctx.beginPath(); ctx.arc(0, -R, R, 0, Math.PI * 2);
      ctx.lineWidth = 3; ctx.strokeStyle = '#17233d'; ctx.stroke();
      ctx.fillStyle = '#e5484d'; ctx.fill();
      // đốm sáng lệch trên-trái: cảm giác khối tròn
      ctx.fillStyle = 'rgba(255,255,255,0.6)';
      ctx.beginPath(); ctx.arc(-R * 0.35, -R * 1.35, R * 0.28, 0, Math.PI * 2); ctx.fill();
      ctx.restore();
    }
  });
})();

(function () {
  var BADGE = 120;        // px: cạnh canvas phụ của một huy hiệu ở scale 1
  var CACHE_MAX = 6;      // số huy hiệu tối đa giữ trong cache

  /** Tạo cache LRU dùng Map (Map giữ thứ tự chèn: khoá đầu = lâu chưa dùng nhất). */
  function makeLRU(max) {
    var map = new Map();
    var stats = { hits: 0, misses: 0, evictions: 0 };
    return {
      /** Lấy giá trị theo key; chưa có thì gọi build() để tạo rồi cất vào. */
      get: function (key, build) {
        if (map.has(key)) {
          var v = map.get(key);
          map.delete(key); map.set(key, v);  // dời xuống cuối = "vừa dùng"
          stats.hits++;
          return v;
        }
        stats.misses++;
        var made = build();
        map.set(key, made);
        while (map.size > max) {             // quá giới hạn → bỏ khoá ĐẦU TIÊN (lâu chưa dùng nhất)
          map.delete(map.keys().next().value);
          stats.evictions++;
        }
        return made;
      },
      stats: function () { return { size: map.size, hits: stats.hits, misses: stats.misses, evictions: stats.evictions }; },
      clear: function () { map.clear(); }
    };
  }

  /** Vẽ procedural một huy hiệu quanh gốc (0,0) — tốn nhiều lệnh: 12 tia, gradient, chữ có viền. */
  function paintBadge(g, text, color) {
    var R = 46;
    for (var i = 0; i < 12; i++) {                       // tia nắng phía sau
      g.save();
      g.rotate((i * Math.PI * 2) / 12);
      g.fillStyle = i % 2 ? '#ffe28a' : '#ffc94a';
      g.beginPath(); g.moveTo(-7, -R + 6); g.lineTo(0, -R - 12); g.lineTo(7, -R + 6); g.closePath(); g.fill();
      g.restore();
    }
    var grad = g.createRadialGradient(-R * 0.35, -R * 0.4, 4, 0, 0, R * 1.1);
    grad.addColorStop(0, '#ffffff'); grad.addColorStop(0.35, color); grad.addColorStop(1, '#17233d');
    g.beginPath(); g.arc(0, 0, R, 0, Math.PI * 2);
    g.lineWidth = 6; g.strokeStyle = '#17233d'; g.stroke();
    g.fillStyle = grad; g.fill();
    g.font = OG.font(22, 'bold'); g.textAlign = 'center'; g.textBaseline = 'middle';
    g.lineWidth = 5; g.strokeStyle = '#17233d'; g.strokeText(text, 0, 2);
    g.fillStyle = '#fff6df'; g.fillText(text, 0, 2);
  }

  var cache = makeLRU(CACHE_MAX);

  /**
   * Vẽ huy hiệu, tâm tại (x, y) px. Hình giống nhau dùng chung một canvas phụ.
   * @param {number} [scale=1]  được LƯỢNG TỬ HOÁ về bước 0.1 trước khi đưa vào khoá
   */
  function drawBadge(ctx, x, y, text, color, scale) {
    var s = Math.round((scale || 1) * 10) / 10;
    var key = text + '|' + color + '|' + s;               // khoá = MỌI thứ làm hình khác đi
    var cv = cache.get(key, function () {
      var c = document.createElement('canvas');
      c.width = Math.ceil(BADGE * s); c.height = Math.ceil(BADGE * s);
      var g = c.getContext('2d');
      g.translate(c.width / 2, c.height / 2);
      g.scale(s, s);
      paintBadge(g, text, color);
      return c;
    });
    // Làm tròn toạ độ: drawImage ở toạ độ lẻ làm ảnh bị nội suy mờ.
    ctx.drawImage(cv, Math.round(x - cv.width / 2), Math.round(y - cv.height / 2));
  }

  OG.Level.addHook({
    id: 'demo-badge',
    order: 95,
    drawScreen: function (ctx, st, t) {
      var have = OG.Game.stage ? OG.Game.stage.pizzas : 0;
      var pulse = 1 + 0.12 * Math.sin(t * 5);   // liên tục, nhưng chỉ sinh vài khoá nhờ lượng tử hoá
      drawBadge(ctx, 880, 470, have + '/' + st.level.goal, have >= st.level.goal ? '#3fbf6f' : '#f27a43', pulse);
    }
  });

  /** So thời gian: vẽ trực tiếp n lần vs vẽ qua cache n lần (trên canvas phụ, không ảnh hưởng game). */
  function benchmark(n) {
    n = n || 2000;
    var c = document.createElement('canvas'); c.width = OG.W; c.height = OG.H;
    var g = c.getContext('2d');
    var t0 = performance.now();
    for (var i = 0; i < n; i++) { g.save(); g.translate(480, 270); paintBadge(g, 'A', '#52c5ee'); g.restore(); }
    var t1 = performance.now();
    for (var j = 0; j < n; j++) drawBadge(g, 480, 270, 'A', '#52c5ee', 1);
    var t2 = performance.now();
    return { direct_ms: +(t1 - t0).toFixed(1), cached_ms: +(t2 - t1).toFixed(1) };
  }

  window.badgeCache = cache;
  window.badgeBenchmark = benchmark;
})();