Javascript JS：如何检查大量元素的冲突？

我用随机位置随机生成了40个img，但在某些情况下，其中一些img会发生碰撞

所以我的问题是，如何检查它们是否发生碰撞，并在碰撞时给出新的位置

我有我的代码下面，也有评论，以明确它

$( document ).ready(function() {
    var viewport = $(window).height();
    var pageHeight = $(document).height();
    var pageWidth = $(document).width();
    var x = 1;
    var y = 1;
    var itemsPerPage = Math.floor(pageHeight / viewport * 10);

    var imgsArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];

    //Generate random nr for picking one of the images
    function generateRandomForArray() {
        var num = Math.floor(Math.random() * 9);
        return num;
    }

    //Generate random nr for picking one of the left position (max is page width)
    function generateLeftRandom() {
        var num = Math.floor(Math.random() * pageWidth);
        return num;
    }

    //Generate random nr for picking one of the top position (max is page height)
    function generateTopRandom() {
        var num = Math.floor(Math.random() * pageHeight);
        return num;
    }

    //Generate random nr for parallax data-velocity value
    function generateVelocityRandom() {
        var num = Math.random() * (0.1 - -0.1) + -0.1;;
        return num;
    }

    showLetter();

    //Attach img tags with random img src to #toAttachElements container
    function showLetter() {
        var letter = imgsArray[generateRandomForArray()];

        $("#toAttachElements").append("<img class='parallax' data-velocity='" + generateVelocityRandom() + "' src='wp-content/themes/thenewtonstartertheme/img/bg-elements/" + letter + ".png'>");

        x++;

        if (x < itemsPerPage) {
            showLetter();
        } 
    }

    //Add random positions to previosly attached imgs
    $('#toAttachElements > img').each( function(){
        var left = generateLeftRandom();
        var top = generateTopRandom();

        $(this).css({"position":"absolute","z-index":"1","top": top + "px", "left": left + "px"});
    });

});

$（文档）.ready（函数（）{
var viewport=$（窗口）.height（）；
var pageHeight=$（文档）.height（）；
var pageWidth=$（文档）.width（）；
var x=1；
变量y=1；
var itemsPerPage=Math.floor（页面高度/视口*10）；
变量imgsArray=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”]；
//生成用于拾取其中一幅图像的随机nr
函数生成器domForArray（）{
var num=Math.floor（Math.random（）*9）；
返回num；
}
//生成用于拾取左侧位置之一的随机nr（最大值为页宽）
函数generateLeftRandom（）{
var num=Math.floor（Math.random（）*pageWidth）；
返回num；
}
//生成随机nr以拾取一个顶部位置（最大值为页高）
函数生成器prandom（）{
var num=Math.floor（Math.random（）*pageHeight）；
返回num；
}
//为视差数据速度值生成随机nr
函数generateVelocityRandom（）{
var num=Math.random（）*（0.1--0.1）+-0.1；；
返回num；
}
showLetter（）；
//将带有随机img src的img标签附加到#ToAttachements容器
函数showLetter（）{
var letter=imgsArray[generateRandomForArray（）]；
$（“#ToAttachements”）。追加（“”）；
x++；
if（ximg'）。每个（函数（）{
var left=generateLeftRandom（）；
var top=generateTopRandom（）；
$（this.css（{“position”：“absolute”，“z-index”：“1”，“top”：top+“px”，“left”：left+“px”}）；
});
});

编辑！我最终提出的解决方案是，我将页面分成几行，每行上都可以有一个img。代码如下

$( document ).ready(function() {
    if ($(".to-attach-elements")[0]){
        var viewport = $(window).height();
        var pageHeight = $(document).height();
        var pageWidth = $(document).width();
        var x = 1;
        var y = 1;
        var itemsPerPage = Math.floor(pageHeight / viewport * 10);

        var topRows = Math.floor(pageHeight / itemsPerPage);

        var imgsArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];

        //Generate random nr for picking one of the images
        function generateRandomForArray() {
            var num = Math.floor(Math.random() * 9);
            return num;
        }

        //Generate random nr for picking one of the left position (max is page width)
        function generateLeftRandom() {
            var num = Math.floor(Math.random() * pageWidth);
            return num;
        }

        //Generate random nr for picking one of the top position (max is page height)
        function generateTopRandom() {
            var num = Math.floor(Math.random() * topRows);
            return num;
        }

        //Generate random nr for parallax data-velocity value
        function generateVelocityRandom() {
            var num = Math.random() * (0.1 - -0.1) + -0.1;;
            return num;
        }

        var top = generateTopRandom();

        showLetter();

        //Attach img tags with random img src to #toAttachElements container
        function showLetter() {
            var letter = imgsArray[generateRandomForArray()];

            $(".to-attach-elements").append("<img class='parallax' data-velocity='" + generateVelocityRandom() + "' src='wp-content/themes/thenewtonstartertheme/img/bg-elements/" + letter + ".png'>");

            x++;

            if (x < itemsPerPage) {
                showLetter();
            } 
        }

        //Add random positions to previosly attached imgs
        $('.to-attach-elements > img').each( function(){
            var left = generateLeftRandom();

            $(this).css({"position":"absolute","z-index":"1","top": top + "px", "left": left + "px"});

            top = top + topRows;
        });
    }
});

$（文档）.ready（函数（）{
if（$（“.to附加元素”）[0]）{
var viewport=$（窗口）.height（）；
var pageHeight=$（文档）.height（）；
var pageWidth=$（文档）.width（）；
var x=1；
变量y=1；
var itemsPerPage=Math.floor（页面高度/视口*10）；
var topRows=数学楼层（页面高度/项目页面）；
变量imgsArray=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”]；
//生成用于拾取其中一幅图像的随机nr
函数生成器domForArray（）{
var num=Math.floor（Math.random（）*9）；
返回num；
}
//生成用于拾取左侧位置之一的随机nr（最大值为页宽）
函数generateLeftRandom（）{
var num=Math.floor（Math.random（）*pageWidth）；
返回num；
}
//生成随机nr以拾取一个顶部位置（最大值为页高）
函数生成器prandom（）{
var num=Math.floor（Math.random（）*topRows）；
返回num；
}
//为视差数据速度值生成随机nr
函数generateVelocityRandom（）{
var num=Math.random（）*（0.1--0.1）+-0.1；；
返回num；
}
var top=generateTopRandom（）；
showLetter（）；
//将带有随机img src的img标签附加到#ToAttachements容器
函数showLetter（）{
var letter=imgsArray[generateRandomForArray（）]；
$（“.to attach elements”）。追加（“”）；
x++；
if（ximg'）。每个（function（）{
var left=generateLeftRandom（）；
$（this.css（{“position”：“absolute”，“z-index”：“1”，“top”：top+“px”，“left”：left+“px”}）；
顶部=顶部+顶部行；
});
}
});

您首先需要获取图像的随机位置，然后对照已添加到页面中的所有图像的位置进行检查。如果位置相交，则需要生成新位置

下面的代码将把每个图像放置在一个随机位置，并确保没有交点。请注意，此代码假定每个图像具有相同的宽度和高度，即32x32

function pointInPoint(point1, point2) {
  return !(point1.left > point2.left + 32 || 
           point1.left + 32 < point2.left || 
           point1.top > point2.top + 32 ||
           point1.top + 32 < point2.top);
}

var images = $('#toAttachElements > img');
var current = 0;
var position = {};
var positions = [];
var i = 0;
// store all positions for the images
for(i = 0; i < images.length; i++) {
  positions[i] = $(images[i]).position();
}

loop:
do {
  // get a random position
  position = { left: generateLeftRandom(), top: generateTopRandom() };
  // check for intersections
  for(i = 0; i < images.length; i++) {
    if(pointInPoint(positions[i], position)) {
      continue loop;
    }
  }

  // we need to update the left and top value for this image in the positions array
  positions[current] = position;
  $(images[current]).css({position: "absolute", zIndex: 1, top: position.top + "px", left: position.left + "px"});
} while(++current < images.length);

函数pointInPoint（点1，点2）{
返回！（点1.left>点2.left+32 | |
点1.左+32<点2.左| |
点1.top>点2.top+32||
点1.top+32<点2.top）；
}
var images=$（“#ToAttachements>img”）；
无功电流=0；
var位置={}；
var头寸=[]；
var i=0；
//存储图像的所有位置
对于（i=0；i

---

如果您想使用不同的尺寸，您可以将pointInPoint改为使用矩形。然后，您需要获取每个图像的宽度和高度，并相应地修改参数。

您首先需要获取图像的随机位置，然后对照已添加到页面中的所有图像的位置进行检查。如果位置相交，则需要生成新位置

以下代码将放置ev