通过重叠检查调整窗口大小时更改元素位置

如何解决通过重叠检查调整窗口大小时更改元素位置

我完全被困住了。

我有一个容器，我在其中随机创建了一个带有重叠检查的五个跨度元素（骰子）。

在这里您可以找到容器 CSS：

&__dice {
    position: relative;
    height: 200px;
    background-color: rgb(3,70,3);

    @include mq(mobileLarge) {
        height: calc(100% - 37.5px);
    }
}

我对每个 span 元素使用 position: absolute 以将它们放置在板（容器）内。

这里是JS代码：

1. 创建骰子

    createDice(die,positions,dieIndex) {
        const span = document.createElement("span");
        positions = this.addRandomPosition(positions);
        span.classList.add("dice-area__die","fas",this.diceClasses[die]);
        span.style.left = positions[dieIndex].posX + "px";
        span.style.top = positions[dieIndex].posY + "px";
        span.setAttribute("data-die",dieIndex);
        span.setAttribute("data-choose","noChoose");
        return span;
    }

die 是更改为 span 元素的 die 编号，position 是空数组。

2. addRandomPosition

    addRandomPosition(positions) {
        let posX = 0;
        let posY = 0;
        
        const maxBoardWidth = this.getBoardWidth();
        const maxBoardHeight = this.getBoardHeight();

        do {
            posX = Math.floor(Math.random() * (maxBoardWidth - this.dieSize));
            posY = Math.floor(Math.random() * (maxBoardHeight - this.dieSize));
        } while (this.checkOverlapping(posX,posY,positions));

        positions.push({ posX,posY });
        return positions;
    }

3. checkOverlapping

    checkOverlapping(pX,pY,positions) {
        for (let i = 0; i < positions.length; i++) {
            const newPosX = pX;
            const oldPosX = positions[i].posX;
            const rightNewPosX = pX + (this.dieSize + 5);
            const rightOldPosX = positions[i].posX + (this.dieSize + 5);
            const newPosY = pY;
            const oldPosY = positions[i].posY;
            const bottomNewPosY = pY + (this.dieSize + 5);
            const bottomOldPosY = positions[i].posY + (this.dieSize + 5);

            if (rightNewPosX < oldPosX || newPosX > rightOldPosX || newPosY > bottomOldPosY || bottomNewPosY < oldPosY) {
                continue;
            }
            return true;
        }
        return false;
    }

问题是，我创建的职位是“永久性的”。当我调整窗口大小时，容器宽度（和两个断点处的高度）发生了变化，但我的位置仍然相同。

我在更改整个容器时有两个断点 - (min-width: 1024px) 和 (min-width: 800px)。在那个断点处，我的容器改变了宽度和高度（每个断点的高度是恒定的 -> 400 像素和 200 像素）。

我尝试在 createDice 和 addRandomPosition 函数中对 matchMedia 使用 matchMedia、addEventListener("resize") 和 addEventListener("change")，但我总是陷入无限循环。

所以，我的问题是： 当我调整窗口大小但进行重叠检查时，如何更改这五个 span 元素的位置？

我不想每次调整窗口大小时都更改 X 和 Y 位置。这意味着：

1. 改变 X 位置（如果有必要，例如，当一个骰子靠近棋盘边界时），但是这里的骰子在发现左棋盘边界 + 元素不能重叠时必须停止改变 X 位置。
2. 当窗口中断断点时更改 X 和 Y 位置。