随机生成具有随机尺寸的矩形而不会发生碰撞

问题描述 投票：1回答：1

我想生成随机尺寸的随机矩形而不会发生碰撞。在这一刻，我有这个，但它与碰撞，我已经失去了我的解决方案的想法。

<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>
javascript html collision-detection collision rectangles
1个回答
0
投票

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

Option 1

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

可选附加功能：

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

Option 2

  • 根据最大矩形尺寸和要生成的网格的最大尺寸指定网格（假设您有一个画布1000px x 1000px，最大矩形尺寸为200px x 200px，您的网格为5 x 5）
  • 对于网格中的每个项目，生成一个随机大小的矩形并将其放在x * maxRectSize, y * maxRectSize

使用选项1，它将更加密集，但您将获得更精细的结果，特别是如果您执行可选的附加功能。

使用选项2，您将获得一个矩形网格，它们不会在随机位置，但它会快速运行。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.