随机生成具有随机尺寸且没有碰撞的矩形

时间:2018-08-31 13:09:19

标签: javascript html collision-detection collision rectangles

我想生成具有随机尺寸且没有碰撞的随机矩形。此时此刻,我已经有了这个,但是碰巧是这样,我已经迷失了解决方案的想法。

playground_dev

1 个答案:

答案 0 :(得分:0)

有两种方法可以做到这一点。

选项1

  • 指定所需的矩形数量
  • 虽然您放置的矩形数量少于所需的矩形数量
    • 生成矩形
    • 如果该矩形与其他已放置的矩形发生碰撞,请返回
    • 否则,放置矩形

可选附加功能:

  • 如果您无法在尝试10次之后放置一个矩形(可能是100、1000,无论您认为是什么),请退出循环,因为您不可能在不碰撞的情况下放置另一个矩形
  • 根据尝试放置矩形的次数减少生成的矩形的最大大小。这样,您最终会用较小的矩形填充较小的间隙
  • 具有一个对所有矩形的面积求和的函数,以检查是否已填充画布

选项2

  • 根据最大矩形尺寸和要生成的网格的最大尺寸指定一个网格(例如,您的画布为1000px x 1000px,最大矩形尺寸为200px x 200px,则网格为5 x 5)
  • 为网格中的每个项目生成一个随机大小的矩形并将其放置在x * maxRectSize, y * maxRectSize

使用选项1,它会更加密集,但是您会得到更精致的结果,尤其是如果您执行可选的附加功能。

使用选项2,您只会得到一个矩形网格,它们不会出现在随机位置,但可以快速运行。

另一种替代方法是使用选项2生成起始画布,然后可以在其顶部应用选项1来填补空白。