将冲突添加到HTML5画布

嗨，我有以下HTML5画布应用程序：

当您移动鼠标时，它会导致球四处移动，但问题是球不会相互反应。相反，他们只是在对方身后或是在对方身后

寻找一些HTML5画布的冲突检测信息

---

谢谢。

大家好。不确定你是否已经找到了这个，但我正在画布上创建一个斯诺克游戏。我对球的碰撞检测/处理如下。目前它正在使用trig，但可以使用一些向量数学进行优化。不管怎样，您都可以通过它看到进展->

此循环在“我的动画”功能中运行：

// checks if the any of the balls have collided with each other
for(i=0;i<ballArray.length;i++)
{
    for(j=i;j<ballArray.length;j++)
    {
        if(j != i)
        {

            if( Math.pow((ballArray[j].x - ballArray[i].x),2) + Math.pow((ballArray[j].y - ballArray[i].y),2) <= (ballArray[i].radius + ballArray[j].radius) * (ballArray[i].radius + ballArray[j].radius))
            {
                dx = ballArray[i].x - ballArray[j].x;
                dy = ballArray[i].y - ballArray[j].y;
                // collision angle is often refered to as the greek character 'phi'
                phi = Math.atan2(dy, dx);

                magnitude_1 = Math.sqrt(ballArray[i].vx * ballArray[i].vx + ballArray[i].vy * ballArray[i].vy);
                magnitude_2 = Math.sqrt(ballArray[j].vx * ballArray[j].vx + ballArray[j].vy * ballArray[j].vy);

                direction_1 = Math.atan2(ballArray[i].vy, ballArray[i].vx);
                direction_2 = Math.atan2(ballArray[j].vy, ballArray[j].vx);

                new_xspeed_1 = magnitude_1 * Math.cos(direction_1 - phi);
                new_yspeed_1 = magnitude_1 * Math.sin(direction_1 - phi);

                new_xspeed_2 = magnitude_2 * Math.cos(direction_2 - phi);
                new_yspeed_2 = magnitude_2 * Math.sin(direction_2 - phi);

                final_xspeed_1 = ((ballArray[i].mass - ballArray[j].mass) * new_xspeed_1 + (ballArray[j].mass + ballArray[j].mass) * new_xspeed_2) / (ballArray[i].mass + ballArray[j].mass);
                final_xspeed_2 = ((ballArray[i].mass + ballArray[i].mass) * new_xspeed_1 + (ballArray[j].mass - ballArray[i].mass) * new_xspeed_2) / (ballArray[i].mass + ballArray[j].mass);

                final_yspeed_1 = new_yspeed_1;
                final_yspeed_2 = new_yspeed_2;

                ballArray[i].vx = Math.cos(phi) * final_xspeed_1 + Math.cos(phi + Math.PI / 2) * final_yspeed_1;
                ballArray[i].vy = Math.sin(phi) * final_xspeed_1 + Math.sin(phi + Math.PI / 2) * final_yspeed_1;
                ballArray[j].vx = Math.cos(phi) * final_xspeed_2 + Math.cos(phi + Math.PI / 2) * final_yspeed_2;
                ballArray[j].vy = Math.sin(phi) * final_xspeed_2 + Math.sin(phi + Math.PI / 2) * final_yspeed_2;
            }
        }
    }
}

//检查球是否相互碰撞
对于（i=0；i可能的重复项你知道HTML5画布的JavaScript示例吗？到目前为止，斯诺克游戏很不错。我注意到你的球偶尔会表现出一些奇怪的行为。奇怪的行为：球粘在一起并绕着另一个旋转。有时它们会相互弹开，但通常只是被卡住。你知道这是为什么吗会发生什么？我不是数学天才，否则我会更有帮助：）