如何检测html5画布中半圆的碰撞？答案

【问题标题】：How to detect collision of half circle in html5 canvas?如何检测html5画布中半圆的碰撞？
【发布时间】：2016-06-16 20:43:20
【问题描述】：

我正在编写两个圆的碰撞检测。但我真正想要的是主对象只会在其一半表面上与其他对象发生碰撞，如下图所示：

半圆面会从不同方向与其他圆碰撞。我应该如何编写函数来模拟这个？

我目前发现的两圈检测是这样的：

var dx = circle1.x - circle2.x;
var dy = circle1.y - circle2.y;
var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < circle1.radius + circle2.radius) {
    // collision detected!
}

但是只有一半的主要圈子参与如何？如果只有一小部分圆表面参与碰撞呢？说只有 Math.PI / 2 度圆会检测到碰撞？

【问题讨论】：

标签： javascript html collision-detection

【解决方案1】：

假设您检测碰撞的代码是正确的（我没有测试它），您所要做的就是确定哪个圆圈更靠右，才能知道哪个圆圈会发生碰撞。

考虑你在图片中的半圈是circle1。

if (distance < circle1.radius + circle2.radius) {
    // collision detected!
    if(circle1.x < circle2.x){
        // Circle collided on the right side of the other circle,
        // which means it's a real collision..
    }
}

【讨论】：

【解决方案2】：

那个半圆可以旋转吗？如果没有，那么这很容易：碰撞只发生在右侧，这意味着您只需要在half_circle_center.x_position 和half_circle_center.x_position + half_circle.radius 之间进行检查

【讨论】：

是的，它向各个方向移动。请注意，我们不会检测到平面部分的碰撞。
那就更难了——我只能确定两个边缘点（在当前情况下是centerX, centerY+-radius，但不使用垂直线会很棘手）和旋转角度，你定义一个形状。然后，您可以确定随机 X、Y 点是否在半圆内。
但是碰撞通常是一项艰巨的任务，因此如果您希望增加复杂性而不是简单形状，我建议您寻找相关库。例如，PhaserJS 拥有出色的物理引擎。