一块圆盘和一个竖直矩形之间的碰撞检测

Question

这是我的jsfiddle链接：http://jsfiddle.net/whZ44/8/。我正在尝试检测球是否碰到了支架的顶部。如果是，那么球的新坐标应该是支架的坐标，就像跳跃游戏一样。但是似乎我的碰撞检测函数没有起作用。

if (Collision(ball, std4)) {
                            console.log("collision");
                            ball.y = std2.x;
                        }

我目前正在使用的碰撞函数，但我不确定它是否适用于我的条件：

 function Collision(circle, rect) {
            var distX = Math.abs(circle.x - rect.x - rect.w / 2);
            var distY = Math.abs(circle.y - rect.y - rect.h / 2);

            if (distX > (rect.w / 2 + circle.r)) { return false; }
            if (distY > (rect.h / 2 + circle.r)) { return false; }

            if (distX <= (rect.w / 2)) { return true; }
            if (distY <= (rect.h / 2)) { return true; }

            var dx = distX - rect.w / 2;
            var dy = distY - rect.h / 2;
            return (dx * dx + dy * dy <= (circle.r * circle.r));
        }

- Sora

---

为什么不使用具有内置画布和碰撞检测的框架？我最近尝试了MelonJS，它可以满足您的需求，根据瓷砖轻松生成关卡，进行碰撞检测，移动画布等。 - Daniel W.

我找不到创建圆形和块的文档。 - Sora

它使用HTML5画布：document.createElement("canvas") 或位图/精灵。http://melonjs.github.io/docs/ http://melonjs.github.io/tutorial/ 地图可以使用Tiled创建 - http://www.mapeditor.org/ - Daniel W.

Answer 1

碰撞函数没问题，你只是变量名写错了：

 if (Collision(ball, std4)) {
                        console.log("collision");
                        ball.y = std2.x;
 }

至

 if (Collision(ball, std2)) {
                        console.log("collision");
                        ball.y = std2.y;
 }

演示：http://jsfiddle.net/whZ44/9/

为了进一步开发，您应该将所有障碍物存储在一个数组中，因为您必须检查与它们所有的碰撞，而不仅仅是一个。

- XCS

Answer 2

如果您不太担心圆形之后的反应，那么是否考虑使用圆形的边界矩形？

这篇文章还讨论了圆形碰撞：

圆形之间的2D碰撞响应

这篇文章是关于2D物理学的很好的解释：

http://devmag.org.za/2009/04/13/basic-collision-detection-in-2d-part-1/

- Charles Bryant