磁盘和垂直矩形之间的碰撞检测答案

【问题标题】：collision detection between a disk and an vertical rectangle磁盘和垂直矩形之间的碰撞检测
【发布时间】：2014-02-19 15:59:28
【问题描述】：

这是我的 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));
        }

【问题讨论】：

为什么不使用带有内置画布和碰撞检测的框架？我最近尝试了 MelonJS，它可以满足您的需求，轻松生成基于图块、碰撞检测、移动画布的关卡......
我找不到创建圈子和块的文档
它使用 HTML5 画布：document.createElement("canvas") 或位图/精灵。 melonjs.github.io/docs melonjs.github.io/tutorial 可以使用 Tiled 创建地图 - mapeditor.org

标签： javascript jquery html canvas

【解决方案1】：

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

这篇文章还谈到了圆环碰撞：

2d collision response between circles

这篇文章很好地解释了二维物理：

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

【讨论】：

【解决方案2】：

碰撞函数没问题，只是变量名有误：

 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/

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

【讨论】：