私の状態はなぜ機能していないのですか？

Question

JavaScriptで、私はHTMLキャンバスゲームを作っています。そのゲームでは、gamePieceというオブジェクトタイプ/コンストラクタがあります。 gamePiece checkCollisionと呼ばれる機能があります。

this.checkCollision = function(piece){ 
    var collisionX = piece.x >= this.x && piece.x <= (this.x + this.width); 
    var collisionY = piece.y <= this.y && piece.y <= (this.y - this.height); 
    if(collisionX || collisionY){ 
     return true; 
    } else { 
     return false; 
    } 
} 

アップデートによって呼び出される（）

function update(){ 
context.clearRect(0, 0, game.width, game.height); 
for(var i = 0; i < gamePieces.length; i++){ 
    gamePieces[i].update(); 
    for(var mi = 0; mi < gamePieces.length; mi++){ 
     gamePieces[i].checkCollision(gamePieces[mi]); 
     if(gamePieces[i].checkCollision(gamePieces[mi]) == true){ 
      gamePieces[i].collisionFunction(); 
     } 
    } 
} 
} 
setInterval(function(){update();}, 1); 

私は別のゲームの駒との衝突時にスピードブーストを与えることになっている別のオブジェクトを持っており、それが記録されますそれがスピードブーストを与えるたびに。

var speedBooster = new gamePiece(25,25,"red",300,300,0); 
speedBooster.collisionFunction = function(){ 
    for(var whichpiece = 0; whichpiece < gamePieces.length; whichpiece++){ 
     if(speedBooster.checkCollision(gamePieces[whichpiece]) == true && gamePieces[whichpiece] != this){ 
      gamePieces[whichpiece].speed += 10; 
      console.log("gamePieces[" + whichpiece + "] has been given a speed boost."); 
     } 
    } 
} 

しかし、作品はその背後にある、と私は理由のためにそこに「> = this.x & & piece.x」を入れたときに、それは、スピードブーストを与えます。なぜJavaScriptは私が与えた状態を無視しているのですか？

Answer 1

2つのオブジェクトが重なってかどうかをテストするには

var collisionX = piece.x >= this.x && piece.x <= (this.x + this.width); 
var collisionY = piece.y >= this.y && piece.y <= (this.y + this.height); 
if(collisionX && collisionY){ 
    return true; 
} else { 
    return false; 
} 

を試してみてください。オブジェクトがx、yを左上、w、hを幅と高さとする場合

//Returns true if any part of box1 touches box2 
function areaTouching(box1,box2){ 
    return ! (box1.x > box2.x + box2.w || 
       box1.x + box1.w < box2.x || 
       box1.y > box2.y + box2.h || 
       box1.y + box1.h < box2.y) 
}