Das Erkennen von Kreis-Rechteck-Kollisionen ist nicht trivial (aber auch nicht kompliziert).
@kuroi nekos Lösung ist korrekt und ungefähr so einfach wie der Code wird.
Glücklicherweise müssen Sie die Mathematik-Theorie nicht vollständig verstehen, um die Hit-Test-Funktion zu verwenden.
Wenn Sie weitere Einzelheiten zur Funktionsweise der Funktion erfahren möchten, finden Sie hier eine Beschreibung in vier Schritten, um zu testen, ob ein Kreis und ein Rechteck kollidieren:
Demo: Ссылка
Definieren Sie zuerst einen Kreis und ein Rechteck
%Vor%Schritt 1: Finden Sie die vertikale & amp; horizontale (distX / distY) Abstände zwischen dem Zentrum des Kreises und der Mitte des Rechtecks
%Vor%Schritt # 2: Wenn der Abstand größer als HalfCircle + halfRect ist, sind sie zu weit voneinander entfernt, um kollidieren zu können
%Vor%Schritt # 3: Wenn die Entfernung weniger als halbRekt ist, kollidieren sie definitiv
%Vor%Schritt 4: Test auf Kollision an der geraden Ecke.
Verwenden Sie die Pythagoras-Formel, um den Abstand zwischen Kreis- und Rechteckzentren zu vergleichen.
%Vor%Hier ist der vollständige Code:
%Vor%Das ist ein Weg, es zu tun:
1) Finden Sie die Ecke des Rechtecks, das dem Kreismittelpunkt am nächsten liegt 2) Sehen Sie, wie der Kreis relativ zur Ecke positioniert ist
Die Funktion verwendet einen dritten Parameter, um die Unterscheidung zwischen einem "durchgehenden" Rechteck und einem einfachen Umriss zu ermöglichen (d. h. ob der Fall eines Kreises, der vollständig innerhalb des Rechtecks liegt, als Kollision betrachtet werden sollte)
%Vor%Ich habe eine zweite Funktion, die einen Kollisionsnormalvektor berechnet, um die Animation eines Kreises zu ermöglichen, der von Rechtecken abprallt. Zusammen dienen sie als Grundlage für diese Geige
%Vor%Eine ungefähre Version der Kollisionserkennung, die davon ausgeht, dass der Kreis tatsächlich ein Quadrat ist. Wenn der Kreis klein genug ist, wird der Benutzer den Unterschied nicht bemerken.
Wenn das Rechteck von der Mitte gezeichnet wird:
%Vor%Wenn das Rechteck von oben links gezeichnet wird:
%Vor%und hier ist ein Beispiel für beide Versionen: Ссылка
Ich habe Probleme mit der ausgewählten Antwort gefunden. Hier ist meiner, der, glaube ich, gut funktioniert:
%Vor%Tags und Links javascript canvas collision-detection