畫布圈碰撞，如何計算出圈子應該移動到哪里碰撞？

Question

我正在用html畫布構建一個游戲。 這是一個空氣曲棍球比賽，我已經相當遠了。 游戲中有三個圓圈，被擊中的圓盤和兩個控制器（用於擊中圓盤/圓圈）。

我已經讓光盤從牆壁上反彈，並具有檢測光盤何時與控制器發生碰撞的功能。 我正在努力的一點是當兩個圓圈碰撞時，控制器應保持靜止，光盤應朝正確的方向移開。 我讀了很多文章，但仍然無法做到。

這是Codepen鏈接到目前為止我的進展。 你可以看到冰球從控制器上反彈但沒有朝着正確的方向反彈。 你還會看到冰球是否來自控制器后面的冰球。 http://codepen.io/allanpope/pen/a01ddb29cbdecef58197c2e829993284?editors=001

我認為我所追求的是彈性碰撞但不確定如何解決它。 我發現這篇文章卻無法讓它發揮作用。

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

Heres是我的碰撞檢測功能。 自我引用光盤，控制器[i]是光盤命中的控制器。

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; 

                } 
            }   

    }

更新

解構了一個圓形碰撞演示並試圖實現他們的碰撞公式。 這是下面的，適用於向前和向下擊打冰球/盤，但由於某種原因不會向后或向后擊打。

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 normalX = distanceX / distance,
                                normalY = distanceY / distance,
                                midpointX = (controllers[i].x + self.x) / 2,
                                midpointY = (controllers[i].y + self.y) / 2,
                                delta = ((controllers[i].velocityX - self.velocityX) * normalX) + ((controllers[i].velocityY - self.velocityY) * normalY),
                                deltaX = delta*normalX,
                                deltaY = delta*normalY;

                            // Rebound puck
                            self.x = midpointX + normalX * self.radius;
                            self.y = midpointY + normalY * self.radius;
                            self.velocityX += deltaX;
                            self.velocityY += deltaY;

                            // Accelerate once hit
                            self.accelerationX = 3;
                            self.accelerationY = 3;

                    }
            }

    }

Answer 1

我對這些類型的數學問題並不擅長，但看起來你需要圍繞正弦和余弦角旋轉矢量。 我將指出一個工作示例和驅動它的源代碼。 我沒有得出這個例子。

我最近解決了這個問題的圓碰撞檢測部分，但我遇到的一個解決方案包括建立新矢量方向的代碼。 Ira Greenburg在processing.org主持他的原始資料。 艾拉進一步引用了基思彼得在基金會動作中的解決方案動畫：讓事情發生變化！

我將Ira的代碼復制到Processing的Javascript模式，然后將其推送到Github Pages，這樣您就可以在嘗試之前看到它。

Answer 2

我的代碼的主要問題是用戶控制器附加到鼠標。 當碰撞發生時，該功能將持續運行，因為由於鼠標位置仍然觸摸的圓圈。 我更改了代碼，因此控制器由用戶鍵盤控制。

我還請求reddit的幫助，並獲得了我的碰撞代碼的一些幫助。 一些好的資源鏈接。 （ http://www.reddit.com/r/javascript/comments/3cjivi/having_a_go_at_building_an_air_hockey_game_stuck/ ）