随机生成具有随机尺寸且无冲突的矩形答案

【问题标题】：Random generation of rectangles with random dimensions without collisions随机生成具有随机尺寸且无冲突的矩形
【发布时间】：2018-08-31 13:09:19
【问题描述】：

我想生成具有随机尺寸且不会发生冲突的随机矩形。目前我有这个，但它是碰撞，我已经失去了解决这个问题的想法。

<html>
<head>
</head>
<body>

<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="550" height="550"> 
</svg>

<script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";

function rectan()
{
for (var i = 0; i < 5; i++) {

    var x = Math.floor(Math.random() * 200) + 1  ;
        y = Math.floor(Math.random() * 200) + 1  ;
    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'x', x);
    rect.setAttributeNS(null, 'y', y);
    rect.setAttributeNS(null, 'height', '50');
    rect.setAttributeNS(null, 'width', '50');
    rect.setAttributeNS(null, 'fill', 'none');
               rect.setAttributeNS(null, 'stroke', '#010101');
    document.getElementById('svgOne').appendChild(rect);
}
}

rectan();

</script>
</body>
</html>

【问题讨论】：

找到一种方法来测试 2 个矩形是否重叠，然后当您生成新的随机矩形时，您可以将它们与现有矩形进行比较，如果有任何重叠，请将其丢弃并重试。你需要一些限制，这样它就不会永远运行:)
需要生成多少个随机矩形？
我想要多少个循环;)
stackoverflow.com/questions/35435345/…
嗯...如果我使用它，那不会像我需要的那样给我矩形：/我需要生成例如 n-矩形：/

标签： javascript html collision-detection collision rectangles

【解决方案1】：

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

选项 1

指定所需的矩形数量
虽然您放置的矩形数量少于您想要的矩形数量
- 生成一个矩形
- 如果矩形与已放置的任何其他矩形发生碰撞，则返回
- 否则，放置矩形

可选的附加功能：

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

选项 2

根据最大矩形尺寸和要生成的网格的最大尺寸指定网格（假设您有一个 1000 像素 x 1000 像素的画布，并且您的最大矩形尺寸是 200 像素 x 200 像素，那么您将有 5 个网格x 5)
为网格中的每个项目生成一个随机大小的矩形并将其放置在x * maxRectSize, y * maxRectSize

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

使用选项 2，您只会得到一个矩形网格，它们不会位于随机位置，但运行速度会非常快。

另一种选择是使用选项 2 生成起始画布，然后您可以在其上应用选项 1 来填补空白。

【讨论】：

谢谢！很有帮助！
@Izual10 如果您通过使用此问题解决了问题，那么您应该在答案中发布源并将其标记为已接受或将此问题标记为已接受:) 谢谢
好的，没问题，但我没有写这解决了我的问题，只是说它很有帮助；）感谢您提供信息！ ;)
我并没有说它确实解决了您的问题，但如果您确实解决了您的问题，您应该将其发布为该问题的答案并将该答案标记为已接受:)
没问题 ;) 谢谢 ;)