返回交点位置和大小

Question

我正在使用 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

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

Answer 1

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

如果你有 2 个这样定义的矩形：

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));
}

Answer 2

这个jsfiddle 将为您提供两个矩形的相交矩形。如果没有交叉点，宽度将为零。

function rectangle(left,top, width, height) {
    this.left=left;
    this.top=top;
    this.width=width;
    this.height=height;
    this.right=this.left+this.width;
    this.bottom=this.top+this.height;

    //method
    this.intersect=intersect;
}

function intersect(rect) {
    if(this.left>rect.left) {
        var rightRect=this;
        var leftRect=rect;
    }
    else {
        var rightRect=rect;
        var leftRect=this;
    }
    if(this.top>rect.top) {
        var topRect=rect;
        var botRect=this;
    }
    else {
        var topRect=this;
        var botRect=rect;
    }
    if(this.right>rect.right) {
        var furtherRect=this;
        var nearerRect=rect;
    }
    else {
        var furtherRect=rect;
        var nearerRect=this;
    }
    if(this.bottom>rect.bottom) {
        var lowerRect=this;
        var upperRect=rect;
    }
    else {
        var lowerRect=rect;
        var upperRect=this;
    }
    if(rightRect.left>leftRect.left+leftRect.width || botRect.top>topRect.top+topRect.height) {
        var intersection=new rectangle(0,0,0,0);
    }
    else {
        var intersection=new rectangle(rightRect.left,botRect.top,nearerRect.right-rightRect.left,upperRect.bottom-botRect.top);
    }
    return intersection;

}

但是，如果有两个以上的矩形，您希望在哪里禁用碰撞。 例如下面两个黄色区域中的哪一个？

编辑图像已更正

当然，3个矩形R1、R2和R3可以通过多种方式相交

R1 与 R2 但不与 R3

R1 与 R2 和 R1 与 R3 但 R1 与 R2 和 R1 与 R3 的交点不相交

以及其他各种方式。

矩形越多，可能性就越大。