碰撞檢測算法問題

Question

這是到目前為止我正在使用的jsfiddle： http : //jsfiddle.net/TLYZS/

如果您調試代碼並檢查碰撞功能，則可以看到當用戶與格斗游戲中的其他角色希望重疊時，碰撞工作正常，則碰撞不應像這樣進行：

1. 您可以看到，當我從某個距離拳打或踢出角色時，即使您在屏幕上看到用戶正在懲罰角色，碰撞檢測功能也無法使用

2. 如何修復此碰撞檢測功能以使其正常工作？

    function Collision(r1, r2) { return !(r1.x > r2.x + r2.w || r1.x + r1.w < r2.x || r1.y > r2.y + r2.h || r1.y + r1.h < r2.y); } 

Answer 1

這是我的Flash.geom.Rectangle的舊JS實現。 嘗試在您的項目中使用它：

function Rectangle(x, y, w, h) {  //  constructor
    if(x==null) x=y=w=h=0;
    this.x = x;      this.y = y;
    this.width = w;  this.height = h;       
}
Rectangle.prototype.isEmpty = function() {  // : Boolean
    return (this.width<=0 || this.height <= 0);
}
Rectangle.prototype.intersection = function(rec) {  // : Rectangle
    var l = Math.max(this.x, rec.x);
    var r = Math.min(this.x+this.width , rec.x+rec.width );
    var u = Math.max(this.y, rec.y);
    var d = Math.min(this.y+this.height, rec.y+rec.height);
    if(r<l || d<u) return new Rectangle();
    else           return new Rectangle(l, u, r-l, d-u);
}

那你就打電話

var r1 = new Rectangle( 0, 0,100,100);
var r2 = new Rectangle(90,90,100,100);
// r1.intersection(r2) would be Rectangle(90,90,10,10)
if( !r1.intersection(r2).isEmpty() ) ... // there is a collision