如何确保div永远不会碰彼此？

Question

我正在构建一艘战舰应用。目标是每次页面刷新时在板上随机生成船只。我的问题是我必须确保飞船永远不会相互碰触，我只是想不通。

这是我的船只阵列，每艘船都是一个名称和两个方向：

const shipArray = [
        // sous marins x4
      
    {
      name: "destroyer",
      directions: [
        [0, 1],
        [0, width],
      ],
    },
    {
      name: "destroyer",
      directions: [
        [0, 1],
        [0, width],
      ],
    },
    {
      name: "destroyer",
      directions: [
        [0, 1],
        [0, width],
      ],
    },
    {
      name: "destroyer",
      directions: [
        [0, 1],
        [0, width],
      ],
    },

    //torpilleurs x3
    {
      name: "cruiser",
      directions: [
        [0, 1, 2],
        [0, width, width * 2],
      ],
    },
    {
      name: "cruiser",
      directions: [
        [0, 1, 2],
        [0, width, width * 2],
      ],
    },
    {
      name: "cruiser",
      directions: [
        [0, 1, 2],
        [0, width, width * 2],
      ],
    },
    //escorteurs x2
    {
      name: "battleship",
      directions: [
        [0, 1, 2, 3],
        [0, width, width * 2, width * 3],
      ],
    },

    {
      name: "battleship",
      directions: [
        [0, 1, 2, 3],
        [0, width, width * 2, width * 3],
      ],
    },
    //croiseur x1
    {
      name: "carrier",
      directions: [
        [0, 1, 2, 3, 4],
        [0, width, width * 2, width * 3, width * 4],
      ],
    },
  ];

这是比在船上随机生成飞船的代码：

function generate(ship) {
    
    let randomDirection = Math.floor(Math.random() * ship.directions.length);
    let current = ship.directions[randomDirection];
    if (randomDirection === 0) direction = 1;
    if (randomDirection === 1) direction = 10;
    
    let randomStart = Math.abs(
      Math.floor(
        Math.random() * userSquares.length -
          ship.directions[0].length * direction
      )
    );

    

    const isTaken = current.some((index) =>
      userSquares[randomStart + index].classList.contains("taken")
    );

    const isAtRightEdge = current.some(
      (index) => (randomStart + index) % width === width - 1
    );

    const isAtLeftEdge = current.some(
      (index) => (randomStart + index) % width === 0
    );

    if (!isTaken && !isAtRightEdge && !isAtLeftEdge)
      current.forEach((index) =>
        userSquares[randomStart + index].classList.add("taken", ship.name)
      );
    else generate(ship);
}

  generate(shipArray[0]);
  generate(shipArray[1]);
  generate(shipArray[2]);
  generate(shipArray[3]);
  generate(shipArray[4]);
  generate(shipArray[5]);
  generate(shipArray[6]);
  generate(shipArray[7]);
  generate(shipArray[8]);
  generate(shipArray[9]);

    

Answer 1

如果您不想在船上生成船：

想法

我将处理随机生成的飞船theShip和任何飞船aShip（可能为每艘飞船添加一个className）。
您可以将theShip.offsetLeft与elementFromPoint进行比较。创建一个执行以下操作的函数，并将其添加到创建船只的点之后创建新船只的函数中。

• 设置theShip.style.pointerEvents = "none"。
• 如果有aShip在theShip的位置，请返回并生成新船。

  if (document.elementFromPoint(theShip.offsetLeft, theShip.offsetTop)) {return}
  

您需要设置theShip.style.pointerEvents = "none"，以使elementFromPoint本身不是theShip。

请参阅：

• elementFromPoint
• offsetLeft 来自MDN。