Question

        $(this).css({
            position: 'absolute',
            left: Math.random() * ($('.parentcontainer').width() - $(this).width()),
            top: Math.random() * ($('.parentcontainer').height() - $(this).height())
        });

我得到了每个循环，它会在div中随机放置元素。这个问题是元素有时会相互重叠，因为它们是绝对定位的。无论如何在js中绕过这个来检查位置？或者可能用保证金值重写这个？万分感谢！

Answer 1

您可以通过几种不同的方式来实现这一目标。我发现用一句话来定义问题最容易：

新方位的位置必须与当前方位的距离至少为X

使用这句话，我们可以对代码如何工作做一些简单的理论。

假设所有正方形 50x50 像素，我们可以写一些支票。

以下是我们可以遵循的一些伪代码步骤：

为newSquare
将x的{{1}}和y位置与所有现有广场进行比较
如果newSquare的{{1}}和x位置的远离其他方格，则可以放置y
否则，请再试一次

＆＃13;

newSquare

＆＃13;

newSquare

＆＃13;

var container = $('#container');
var squareSize = 50;
var containerSize = 500;

for (var i = 0; i < 20; i++) {
  var foundSpace = false;

  while (!foundSpace) {
    // Generate random X and Y
    var randX = Math.floor(Math.random() * (containerSize - squareSize));
    var randY = Math.floor(Math.random() * (containerSize - squareSize));
    var hitsSquare = false;
    var squares = container.children();

    squares.each(function(index, square) {
      var square = $(square);
      
      // parseInt() because .css() returns a string
      var left = parseInt(square.css('left'));
      var top = parseInt(square.css('top'));
      
      // Check boundaries
      var hitsSquareX = Math.abs(left - randX) < squareSize;
      var hitsSquareY = Math.abs(top - randY) < squareSize;

      // Will overlap a square
      if (hitsSquareX && hitsSquareY) {
        hitsSquare = true;

        // jQuery break .each()
        return false;
      }
    });

    // If doesn't overlap any square
    if (!hitsSquare) {
      foundSpace = true;

      var newSquare = $('<div class="square">');

      newSquare.offset({
        left: randX,
        top: randY
      });

      container.append(newSquare);
    }
  }
}

＆＃13;

Answer 2

你应该寻找碰撞检测。

在我看来，这是一个很棒的教程：https://www.youtube.com/watch?v=XYzA_kPWyJ8，但还有其他几个很棒的教程。

祝你好运：）

防止随机放置元素的重叠

2 个答案: