Bitte seien Sie nicht zu kritisch mit meinem Englisch. Ich bin kein Muttersprachler. Ich hoffe, ich kann mich niemals erklären! Außerdem lese ich, dass ich zeigen sollte, dass ich mich bemüht habe, das gegebene Problem selbst zu lösen. Um dies zu zeigen, wurde mein Beitrag relativ lang.
Ich bin neu (drei Wochen) zu Javascript und ich versuche, einen Pool Billardtisch über HTML5 Leinwand und Javascript zu bauen. Am Ende sollte ein Benutzer in der Lage sein, eine bestimmte Spielsituation in der virtuellen Pooltabelle darzustellen, indem er die sechzehn Bälle herumzieht. Ich habe hier eine Menge Hinweise auf Stackoverflow bezüglich Pfaden und Drag & amp; fallen lassen.
In der Zwischenzeit sehen die Kreise fast wie Poolbälle aus und ich kann sie mit der Maus bewegen. So weit so gut.
Sicher kollidieren Poolbälle in der Realität und überschneiden sich nicht. Bezüglich der Kollisionserkennung fand ich einen hilfreichen Beitrag, der mir sagte, dass ich dies mit der pythagoräischen Therme a * a + b * b = c * c machen sollte. Ich verstehe dieses Konzept. Was ich definitiv nicht verstehe, ist, wo ich die Erkennung in meinem Code implementieren muss. In meinem Skript gibt es eine Funktion (moveBall00 (e)), die die neuen x- und y-Koordinaten berechnet, wenn die Kugeln herumgezogen werden (dragok = true). Aber wie kann man den Abstand zwischen den Kugeln berechnen, während gleichzeitig die neuen Koordinaten des gezogenen Balls berechnet werden? Dies könnte leicht Newbie-Frage sein!
Ich habe es versucht:
neue Variable "x"
var x = wahr;
neue Funktion, um den Abstand zwischen den Kugeln zu erkennen
Funktion Kollision () { if ((Math.pow (bp [1] [0] - bp [1] [1], 2)) + (Math.pow (bp [2] [0] - bp [2] [1], 2) ) & lt; = 576) { x = falsch; } }
ruft alle 10 Millisekunden "collision ()" auf
(Funktion isIntersecting () { return setInterval (Kollision, 10); }) ();
Ziehen Sie den Ball nur, wenn "x = true"
istFunktion moveBall00 (e) { if (dragok & amp; & amp; x) { bp [1] [0] = e.pageX - canvas.offsetLeft; bp [2] [0] = e.pageY - canvas.offsetTop; } }
Das Ergebnis ist, dass die Kreise (Kugeln) sich überlappen, bis sie zu einer Ruhe kommen. Sie überlagerten je mehr, je schneller ich den Ball schleppte. Dies scheint ein Erst-nach-Problem zu sein?!
Für erfahrene Entwickler ist es sicher ein Spaziergang durch den Park, aber nicht für mich.
Ich bin der eindringliche Typ und werde lernen, dies in Javascript zu tun, aber im Moment habe ich keine Ahnung, wie ich das erwähnte Problem lösen kann.
Ich würde jede Hilfe bei diesem Wunsch begrüßen und das zukünftige Ergebnis hier veröffentlichen!
(Um es zu vereinfachen, ist nur der weiße Ball zeichnbar.)
%Vor%Das Problem, mit dem Sie konfrontiert sind, steht in keinem Zusammenhang mit der zugrunde liegenden Rendering-Technik. Dies ist nur ein mathematisches Problem.
Was Sie im Grunde für Ihre Situation tun möchten, ist die Entfernung zwischen dem Ball, den Sie ziehen, und jedem Ball auf dem Tisch. Wenn die Entfernung zu kurz ist, ist eine Kollision passiert.
Für zwei Objekte ist das einfach, Sie benötigen drei Werte: Die x- und y-Koordinaten der Kugeln und deren Radien.
%Vor%Um die Entfernung zu berechnen, tun Sie dies:
%Vor%Da Sie eine Anzahl Bälle auf einem Billardtisch haben, müssen Sie diesen Code für jeden Ball auf dem Tisch, der nicht bewegt wird, einmal aufrufen, um alle zu vergleichen.
%Vor%Im letzten Snippet habe ich angenommen, dass Ihre Ballobjekte im Kugelfeld gespeichert sind. Ich hoffe, das hilft.
Tags und Links javascript html5 canvas drag-and-drop collision