Question

我正在使用动力学js，并希望使用它实现矢量物理和碰撞理论。

就像我用可拖动的棍子击球一样。

球棒可以以任何角度击球，球应该按角度/方向移动。

在小提琴here中，有一个白球。点击它时，棍子出现在我们点击球的角度。

只能沿着初始方向拖动杆。在鼠标上留下棒子落到初始位置，接触球。

我想让球根据棍子的方向移动，并使用动力学js实现碰撞理论。

现在球移动到窗口的左上角。

strikerGroup.on('dragend', function(){
          strikerGroup.setPosition(initStrikerGrpX, initStrikerGrpY);
          striker.speedX = striker.speedY = 2;

          var strikeranimtion = new Kinetic.Animation(function(frame) {
            striker.setX(striker.x - striker.speedX * (frame.timeDiff / jincr));
            striker.setY(striker.y + striker.speedY * (frame.timeDiff / jincr));
            jincr -= 0.0000025;
            if (striker.y < 0 || striker.x < 0) {
             console.log("********")
           }
         }, layer);
          strikeranimtion.start();

          layer.draw();
          // strikerGroup striked the striker!!!!
        });

请帮忙。

提前致谢。

Answer 1

给定一条如此定义的直线和圆圈：

var line={
    x0:50,
    y0:50,
    x1:100,
    y1:100
}

var ball={
    cx:75,
    cy:75,
    radius:15
}

您可以确定它们是否像这样发生碰撞：

function isBallLineColliding(line,ball) {

// calculate the point on the line that's closest to the ball

lerp=function(a,b,x){ return(a+x*(b-a)); };
var dx=line.x1-line.x0;
var dy=line.y1-line.y0;
var t=((ball.x-line.x0)*dx+(ball.y-line.y0)*dy)/(dx*dx+dy*dy);
var lineX=lerp(line.x0, line.x1, t);
var lineY=lerp(line.y0, line.y1, t);

// if the ball centerpoint is closer than 1 radius length
// to the line, then the ball is colliding with the line

var dx1=ball.x-lineX;
var dx2=ball.y-lineY;
return(dx1*dx1+dy1*dy1<ball.radius*ball.radius);

};

如果您使用矩形而不是线条作为您的手杖，则将测试棒的宽度增加一半：

return(dx1*dx1+dy1*dy1<ball.radius*ball.radius+rect.width/2*rect.width/2);

并且回弹角度是线角度和球角度之间的差值（球角度是当前球和前一个球位置之间的角度）。

如何使用动力学js创建向量并创建碰撞

1 个答案: