在画布上随机放置物品而不重叠

问：

我正在尝试将许多项目（精灵）随机放置在画布元素上，而不会有任何重叠。我使用的是种子随机数，这样我就可以获得一致的位置。但是，我遇到了一些问题。首先，我使用递归逻辑非常快速地达到最大调用堆栈大小，以避免任何冲突（仅 15 个实体），所以我不知道是否有办法优化它。其次，当它成功运行时，我的实体都倾向于沿着画布的顶部和左侧，因此可能会有大量的碰撞。

谁能看到这有什么问题？我尝试只使用 Math.random（） 而不是看看这是否是问题所在，但我得到了相同的结果。myrng()

//80 is the width of a single sprite
const getLocation = () => {
    let x = Math.floor(myrng() * (canvas.width - 80));
    let y = Math.floor(myrng() * (canvas.height - 80));

    x = x < 0 ? 0 : x;
    y = y < 0 ? 0 : y;

    const overlap = entities.some((entity) => {
      return (x - entity.position.x < 80 || y - entity.position.y < 80);
    });

    if (!overlap) {
      return [x, y];
    } else {
      return getLocation();
    }
  };

myrng()是以下包中的种子随机数生成器 https://www.npmjs.com/package/seedrandom

在开始调用我的方法之前，我先调用它。update

for (let i = 0; i < 15; i++) {
      const [x, y] = getLocation();
      entities.push({ position: { x, y } });
    }