Javascript: Kollisionserkennung

könnte mir bitte jemand helfen zu verstehen, wie die Kollisionserkennung funktioniert in JS? Ich kann nicht mit jQuery oder gameQuery - schon mit Prototyp - also, ich bin auf der Suche nach etwas sehr einfaches. Nicht Fragen, für die komplette Lösung, nur zeigen Sie mir die richtige Richtung.

Sagen wir mal es gibt:

<div id="ball"></div>
and 
<div id="someobject0"></div>

Nun der ball in Bewegung ist (andere Richtung). "Someobject"(0-X) ist schon vordefiniert und es gibt 20-60 von Ihnen nach dem Zufallsprinzip wie folgt positioniert:

#someobject {position: absolute; top: RNDpx; left: RNDpx;}

Kann ich ein array erstellen mit "someobject(X)" Positionen und test-Kollision während der "ball" bewegt sich... so Etwas wie:

for(var c=0; c<objposArray.length; c++){
........ and code to check ball's current position vs all objects one by one....
}

Aber ich denke, dies wäre ein "noob" - Lösung, und es sieht ziemlich langsam.
Gibt es was besseres?

InformationsquelleAutor der Frage jack moore | 2010-03-13

collision-detection javascript

27

Das erste, was zu haben ist die eigentliche Funktion, die erkennt, ob Sie eine Kollision zwischen dem ball und dem Objekt.

Aus performance-Gründen wird es groß sein, zu implementieren, einige grobe Kollision Erkennung Technik, z.B., bounding-Rechteckeund eine genauere, wenn erforderlich, im Falle Sie haben Kollision erkannt, so dass Ihre Funktion ausgeführt wird, ein wenig schneller, aber mit genau der gleichen Schleife.

Weitere option, die helfen können, um die Leistung zu erhöhen ist zu tun, einige vor der Verarbeitung mit den Objekten, die Sie haben. Zum Beispiel können Sie brechen Sie die ganze Gegend in die Zellen wie eine generische Tabelle, und speichern Sie das entsprechende Objekt enthalten sind, die innerhalb der jeweiligen Zellen. Daher erkennen die Kollision, die Sie sind, erkennen die Zellen besetzt durch den ball, Holen Sie sich die Objekte aus den Zellen und verwenden Sie Ihre Kollision-Detektion-Funktion.

Es zu beschleunigen sogar noch mehr, die Sie umsetzen können 2d-Baum quadtree oder Der R-tree.

InformationsquelleAutor der Antwort Li0liQ

Hier eine sehr einfache bounding-Rechteck-routine. Es erwartet a und b werden Objekte mit xywidth und height Eigenschaften:

function isCollide(a, b) {
    return !(
        ((a.y + a.height) < (b.y)) ||
        (a.y > (b.y + b.height)) ||
        ((a.x + a.width) < b.x) ||
        (a.x > (b.x + b.width))
    );
}

Sehen diese Funktion in Aktion, hier ist ein codepen gnädig gemacht, indem @MixerOID.

InformationsquelleAutor der Antwort Husky

19

Können Sie versuchen,jquery-Kollision. Vollständige Offenlegung: ich schrieb das und veröffentlicht es. Nicht eine Lösung finden, also schrieb ich es selbst.

Ermöglicht es Ihnen zu tun ist:
```
var hit_list = $("#ball").collision("#someobject0");
```
wird wieder alle "#someobject0"'s, die sich überschneiden, die mit "#Kugel".

InformationsquelleAutor der Antwort eruciform

Eine Version ohne jQuery, mit HTMLElements als Eingänge

Dies ist ein besserer Ansatz, die überprüft die tatsächliche position der Elemente, wie Sie gezeigt werden, auf den viewport, auch wenn Sie absolute, relative oder manipuliert werden, über Transformationen:

function isCollide(a, b) {
    var aRect = a.getBoundingClientRect();
    var bRect = b.getBoundingClientRect();

    return !(
        ((aRect.top + aRect.height) < (bRect.top)) ||
        (aRect.top > (bRect.top + bRect.height)) ||
        ((aRect.left + aRect.width) < bRect.left) ||
        (aRect.left > (bRect.left + bRect.width))
    );
}

InformationsquelleAutor der Antwort Àlex Garcés

6

"der bcm -" Antwort, hat 0 Stimmen, zu dieser Zeit, ist eigentlich eine großartige, unterschätzte Antwort. Es nutzt der guten alten Pythagoras zu ermitteln, wenn sich die Objekte näher sind, als Ihre kombinierte umgebenden Kreise. Einfache Kollisionserkennung oft mit rechteckigen collision detection, das ist in Ordnung, wenn deine sprites sind in der Regel, gut, rechteckig. Wenn Sie sind kreisförmig (oder andernfalls weniger als rechteckig), wie ein ball, ein asteroid oder irgendeine andere Form, wo die extremen Ecken sind in der Regel transparent, können Sie finden diese effiziente routine, um die Genaueste.

Aber für Klarheit, hier ist eine voll verwirklichte version der code:
```
function doCollide(x1, y1, w1, x2, y2, w2) {
    var xd = x1 - x2;
    var yd = y1 - y2;
    var wt = w2 + w1;
    return (xd * xd + yd * yd <= wt * wt);
} 
```
Wo die Parameter zu übergeben, in die x -, y-und width-Werte von zwei verschiedenen sprite-Objekte

InformationsquelleAutor der Antwort J Sprague

//Off the cuff, Prototype style. 
//Note, this is not optimal; there should be some basic partitioning and caching going on. 
(function () { 
    var elements = []; 
    Element.register = function (element) { 
        for (var i=0; i<elements.length; i++) { 
            if (elements[i]==element) break; 
        } 
        elements.push(element); 
        if (arguments.length>1)  
            for (var i=0; i<arguments.length; i++)  
                Element.register(arguments[i]); 
    }; 
    Element.collide = function () { 
        for (var outer=0; outer < elements.length; outer++) { 
            var e1 = Object.extend( 
                $(elements[outer]).positionedOffset(), 
                $(elements[outer]).getDimensions() 
            ); 
            for (var inner=outer; inner<elements.length; innter++) { 
                var e2 = Object.extend( 
                    $(elements[inner]).positionedOffset(), 
                    $(elements[inner]).getDimensions() 
                ); 
                if (     
                    (e1.left+e1.width)>=e2.left && e1.left<=(e2.left+e2.width) && 
                    (e1.top+e1.height)>=e2.top && e1.top<=(e2.top+e2.height) 
                ) { 
                    $(elements[inner]).fire(':collision', {element: $(elements[outer])}); 
                    $(elements[outer]).fire(':collision', {element: $(elements[inner])}); 
                } 
            } 
        } 
    }; 
})(); 

//Usage: 
Element.register(myElementA); 
Element.register(myElementB); 
$(myElementA).observe(':collision', function (ev) { 
    console.log('Damn, '+ev.memo.element+', that hurt!'); 
}); 
//detect collisions every 100ms 
setInterval(Element.collide, 100);

InformationsquelleAutor der Antwort Fordi

Dies ist eine leichte Lösung, die ich begegnet bin -

function E() { //check collision
            S = X - x;
            D = Y - y;
            F = w + W;
            return (S * S + D * D <= F * F)
        }

Den großen und kleinen Variablen sind 2 Objekte, (x-coord, y-coord, und w die Breite)

Vom hier

InformationsquelleAutor der Antwort bcm

Mozilla hat einen guten Artikel über diese, mit dem gezeigten code unten

https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

Rechteck Kollision

if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
    //collision detected!
}

Kreis Kollision

if (distance < circle1.radius + circle2.radius) {
    //collision detected!
}

InformationsquelleAutor der Antwort B M

3

Dies ist eine einfache Möglichkeit, die ineffizient ist, aber es ist durchaus sinnvoll, wenn Sie brauchen nicht alles zu aufwendig oder Sie haben nicht viele Objekte.

Ansonsten gibt es viele verschiedene algorithmen, aber die meisten von Ihnen sind ziemlich Komplex zu implementieren.

Beispielsweise können Sie eine divide et impera Ansatz, in dem Sie die cluster-Objekte werden hierarchisch nach Ihrer Entfernung und geben Sie jedem cluster eine bounding-box, die enthält alle Elemente des Clusters.Dann können Sie überprüfen, welche Cluster kollidieren und vermeiden, überprüfen Paare von Objekt gehören Cluster, die nicht kollidiert sind/werden.

Sonst können Sie herausfinden, eine generische space partitioning-Algorithmus aufzuteilen in ähnlicher Weise wie die Objekte zu vermeiden, nutzlos überprüft. Diese Art von algorithmen aufgeteilt werden die Kollisionserkennung in zwei Phasen: eine grob in dem Sie sehen, welche Objekte vielleicht kollidieren und eine feine in dem Sie effektiv überprüfen, einzelne Objekte.
Zum Beispiel können Sie eine QuadTree wikipedia Training eine einfache Lösung..

Werfen Sie einen Blick auf die wikipedia Seitekann es Ihnen einige Hinweise.

InformationsquelleAutor der Antwort Jack

hittest.js; erkennen, zwei transparente png-Bild (pixel) Kollision.
Demo und download-link

HTML-Code;

<img id="png-object-1" src="images/object1.png" />
<img id="png-object-2" src="images/object2.png" />

Init-Funktion;

var pngObject1Element = document.getElementById( "png-object-1" );
var pngObject2Element = document.getElementById( "png-object-2" );

var object1HitTest = new HitTest( pngObject1Element );

Einfache Nutzung;

if( object1HitTest.toObject( pngObject2Element ) ) {
    //Collision detected
}

InformationsquelleAutor der Antwort bugra ozden

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.