Wie implementiert man eine Kollisionserkennung in JavaScript ohne Bibliotheken?

Kollisionserkennung in JavaScript

Problem: Implementierung der Kollisionserkennung in JavaScript ohne Verwendung von Bibliotheken wie jQuery oder gameQuery für a einfaches Szenario mit sich bewegenden Objekten.

Lösung:

Um Kollisionen zwischen zwei Objekten zu erkennen, kann eine einfache Begrenzungsrechteckroutine verwendet werden. Es berechnet, ob sich die Rechtecke, die jedes Objekt darstellen, überlappen, indem es ihre Positionen und Abmessungen vergleicht.

Die Funktion isCollide() prüft, ob sich die durch die Objekte a und b dargestellten Rechtecke schneiden:

<code class="javascript">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))
    );
}</code>

Wobei:

• a und b sind Objekte mit den Eigenschaften x, y, Breite und Höhe.

Um diese Funktion zu verwenden, können Sie Arrays erstellen, die die Positionen der beteiligten Objekte enthalten bei der Kollisionserkennung. Anschließend können Sie über das Array iterieren, um zu überprüfen, ob das sich bewegende Objekt mit einem der vordefinierten Objekte kollidiert.

Mit dieser Routine für umgebende Rechtecke können Sie eine grundlegende Kollisionserkennung in JavaScript implementieren, ohne dass komplexe Maßnahmen erforderlich sind Algorithmen oder Bibliotheken.

Interaktives Beispiel:

Klicken Sie [hier](https://codepen.io/MixerOID/pen/Rwgeob), um eine Demonstration davon zu sehen Funktion isCollide() in Aktion, die die Erkennung von Kollisionen zwischen sich bewegenden Objekten demonstriert.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine Kollisionserkennung in JavaScript ohne Bibliotheken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!