画布圈碰撞,如何计算出圈子应该移动到哪里碰撞？

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

我的代码的主要问题是用户控制器连接到鼠标。当发生碰撞时，该函数将不断运行，因为由于鼠标位置，圆圈仍然接触。我更改了代码，以便控制器由用户键盘控制。

我还在 reddit 上寻求帮助，并获得了一些关于我的碰撞代码的帮助。链接了一些好的资源。（http://www.reddit.com/r/javascript/comments/3cjivi/having_a_go_at_building_an_air_hockey_game_stuck/）