KineticJS - 检测多个图像的碰撞答案

【问题标题】：KineticJS - Detect Collisions of multiple imagesKineticJS - 检测多个图像的碰撞
【发布时间】：2014-03-29 21:32:16
【问题描述】：

我创建了一个包含多个图像的图层。通过拖放，您可以在画布周围移动图像。在“dragend”事件中，我想检查实际图像是否位于任何其他图像上。

我将所有 Kinetic.Image 对象推送到一个数组中：形状。

function start() {

for (var i = 0; i < imgs.length; i++) {
    var img = new Kinetic.Image({
        x: i * 75 + 15,
        y: i * 75 + 15,
        width: 60,
        height: 60,
        image: imgs[i],
        id: "img" + i,
        draggable: true
    });
    layer.add(img);

    img.on('dragend', function(e) {
        var shape = e.targetNode;
        doObjectsCollide(shape);
    });
    shapes.push(img);
}

layer.draw();

}

我找到了一个SO Question，它描述了检测两个元素之间的碰撞。我尝试了针对我的案例的解决方案，但是在拖动结束后，没有检测到碰撞：

doObjectsCollide = function(a) {
  for (var i = 0; i < shapes.length; i++) {
    b = shapes[i];
    if (a.id != b.id) {
        if (
            ((a.getY() + a.getHeight()) < (b.getY())) ||
            (a.getY() > (b.y + b.getHeight())) ||
            ((a.getX() + a.getWidth()) < b.getX()) ||
            (a.getX() > (b.getX() + b.getWidth()))
        ) { console.log("Detection")};
    }
  }
}

循环有问题吗？还是形状是图像的事实？

【问题讨论】：

标签： canvas html5-canvas collision-detection kineticjs

【解决方案1】：

几个小故障：

获取 id 作为函数调用：if(a.id() != b.id())
您的碰撞测试必须不进行：if( !(...) )

所以 doObjectsCollide 应该是这样的：

doObjectsCollide = function(a) {

  for (var i = 0; i < shapes.length; i++) {
    b = shapes[i];
    if (a.id() != b.id()) {
        if (
            !(((a.getY() + a.getHeight()) < (b.getY())) ||
            (a.getY() > (b.y + b.getHeight())) ||
            ((a.getX() + a.getWidth()) < b.getX()) ||
            (a.getX() > (b.getX() + b.getWidth())))
        ) { console.log("Detection: "+a.id()+" hit "+b.id())};
    }
  }
}

这是一个演示：http://jsfiddle.net/m1erickson/PFH55/

干杯！

【讨论】：