Question

我正在使用此代码使图像和文本在屏幕上移动。我的问题是，有时图像和文本会彼此落在地上并堆叠在一起，我该如何使其无法落在彼此上？

$(document).ready(function() {
  animateDiv('.a');
  animateDiv('.b');
  animateDiv('.c');
  animateDiv('.d');
  animateDiv('.e');
  animateDiv('.f');
  animateDiv('.g');
  animateDiv('.h');
  animateDiv('.i');
});

function makeNewPosition() {
  var h = $(window).height() - 60;
  var w = $(window).width() - 60;
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);
  return [nh, nw];
}

function animateDiv(myclass) {
  var newq = makeNewPosition();
  $(myclass).animate({
    top: newq[0],
    left: newq[1]
  }, 2000, function() {
    animateDiv(myclass);
  });

};

div.a {
  width: 50px;
  height: 50px;
  position: fixed;
  color: Navy;
}

div.b {
  width: 50px;
  height: 50px;
  position: fixed;
  color: red;
}

div.c {
  width: 50px;
  height: 50px;
  position: fixed;
  color: Fuchsia;
}

div.d {
  width: 50px;
  height: 50px;
  position: fixed;
  color: SpringGreen;
}

div.e {
  position: fixed;
}

div.f {
  position: fixed;
}

div.g {
  position: fixed;
}

div.h {
  position: fixed;
}

div.i {
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>MOCKO</div>
<div class='b'>MOCKO</div>
<div class='c'>MOCKO</div>
<div class='d'>MOCKO</div>
<div class='e'><img src="image/image1.png"></div>
<div class='f'><img src="image/image2.png"></div>
<div class='g'><img src="image/image3.png"></div>
<div class='h'><img src="image/image4.png"></div>
<div class='i'><img src="image/image5.png"></div>

在此先感谢您的帮助！我叫Lukas，我不太擅长编码。

Answer 1

因此，您实际上是在屏幕上随机放置固定元素，这就是为什么它们偶尔重叠的原因。

有几种方法可以防止这种情况，但这仅取决于您的最终目标。

如果您确实想要没有重叠的随机放置方法，则必须在makeNewPosition中对所有现有位置进行检查，以确定它们的坐标是否重叠，如果是，则重新生成坐标。您需要确定新放置位置和旧放置位置的边缘，然后进行比较。

我个人认为这将是一种脆弱且过于复杂的工作方式。我鼓励您查看随机生成以外的其他可能解决方案，也许是不同的布局。

@hungerstar也有很好的评论。这本质上是冲突检测。做好这项工作并回答您的特定问题可能会涉及到很多人。

以下是一个有用的SO链接，它解释了一种基本方法：jQuery/JavaScript collision detection

这是jsfiddle上的一个有效示例：https://jsfiddle.net/ryanoc/TG2M7/

如果您愿意，我可以介绍一个特定的用例。不知道要发布什么，因为我不确定您的最终目标是什么。

如何不使div堆栈？

1 个答案: