javascript - 如何在圆圈范围内反弹对象？

Question

我有一个从矩形 Canvas 的墙壁上弹起的基本圆(我根据示例改编)。

https://jsfiddle.net/n5stvv52/1/

检查这种碰撞的代码有点粗糙，就像这样，但它有效:

if (p.x > canvasWidth - p.rad) {
  p.x = canvasWidth - p.rad
  p.velX *= -1
}
if (p.x < p.rad) {
  p.x = p.rad
  p.velX *= -1
}
if (p.y > canvasHeight - p.rad) {
  p.y = canvasHeight - p.rad
  p.velY *= -1
}
if (p.y < p.rad) {
  p.y = p.rad
  p.velY *= -1
}

p 是四处移动的项目。

但是，我的 Canvas 边界现在需要是一个圆圈，所以我用以下方法检查碰撞:

const dx = p.x - canvasRadius
const dy = p.y - canvasRadius
const collision = Math.sqrt(dx * dx + dy * dy) >= canvasRadius - p.rad

if (collision) {
  console.log('Out of circle bounds!')
}

当我的球击中圆圈的边缘时，if (collision) 语句执行为 true，我看到了 log。所以我可以检测到它，但我不知道如何计算它之后应该去的方向。

显然，将 x 与 Canvas 宽度进行比较并不是我所需要的，因为那是矩形，并且在 Angular 落处切割了一个圆。

知道如何更新我的 if 语句来说明这个新检测到的圆圈吗？

看来我的基本三 Angular 函数非常糟糕，所以请多多包涵!谢谢。

Answer 1

您可以使用极坐标对向量进行归一化:

var theta = Math.atan2(dy, dx)
var R = canvasRadius - p.rad

p.x = canvasRadius + R * Math.cos(theta)
p.y = canvasRadius + R * Math.sin(theta)

p.velX *= -1
p.velY *= -1

https://jsfiddle.net/d3k5pd94/1/

更新:如果我们为加速度添加随机性，运动会更自然:

 p.velX *= Math.random() > 0.5 ? 1 : -1
 p.velY *= Math.random() > 0.5 ? 1 : -1

https://jsfiddle.net/1g9h9jvq/