球体到块 - 角落碰撞检测(JS)

时间:2018-04-10 06:47:26

标签: javascript html canvas collision rigid-bodies

我制作了一个引擎/游戏。它关于物理和碰撞一切似乎都很好,我唯一无法弄清楚如何实现这一目标:

如何使球体正确地从角落反弹?

我只为每个Block的所有4个侧面获得了碰撞检测,但是这使得游戏变得非常困难,因为当Sphere会撞到一个角落时它也会在X轴上获得速度。

  

通过让球体落在块的边缘上来尝试这个,它   将滑向一侧并保持其下降方向。

The Game is on CodePen

Just in Case you want to make your own Level

Check CodePen :)

1 个答案:

答案 0 :(得分:1)

解决方案一旦找到圆圈接触角落的点

定义问题。设置?你的价值观

const corner  = {x : ?, y : ?};
const ball = {
    x : ?,   // ball center
    y : ?,
    dx : ?,  // deltas (the speed and direction the ball is moving on contact)
    dy : ?,
}

图像帮助可视化

enter image description here

步骤

// get line from ball center to corner
const v1x = ball.x - corner.x;  // green line to corner
const v1y = ball.x - corner.x;

// normalize the line and rotate 90deg to get the tangent
const len = (v1x ** 2 + v1y ** 2) ** 0.5;
const tx = -v1y / len;  // green line as tangent
const ty =  v1x / len;

// Get the dot product of the balls deltas and the tangent
// and double it (the dot product represents the distance the balls
// previous distance was away from the line v1, we double it so we get 
// the distance along the tangent to the other side of the line V1)
const dot = (ball.dx * tx + ball.dy * ty) * 2; // length of orange line

// reverse the delta and move dot distance parallel to the tangent
// to find the new ball delta.
ball.dx = -ball.dx + tx * dot; // outgoing delta (red)
ball.dy = -ball.dy + ty * dot;