当我想给它们绝对随机位置时，如何防止元素重叠

Question

您好，我有 5 个方格，我想给它们随机的左上角位置，但是给它们随机位置可能会产生这样的问题：

这是我的代码：

let container = document.querySelector(".container");
let squares = document.querySelectorAll(".square");


let pageWidth = container.getBoundingClientRect().width;
let pageHeight = container.getBoundingClientRect().height;

let width;

squares.forEach((square) => {

  width = Math.floor(Math.random() * 25) + 30;
  square.style.width = width + "px";
  square.style.height = width + "px";
  square.style.position = "absolute";
  square.style.top = Math.floor(Math.random() * (pageHeight - 200)) + "px";
  square.style.left = Math.floor(Math.random() * (pageWidth - 200)) + "px";

});

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.square:nth-child(1) {
  background-color: #142bc5;
}

.square:nth-child(2) {
  background-color: #37d437;
}

.square:nth-child(3) {
  background-color: #c52f14;
}

.square:nth-child(4) {
  background-color: #c5149f;
}

.square:nth-child(5) {
  background-color: #38c514;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

我怎样才能避免这个问题？

Answer 1

您需要记录已在页面上绘制框的位置以及框的大小。然后，您需要在绘制后续框时检查碰撞/重叠。

这是一个使用this Stack Overflow answer 来确定框是否重叠的代码示例。

代码

const container = document.querySelector(".container");
const squares = document.querySelectorAll(".square");

const {width: pageWidth, height: pageHeight} = container.getBoundingClientRect();

const drawnSquares = [];

squares.forEach((square) => {
  // Since this is a square, width and height are equal
  const {width, top, left} = getRandomSquare();
  square.style.width = `${width}px`;
  square.style.height = `${width}px`;
  square.style.top = `${top}px`;
  square.style.left = `${left}px`;
  drawnSquares.push({
    width,
    top,
    left,
    bottom: top + width,
    right: left + width
  });
});

function getRandomSquare() {
  const width = Math.floor(Math.random() * 25) + 30;
  const top = Math.floor(Math.random() * (pageHeight - width));
  const left = Math.floor(Math.random() * (pageWidth - width));
  const square = {width, top, left};
  if (!overlapsWithAny(square)) {
    // We've got a good square, return it
    return square;
  } else {
    // Our square overlaps with one that's already on the page
    // so we should generate a new square
    return getRandomSquare();
  }
}

function overlapsWithAny(square) {
  if (drawnSquares.length === 0) {
    return false;
  } else {
    return drawnSquares.some(ds => {
      // Based on https://stackoverflow.com/a/12067046/2176546
      return !(square.right < ds.left || 
                  square.left > ds.right || 
                  square.bottom < ds.top || 
                  square.top > ds.bottom);
    })
  }
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.square {
  position: absolute;
}

.square:nth-child(1) {
  background-color: #142bc5;
}

.square:nth-child(2) {
  background-color: #37d437;
}

.square:nth-child(3) {
  background-color: #c52f14;
}

.square:nth-child(4) {
  background-color: #c5149f;
}

.square:nth-child(5) {
  background-color: #38c514;
}

<div class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

注意我如何将body {margin: 0; padding: 0} 添加到样式表中以使100vh 和100vw 正常工作。

Answer 2

正如 Robbie JW 的回答提到你需要应用一个函数来检测碰撞，你也可以在this answer找到一个非常有用的函数