Implementierung der grundlegenden Kollisionserkennung für HTML5-Canvas-Animationen

Um eine Kollisionserkennung in Canvas durchzuführen, verwenden Benutzer häufig direkt die integrierte Kollisionserkennungsfunktion der Spiel-Engine (Cocos2d-JS, Egret) oder der Physik-Engine (Box2D). Sind Sie neugierig, haben Sie jemals über deren interne Betriebsmechanismen nachgedacht? Die grundlegende Kollisionserkennungstechnologie wird im Folgenden erläutert:

Die sogenannte Kollisionserkennung dient dazu, festzustellen, ob es eine Überlappung zwischen Objekten gibt. Hier gehen wir davon aus, dass es sich bei den besprochenen Collidern ausschließlich um rechteckige Objekte handelt. Im folgenden Beispiel erstellen wir zwei Rechteckobjekte A und B (im Folgenden als A, B bezeichnet) und B bewegt sich mit der Maus. !

Hier erstellen wir ein neues Rect.js, erstellen ein Rect-Objekt und fügen eine Prototyp-Methode zum Zeichnen hinzu. Diese Methode zeichnet auf dem eingehenden Canvas-Objekt (Kontext) basierend auf den Eigenschaften (Position, Größe) des aktuellen Objekts.

Der Code lautet wie folgt:

 function Rect(x,y,width,height) { this.x = x; this.y = y; this.height = width;}Rect.prototype.draw = function(context){ context. save(); context.translate(this.x,this.y); context.fillRect(0,0,this.width,this.height);}

Da B der Mausbewegung folgen muss, müssen wir die aktuelle Position der Maus auf der Leinwand erkennen. Erstellen Sie eine Capturemouse-Funktion, um Mausbewegungen auf dem eingehenden Dokumentknoten (Element) zu erkennen und ein Mausobjekt zurückzugeben (das die x- und y-Koordinaten der Maus enthält).

Der Code lautet wie folgt:

 function Capturemouse (element) { var mouse={x:null,y:null}; element.addEventListener('mousemove',function (event) { var x, y; if(event.pageX || event.pageY){ x = event.pageX; y = event.pageY; }else{ x = event.clientX+document.body.scrollLeft+ document.documentElement.scrollLeft; y = event.clientY+document.scrollTop+ document.documentElement.scrollTop; y -=element.offsetTop; },false); Return-Maus;}

Erkennen Sie, ob sich A und B überlappen. Bei der Diskussion, ob eine Überlappung auftritt, können wir zunächst die vier Situationen ohne Überlappung betrachten, wie unten gezeigt:

Das Folgende ist das Urteil dieser vier Staaten:

1. rectB.y+rectB.height < rectA.y

2. rectB.y > rectA.x +rectA.width

3. rectB.y > rectA.y + rectA.height

4. rectB.x+rectB.width < rectA.x

Nachdem wir nun wissen, wie man den nicht überlappenden Zustand beurteilt, wie beurteilt man den überlappenden Zustand? Das ist richtig, das Gegenteil! erstellen wir die Funktion Interaect und fügen sie zu Init.js hinzu. Diese Funktion übergibt zwei Rect-Objektparameter und gibt true zurück, wenn sich die beiden Rect-Objekte überlappen.

Der Code lautet wie folgt:

 function Intersect(rectA,rectB) { return !(rectB.y+rectB.height < rectA.y || rectB.y > rectA.x +rectA.width || rectB.y > rectA.y + rectA.height|| rectB.x+rectB.width < rectA.x)}

Erstellen Sie ein neues Animationjs und legen Sie die Animationsfunktion requestAnimationFrame() fest.

Im Schleifenkörper werden die folgenden zwei Dinge erledigt:

• Löschen Sie den Inhalt der aktuellen Leinwand, um das Zeichnen des nächsten Rahmens vorzubereiten.
• Erkennen Sie, ob sich A und B überlappen. Wenn sie sich überlappen, wird die Ausgabe auf der Konsole interagiert! ! !
• Erkennen Sie die aktuelle Mausbewegung auf der Leinwand und aktualisieren Sie die Mausposition auf die Positionseigenschaft von B.
• Zeichnen Sie A und B entsprechend den neuen Positionsattributen neu (natürlich wird die Position von A nicht aktualisiert, aber sie muss neu gezeichnet werden, da die Leinwand bei jeder Schleife geleert wird)

Der Code lautet wie folgt:

 function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rectA,rectB)){ console.log('interact!!!!' ); } if(mouse.x){ rectB.x = mouse.x; rectB.y = mouse.y } rectA.draw(context); rectB.draw(context);}

3. Initialisierung

Erstellen Sie eine neue Init.js, rufen Sie das Canvas-Element ab und binden Sie die Mausbewegungserkennung, initialisieren Sie die Rect-Objekte A und B und starten Sie schließlich die Animationsschleife.

Der Code lautet wie folgt:

 window.onload = function () { canvas = document.getElementById('collCanvas'); context = canvas.getContext('2d'); 2.100.100); rectB = new Rect(100.100.100.100); drawAnimation();}

Nachdem wir über die rechteckige Kollision gesprochen haben, werden wir über die kreisförmige Kollision sprechen. In ähnlicher Weise werden wir zwei Kreisobjekte A und B erstellen. Die Position von A ist festgelegt, und B folgt der Mausbewegung B-Überlappung, die Intercect-Konsole wird aufgefordert! !

 function Circle(x,y,radius) { this.x = x; this.y = y; this.radius = radius;}Circle.prototype.draw = function(context){ context.save(); this.x,this.y); context.beginPath(); context.arc(0,0,this.radius,0,Math.PI*2,false); context.restore();}

Die Kollisionserkennung zwischen Kreisen kann einfach durch Vergleich des Abstands zwischen den Mittelpunkten der beiden Kreise mit der Summe der Radien der beiden Kreise beurteilt werden. Wenn der Abstand zwischen den Mittelpunkten der beiden Kreise kleiner als die Summe der Radien ist zwei Kreise kommt es zu einer Kollision.

Wie unten gezeigt:

Als erstes müssen wir also den Abstand zwischen den Mittelpunkten der beiden Kreise berechnen. Hier verwenden wir die Abstandsformel zwischen zwei Punkten wie folgt:

Wenn der Abstand zwischen den Mittelpunkten zweier Kreise ermittelt wird, wird er mit der Summe der Radien der beiden Kreise verglichen. Wenn der Abstand kleiner als die Summe der Radien ist, wird „true“ zurückgegeben.

Jetzt aktualisieren wir die Interaect-Funktion.

Der Code lautet wie folgt:

 function Intersect(circleA,circleB) { var dx = circleA.x-circleB.x; var distance = Math.sqrt(dx*dx+dy*dy); KreisA.Radius + KreisB.Radius);}

Aktualisieren Sieanimation.js, hier ersetzen wir das Rect-Objekt durch ein Circle-Objekt.

Der Code lautet wie folgt:

 function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(circleA,circleB)){ console.log('interact!!!!' ); } if(mouse.x){ CircleB.x = Mouse.x; CircleB.y = Mouse.y } CircleA.draw(Context); circleB.draw(context);}

Aktualisieren Sie Init.js, initialisieren Sie die Kreisobjekte A und B und starten Sie schließlich die Animationsschleife.

Der Code lautet wie folgt:

 window.onload = function () { canvas = document.getElementById('collCanvas'); context = canvas.getContext('2d'); 2,100); CircleB = new Circle(100,100,100);}

In den vorherigen Erläuterungen geht es um die Kollisionserkennung zwischen einzelnen Formen. Als nächstes werden wir Kollisionen zwischen Rechtecken und Kreisen erkennen.

1. Kollision erkennen

Schauen wir uns wie bei der Rechteckerkennung zunächst die vier Situationen an, in denen keine Kollision auftritt.

Wie unten gezeigt:

Das Folgende ist das Urteil dieser vier Staaten:

• Circle.y + Circle.radius < Rect.y
• Circle.x - Circle.radius > Rect.x + Rect.width
• Circle.y - Circle.radius > Rect.y + Rect.height
• Circle.x + Circle.radius < Rect.x

Aktualisieren Sie die Interaect-Funktion, invertieren Sie den nicht überlappenden Zustand und übergeben Sie das Rect-Objekt und das Circle-Objekt an die Funktion. Wenn sich das Rect-Objekt und das Circle-Objekt überlappen, wird true zurückgegeben.

Der Code lautet wie folgt:

 Funktion Intersect(Rect,Circle) { return !(Circle.y + Circle.radius < Rect.y || Circle.x - Circle.radius > Rect.x + Rect.width || Circle.y - Circle.radius > Rect .y + Rechteckhöhe ||. Kreis.x + Kreisradius < Rechteck.x)}

Aktualisieren Sie animation.js. Hier folgen wir dem Kreisobjekt der Mausbewegung und erkennen eine Kollision mit dem fest positionierten Rechteckobjekt.

Der Code lautet wie folgt:

 function drawAnimation() { window.requestAnimationFrame(drawAnimation); context.clearRect(0, 0, canvas.width, canvas.height); if(Intersect(rect,circle)){ console.log('interact!!!!' ); } if(mouse.x){ kreis.x = maus.x; kreis.y = maus.y; }

Aktualisieren Sie Init.js, initialisieren Sie das Circle-Objekt und das Rect-Objekt und starten Sie schließlich die Animationsschleife.

Der Code lautet wie folgt:

 window.onload = function () { canvas = document.getElementById('collCanvas'); context = canvas.getContext('2d'); rect = new Rect(canvas). width/2,canvas.height/2,100,100); drawAnimation();}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.