规范化球之间的距离(碰撞后) - javascript

时间:2011-08-26 05:36:44

标签: javascript html5 canvas 2d physics

我试图在检测到碰撞后将两个球之间的距离标准化

碰撞检测

do_shapes_collide: function(shape1,shape2)
{
    var reach1 = shape1.radius + shape1.velocity() + vr.o.border_width;
    var reach2 = shape2.radius + shape2.velocity() + vr.o.border_width;

    var distance = vr.distance(shape1, shape2);

    return distance < reach1 + reach2;

},

所以一旦我们确定这些球体正在碰撞,我需要重新调整它们之间的距离...我正在使用点/斜率公式等代数类的闪回:

我得到了他们之间需要的距离和(我相信的)碰撞角度。

我需要在碰撞角度上设置shape x / y。

从我这里应该做些什么来设置shape的x和y ...

if (vr.do_shapes_collide(shape, next_shape))
{
    var req_distance = shape.radius + next_shape.radius + (vr.o.border_width * 2);
    var slope = (shape.y - next_shape.y) / (shape.x - next_shape.x);
    shape.x = 
    shape.y =
}

1 个答案:

答案 0 :(得分:3)

想想矢量。如果你有两个形状重叠,你有一个从一个中心到另一个中心的矢量就像这样(这只有在将它们的速度加到它们的位置后才有意义,因为那时它们会重叠):

var diff = {
    x: next_shape.x - shape.x,
    y: next_shape.y - shape.y
};

这是从shapenext_shape的向量。并且它的大小(它更短)比形状保持分开所需的大。所以要找到形状需要移动的数量

var diff_magnitude = Math.sqrt(diff.x*diff.x + diff.y*diff.y);
var overlap = (req_distance - diff_magnitude) / 2; // each shape needs to move this distance

现在将diff向量缩放到匹配距离/幅度

diff.x = overlap * diff.x / diff_magnitude;
diff.y = overlap * diff.y / diff_magnitude;

最后,在一个方向上移动一个形状,在另一个方向上移动另一个形状

shape.x -= diff.x;
shape.y -= diff.y;
next_shape.x += diff.x;
next_shape.y += diff.y;

这两种形状现在应该相互对立。

你还需要将它们的速度设置为diff的正/负方向,因此它们会在碰撞后继续沿着那条轨迹移动,如果确实它们保持了它们的速度。

请注意,这并没有真正“反弹”彼此之间的形状,而只是将它们移开足以解决它们开始重叠后存在的重叠。所以它相当简单。但是有大量的资源可以为您提供更精确的碰撞检测和碰撞响应方法。