使用Kaboom.js生成移动矩形时页面崩溃浏览器拦截JavaScript怎么办

• 生成的矩形移出屏幕后未销毁：所有通过add()创建的对象会持续驻留内存，每帧都会执行移动计算、渲染等逻辑。你的代码中矩形生成速度会越来越快，长期运行后内存中累积的对象数量远超正常负载，最终导致浏览器卡顿甚至拦截脚本。
• 速度变量重复累加：addRect()函数内speed被连续累加了两次（一次+10、一次+0.3），速度增长远快于预期，进一步加快了性能消耗的速度。

1. 给矩形添加自动销毁逻辑：Kaboom.js 内置offscreen组件，配置destroy: true即可在对象移出屏幕边界时自动销毁，释放内存。
2. 移除重复的速度累加逻辑，保留预期的速度递增规则即可。

import kaboom from "https://unpkg.com/kaboom@next/dist/kaboom.mjs";

let w, h, direction;
let speed = 20;
let spawnSpeed = 3;
let mode = 'x';

kaboom();

function addRect() {

  switch (mode) {
    case 'x':
      w = 40;
      h = rand(15, 25);
      mode = 'y';
      direction = RIGHT;
      break
    case 'y':
      w = rand(15, 25);
      h = 40;
      mode = 'x';
      direction = DOWN;
      break;
  }

  add([
    rect(w, h),
    area(),
    outline(4),
    pos(
      rand(0, width()-width()/2), 
      rand(0, height()-height()/2)
    ),
    origin("botleft"),
    color(rand(0,255), rand(0,255), rand(0,255)),
    move(direction, speed),
    // 新增：移出屏幕自动销毁
    offscreen({ destroy: true })
  ]);
  wait(spawnSpeed, addRect);

  speed += 10;
  if (spawnSpeed >= 1) {
    spawnSpeed -= 0.3;
  };
}

addRect();

内容的提问来源于stack exchange，提问作者ssebastianoo