画布上 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/