我的矩形碰撞(带图像)检测在触摸前会触发吗?

时间:2015-07-19 19:25:57

标签: javascript canvas html5-canvas collision-detection

我正在试图找出为什么我的碰撞检测这两个图像在它们触摸之前似乎会发射。我尝试了多种简单的检测算法,但我仍然遇到同样的问题。

编辑 - 忘记了链接http://exclusivebarbershopnj.net/canvas/Row.html

这是矩形函数

function Rectangle(x, y, width, height) {
    var I = I || {};

    I.x = x;
    I.y = y;
    I.width = width;
    I.height = height;

    I.intersectsWith = function(rect) {
        return (rect.x < this.x + this.width && this.x < rect.x + rect.width && rect.y < this.y + this.height)
    }

    return I;
}

这是代码,如果它们命中,就会看到。

function boathit() {
    var rect = new Rectangle(player.x, player.y, player.width, player.height);

    lilypads.forEach(function(lilypad) {
        var rect2 = new Rectangle(lilypad.x, lilypad.y, lilypad.width, lilypad.height);

        if(rect2.intersectsWith(rect)) {
          console.log('rect');
          console.log(rect);
          console.log('rect2');
          console.log(rect2);
        }
    });
}

我真的很难过,并且会感激任何帮助。

1 个答案:

答案 0 :(得分:1)

它不是那么可读,似乎你错过了支票。

尝试使用它(我假设如果x是左边界,则x + width-1是右边界,依此类推):

I.intersectsWith = function(rect) {
  var rects = [
    { left: this.x, right: this.x+this.width-1, top: this.y, bottom: this.y+this.height-1 },
    { left: rect.x, right: rect.x+rect.width-1, top: rect.y, bottom: rect.y+rect.height-1 }
  ];

  return rects[0].left <= rects[1].right && rects[1].left <= rects[0].right &&
    rects[0].top <= rects[1].bottom && rects[1].top <= rects[0].bottom;
}