Canvas-Circle-Kollision, wie soll man herausfinden, wohin sich Kreise bewegen sollen, wenn sie einmal kollidiert sind?

Question

Ich bin dabei, ein Spiel in HTML-Canvas zu bauen. Es ist ein Air Hockey Spiel und ich bin ziemlich weit davon entfernt. Es gibt drei Kreise im Spiel, die Scheibe, die getroffen wird, und die zwei Controller (die benutzt werden, um die Scheibe/den Kreis zu treffen).

Ich habe die Disc von den Wänden zurückprallen und haben eine Funktion zu erkennen, wenn die CD mit einem Controller kollidiert ist. Das Bit, mit dem ich zu kämpfen habe, ist, wenn die beiden Kreise zusammenstoßen, der Controller sollte ruhig bleiben und die Scheibe sollte sich in die richtige Richtung bewegen. Ich habe ein paar Artikel gelesen, kann es aber immer noch nicht richtig machen.

Hier ist ein CodePen-Link mein bisheriger Fortschritt. Sie können sehen, dass der Puck vom Controller zurückprallt, aber nicht in die richtige Richtung. Sie werden auch sehen, wenn der Puck hinter dem Controller kommt, geht es durch. http://codepen.io/allanpope/pen/a01ddb29cbdecef58197c2e829993284?editors=001

Ich denke, was ich nachher bin, ist elastische Kollision aber nicht sicher, wie man es ausarbeitet. Ich habe diesen Artikel gefunden, aber es konnte nicht funktionieren.

http://gamedevelopment.tutsplus.com/tutorials/when-worlds-collide-simulating-circle-circle-collisions--gamedev-769

Heres ist meine Kollisionserkennungsfunktion. Selbst verweist auf die Disc und der Controller [i] ist der Controller, auf den die Disc trifft.

this.discCollision = function() { 

     for (var i = 0; i < controllers.length; i++) { 
       // Minus the x pos of one disc from the x pos of the other disc 
       var distanceX = self.x - controllers[i].x, 
         // Minus the y pos of one disc from the y pos of the other disc 
         distanceY = self.y - controllers[i].y, 
         // Multiply each of the distances by itself 
         // Squareroot that number, which gives you the distance between the two disc's 
         distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY), 
         // Added the two disc radius together 
         addedRadius = self.radius + controllers[i].radius; 


       // Check to see if the distance between the two circles is smaller than the added radius 
       // If it is then we know the circles are overlapping 
       if (distance <= addedRadius) { 

        var newVelocityX = (self.velocityX * (self.mass - controllers[i].mass) + (2 * controllers[i].mass * controllers[i].velocityX))/(self.mass + controllers[i].mass); 
        var newVelocityY = (self.velocityY * (self.mass - controllers[i].mass) + (2 * controllers[i].mass * controllers[i].velocityX))/(self.mass + controllers[i].mass); 

        self.velocityX = newVelocityX; 
        self.velocityY = newVelocityY; 

        self.x = self.x + newVelocityX; 
        self.y = self.y + newVelocityY; 

       } 
      } 

    } 

ein Kreis Kollision Demo & versucht, ihre Kollision Formel zu implementieren Dekonstruiert aktualisiert. Dies ist es unten, funktioniert für das Treffen der Puck/Disc vorwärts & nach unten, aber nicht schlagen die Rückseite rückwärts oder oben aus irgendeinem Grund.

Answer 1

Das Hauptproblem mit meinem Code war der Benutzer-Controller wurde an die Maus angeschlossen. Wenn eine Kollision auftreten würde, würde die Funktion ständig ausgeführt werden, da sich die Kreise aufgrund der Mausposition immer noch berühren. Ich habe meinen Code geändert, so dass der Controller von der Tastatur des Benutzers gesteuert wird.

Ich fragte auch um Hilfe auf reddit & habe Hilfe mit meinem Kollisionscode. Einige gute Ressourcen wurden verlinkt.

Answer 2

Ich bin nicht gut bei diesen mathematischen Problemen, aber es sieht so aus, als müssten Sie Ihre Vektoren um Sinus- und Kosinuswinkel drehen. Ich werde Sie auf ein funktionierendes Beispiel und den Quellcode hinweisen, der es antreibt. Ich habe dieses Beispiel nicht abgeleitet.

Ich löste gerade den Kreiskollisionserkennungsteil dieses Problems vor kurzem, aber eine Lösung, die ich stieß, schließt Code ein, um neue Vektorrichtungen zu gründen. Ira Greenburg beherbergt seine ursprüngliche Quelle unter processing.org. Ira zitiert weiter Keith Peters Lösung in der Foundation Actionscript Animation: Dinge bewegen!

Ich habe den Code von Ira in den JavaScript-Modus von Processing kopiert und dann auf Github Pages geschoben, damit Sie es sehen können, bevor Sie es versuchen.