Erkennen von div Kollision?

Gebe ich dir eine theoretische Antwort:

Möchten Sie berechnen Sie Ihre div - Grenzen-Holen Sie sich Ihre x -, y-Ecke-Werte und sehen, wenn alle anderen div-Grenzen schneiden Sie Ihre anderen div-Werte. Wenn es einen Schnittpunkt der Koordinaten dann müssen Sie sich eine Kollision.

Wie man Lage-Koordinaten:

Top: $("#div").offset().top
Left: $("#div").offset().left
Bottom: $("#div").offset().top + $("#div").height()
Right: $("#div").offset().left + $("#div").width()

InformationsquelleAutor Atticus

function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    if ((y1 + $div1.outerHeight(true)) < y2 ||
        y1 > (y2 + $div2.outerHeight(true)) ||
        (x1 + $div1.outerWidth(true)) < x2  ||
        x1 > (x2 + $div2.outerWidth(true)))
        return false;
    return true;
}

Versuchen?

InformationsquelleAutor

Ich könnte das Lesen etwas falsch, aber einige der Beispiele scheinen entweder falsch, oder nicht informativ genug. Bei der überprüfung auf Kollision, können Sie nicht nur überprüfen, die eine Seite, denn Sie schneiden sich ein ganzes Flugzeug. Man kann auch nicht einfach prüfen, div, weil die, die Sie versuchen zu platzieren, kann verschlingen die platziert div, und Sie müssen, um zu überprüfen, dass die Kollision als gut.

Ich habe schon versucht die Kollisionserkennung auf den Bildern, aber kann leicht umgewandelt werden, für divs. Ich habe alle Funktionen, die auf diese beziehen. Mein Ziel war es, in der Lage, ein div-überall möchte ich auf der Seite, und zufällig Bilder, sowie deren Anordnung, ohne die alles andere auf der Seite. Natürlich, wenn Sie dies nutzen wollen, müssen Sie "Bild ändern" Namen, um auf Ihre Bilder, mit Ihrer eigenen Wege.

Auch, wenn Sie diese mit einer Menge von Bildern, oder in einem engen Raum, oder einfach nur wollen, ein failsafe, ein Zähler Hinzugefügt werden könnten, um die while Schleife, die verwendet werden würde, die Schleife zu brechen, wenn eine bestimmte Anzahl wurde nie erreicht. Dies würde verhindern, dass die Seite aus verschlossen war, wenn es Probleme bei der Suche nach Orten für alles.

Hoffentlich jemand, der hier landet, wie ich es Tat, kann es verwenden.

CSS

#imageHolder {
    z-index: -1;
    background-color:red;
    height: 700px;
    width: 200px;
    position: absolute;
    top: 3px;
}
.preloadedImage {
   display: none;    
}

.loadedImage {
   display: normal;
   position: absolute;
   z-index: -1; /* Can be removed. Places the Images underneath everything on the page.
}

Funktion gibt eine zufällige Zahl

function Random_Number(maxNumber) {
    rndNumber = Math.floor(Math.random() * maxNumber);
    return rndNumber;    
}

Funktion gibt eine zufällige position

//Params provide size of the image and which element to use for measurements. 
//Don't want a left position to be against the edge, otherwise it will
//flow passed the div. However, if you want to achieve this look, just pass in 0,0 or remove them. 
function Random_Position(elem, imgHeight, imgWidth) {
    var top = Math.floor(Math.random() * ($(elem).height() - imgHeight));
    var left = Math.floor(Math.random() * ($(elem).width() - imgWidth));    
    var pos = [top, left];    
    return pos;
}

Main-Funktion

function Randomize_Images(elem, numOfImgs, imgNameArr) {
    var imgIDs = [];
    var collision;
    var rndImgPos; //needs to be declared outside of loops so it can access outside of loops.

    for (var z = 0; z < numOfImgs; z++) {
        imgIDs.push("rndImg" + $(elem).attr("id") + z);
    }

    //Main loop - each iterations places a random image inside the div free of collision
    for (var i = 0; i < numOfImgs; i++) {

        //Create the image and hide it until its position has been set.
        $(elem).append($("<img />", {
            src: "libs/images/random_images/" + imgNameArr[Random_Number(imgNameArr.length)] + ".png",
            id: imgIDs[i],
            class: "preloadedImage"
        }));

        collision = true;
        //Collision loop. Will not exit unless its forced, or finds a free a spot.
        while (collision) {

            //the image that will be added.
            var curImg = $("#" + imgIDs[i]);
            rndImgPos = Random_Position(elem, curImg.height(), curImg.width());            
            var imgTop = rndImgPos[0];
            var imgBot = rndImgPos[0] + curImg.height();
            var imgLeft = rndImgPos[1];
            var imgRight = rndImgPos[1] + curImg.width();

            //no reason to check for collision with the first image.
            if (i >= 1) {

                //Image loop. Will loop through all images previously placed, and check for collision.
                for (var x = 0; x < i; x++) {
                    var setImg = $("#" + imgIDs[x]);
                    var setImgPos = setImg.position();
                    var setTop = setImgPos.top;
                    var setBot = setImgPos.top + setImg.height();
                    var setLeft = setImgPos.left;
                    var setRight = setImgPos.left + setImg.width();

                    if (((imgLeft < setLeft && imgRight > setLeft) || (imgLeft < setRight && imgRight > setRight)) && ((imgTop < setTop && imgBot > setTop) || (imgTop < setBot && imgBot > setBot))) {
                        collision = true;
                        break;
                    }
                    else if (((setLeft < imgLeft && setRight > imgLeft) || (setLeft < imgRight && setRight > imgRight)) && ((setTop < imgTop && setBot > imgTop) || (setTop < imgBot && setBot > imgBot))) {
                        collision = true;
                        break;
                    }
                    else {
                        collision = false;
                    }
                }
            }
            else {
                collision = false;
            }
        }
        //Set the coordinates for the new image, and assign it's permanent class.
        var curImg = $("#" + imgIDs[i]);       
        $(curImg).css("top", rndImgPos[0]);
        $(curImg).css("left", rndImgPos[1]);        
        curImg.removeClass("preloadedImage");
        curImg.addClass("loadedImage");         
    }    
}

Beispiel zu nennen

//I am calling the function here after window load, with an additional 2 second pause because I have a Datatable loading, and it adds to the height of the page. For this particular call, I want the div to be the length of the entire page. You don't need anything but the function call otherwise.

$(window).on("load", function(){
    setTimeout(function(){
        var imgNames = ["bullethole1", "bullethole2", "bullethole3", "bullethole4", "bullethole5", "bullethole6"];
        $("#imageHolder").height($(document).height());
        Randomize_Images($("#imageHolder"), 20, imgNames);          
    },2000);
});

InformationsquelleAutor user2592690