Question

您好我有以下HTML5 Canvas应用：http://dev.driz.co.uk/app/

当你移动鼠标时，它会导致球移动，但问题是球不会相互反应。相反，他们只是在彼此之上或之后传递。

寻找HTML5 Canvas的一些碰撞检测信息。

感谢。

Answer 1

嘿大家好不确定你是否已经找到了这个，但我正在用画布创建一个斯诺克游戏。我的碰撞检测/球的处理如下。它目前正在使用trig，但可以使用一些矢量数学进行优化。无论如何，你可以看到它的实际进展 - ＆gt; here

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

// 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;
            }
        }
    }
}

将冲突添加到HTML5 Canvas

1 个答案: