要阻止的球体 - 角落碰撞检测（JS）

Question

我做了一个小引擎/游戏。它关于物理和碰撞的一切似乎都很好，唯一我不知道如何实现这一点：

如何使球体从角上正确反弹？

我只对每个块的所有 4 个边进行了碰撞检测，但这让游戏变得非常困难，因为当球体撞到一个角时，它也会在 X 轴上获得速度。

Try this by letting the Sphere fall down on the Edge of a Block, it will slide to the side and keep its fall-direction.

Just in Case you want to make your own Level

Check CodePen :)

Answer 1

找到圆与角接触的点后的解决方案

定义问题。放？符合你的价值观

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

图像帮助可视化

步骤是

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

要阻止的球体 - 角落碰撞检测（JS）

Sphere to Block - Corner Collision Detection (JS)

javascript

html

canvas

collision

rigid-bodies