在画布上碰撞检测2个GIF

Question

我已经在画布上加载了几张图片，我想添加简单的碰撞检测（当它们中的任何一个发生碰撞，显示消息或更改颜色等）时。我通过以下方式加载图片：

// Taurus Image
    var taurusImg = new Kinetic.Image({
      x: 0,
      y: 0,
      image: images.Taurus,
      width: 216,
      height: 75,
      name: 'image'
    });

    taurusGroup.add(taurusImg);

    taurusGroup.on('dragstart', function() {
      this.moveToTop();
    });

    // Truck Image
    var truckImg = new Kinetic.Image({
      x: 0,
      y: 0,
      image: images.Truck,
      width: 950,
      height: 158,
      name: 'image'
    });

    truckGroup.add(truckImg);

    truckGroup.on('dragstart', function() {
      this.moveToTop();
    });

我将它们加载到源代码中：

var sources = {

    Taurus: 'content/taurus.gif',
    Truck: 'content/truck2.gif'
  };

在调用函数loadimages之后，我想我可以使用这样的东西：

function collides(a, b)
    {
        if (a.x < b.x + b.width &&
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.y + a.height > b.y) return true;
    }

但是没有发生。我需要以另一种方式加载图像吗？正如我所说，他们已经全部在屏幕上，我能够将它们拖到我身边，我无法进行碰撞检测。非常感谢你们给我们的任何帮助/建议!!

Answer 1

这里有几个可能的问题：

1。您的collides函数未引用正确的对象属性

如果你自己传递了Kinetic对象，那么你将要使用存取方法：

function rectanglesOverlap(r1, r2) {
  return (r1.x() < r2.x() + r2.width() &&
    r1.x() + r1.width() > r2.x() &&
    r1.y() < r2.y() + r2.height() &&
    r1.y() + r1.height() > r2.y());
}

2。你在运行碰撞检测吗？

layer.find('.image').on('dragmove', function() {
  detectCollisions();
});

function detectCollisions() {
  var images = layer.find('.image');
  images.stroke(null);

  for (var i=0; i<images.length; i++) {
    for (var j=i+1; j<images.length; j++) {
      if ( rectanglesOverlap(images[i], images[j]) ) {
        images[i].stroke('red');
        images[j].stroke('red');
      }
    }
  }
}

这是一个演示碰撞检测的小提琴（它用矩形代替你的图像）：

http://jsfiddle.net/klenwell/z6zTA/