Question

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

这是rect数组碰撞检测：

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个像这样定义的rects：

enter image description here

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

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

然后你可以像这样计算它们的交叉矩形（如果有的话）：

enter image description here

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;

}

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

编辑图像已更正 enter image description here

当然，有三种矩形，R1，R2和R3可以交叉的各种方式

R1与R2但不与R3

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

以及其他各种方式。

矩形越多，可能性越大。

返回交叉点位置和大小

2 个答案: