Question

我已随机生成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"});
    });

});

EDIT！我最终提出的解决方案是将页面划分为行，每行可以是一个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;
        });
    }
});

Answer 1

首先需要获取图像的随机位置，然后根据已添加到页面的所有图像的位置进行检查。如果位置相交，那么您需要生成一个新位置。

以下代码会将每个图像放在一个随机位置，并确保没有交叉点。请注意，此代码假定每个图像具有相同的宽度和高度，即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更改为使用矩形。然后，您需要获取每个图像的宽度和高度，并相应地修改参数。

JS：如何检查很多元素的碰撞？

1 个答案: