JS：多くの要素の衝突をチェックする方法は？

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！解決策私が最終的に思いついたのは、私のページを行に分割し、すべての行で1つの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を変更できます。次に、各画像の幅と高さを取得し、それに応じてパラメータを変更する必要があります。