javascript - 使用 JavaScript 检查 Canvas 上的两个项目是否重叠

Question

我有一个 Canvas ，我正在使用地理定位、谷歌地图和 openweathermap 来获取用户所在位置的天气。天气将被采用并导致我正在制作的游戏也使用该天气......

如何检查在 Canvas 上生成的两个正方形是否重叠？这是下雨的代码，目前看起来一点也不像下雨...

function rectangle(x, y, w, h) {
    var randomx = Math.floor(Math.random() * canvas.width - 50);
    this.x = randomx || x || 0;
    this.y = y || 0;
    this.w = w || 0;
    this.h = h || 0;
    this.expired = false;

    this.draw = function() {
        cx.fillStyle = "blue";
        cx.fillRect(this.x, this.y, this.w, this.h);
    };

    this.update = function() {
        this.y++;
            if (y > canvas.height) {
                this.expired = true;
            }
    };
}

var rectangles = new Array();
function newRect() {
    rectangles.push(new rectangle(window.randomx, window.y, 10, 10));
}
var timing = 0;

function loop() {
    cx.clearRect(0, 0, canvas.width, canvas.height);
    if (timing % 10 === 0) {
        newRect();
    }

    for (var i = 0, l = rectangles.length; i < l; i++) {
        rectangles[i].update();
        rectangles[i].draw();
        if (rectangles[i].expired) {
            rectangles.splice(i, 1);
            i--;
        }
    }
    timing++;
    requestAnimFrame(loop);
}
loop();

我的假设是，我需要执行“ HitTest ”以查看数组中的两个矩形是否在同一周长内......我想我的 this.draw 和 this.update 函数在哪里我应该做些什么喜欢...

this.hitTest = function () {
    //Maths to check here
};

然后在forloop中做...

rectangles[i].hitTest();

但我不确定数学或从那里去哪里......

如有任何帮助，我们将不胜感激，在此先致谢!

Answer 1

您可以像这样扩展您的 rectangle 对象:

function rectangle(x, y, w, h) {

    ... existing code here ...

}

rectangle.prototype.intersects = function(rect) {
    return !( rect.x           > (this.x + this.w) || 
             (rect.x + rect.w) <  this.x           || 
              rect.y           > (this.y + this.h) ||
             (rect.y + rect.h) <  this.y);
}

基于 this code由 Daniel Vassallo 为您的对象采用。

现在只需在要与之比较的矩形上调用函数:

 if ( rectangles[x].intersects(rectangles[y]) ) {
     ... they intersect ...
 }

要检查新矩形是否与现有矩形相交，您可以执行以下操作:

function isOverlapping(myNewRect, rectangles) {

    for(var i = 0, r; r = rectangles[i]; i++) {
        if (myNewRect.intersect(r)) return true;
    }
    return false;
}