如何创建矢量和创建碰撞使用动能js

Question

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

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

球杆可以以任何角度击打球，球要按照这个角度/方向运动。

在这里的小提琴，有一个白色的球。当点击它时，操纵杆出现在我们点击球的角度。

操纵杆只能沿着初始方向拖动。鼠标左键，操纵杆落在初始位置，触碰到球。

我希望球根据操纵杆的方向移动，并使用动能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);

回弹角将是线角和球角之差(球角是当前位置和前一个位置之间的角度)