javascript - 返回交点位置和大小

我正在使用HTML5 canvas标签开发小型游戏，但发现了一个问题（that you can see here），要解决该问题，我需要检查数组中每个矩形之间的交集（完成）并返回该交集位置和大小（由于我的数学知识真的很差，所以我不能这样做）。有人能帮我吗？

这是矩形阵列碰撞检测：

for (var i = 0; i < rects.length; i++) {
    for (var others = 0; others < rects.length; others++) {
        if (others != i) {
            if (rects[others].y + rects[others].height >= rects[i].y &&
                rects[others].x + rects[others].width >= rects[i].x &&
                rects[others].x <= rects[i].x + rects[i].width &&
                rects[others].y <= rects[i].y + rects[i].height) {
                // They're intersecting!
                intery = 0; // Intersection Y
                interx = 0; // Intersection X
                interw = 0; // Intersection Width
                interh = 0; // Intersection Height
            }
        }
    }
}

And here is the entire code, in JSFiddle

此计算的目的是我需要禁用英雄与矩形交点内的矩形之间的任何碰撞。例如这片区域：

最佳答案

演示：http://jsfiddle.net/m1erickson/TqRxG/

如果您有2个这样定义的rect：

var r1={
  x:40,
  y:40,
  w:50,
  h:30,
}

var r2={
  x:60,
  y:60,
  w:50,
  h:30,
}

然后，您可以像这样计算它们的相交矩形（如果有）：

function intersectingRect(r1,r2){
  var x=Math.max(r1.x,r2.x);
  var y=Math.max(r1.y,r2.y);
  var xx=Math.min(r1.x+r1.w,r2.x+r2.w);
  var yy=Math.min(r1.y+r1.h,r2.y+r2.h);
  return({x:x,y:y,w:xx-x,h:yy-y});
}

[添加：检测圆角矩形碰撞]

如果您有这样定义的圆：

var c={
    x:50,
    y:50,
    r:15
}

然后，您可以确定圆形和矩形是否像这样碰撞：

function RectCircleColliding(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));
}