JavaScript碰撞检测不起作用

Question

我想在我目前正在使用的JavaScript程序中进行碰撞检测工作，但我无法弄清楚它为什么会在这种奇怪的坐标中触发。 X 50 Y 199

如果你们中的任何一位都能很好的帮助，那将会非常感谢。这是我的代码。基于Y轴我说你的if语句

var game = {}; 
game.fps = 50; 
game.playerX = 50; 
game.playerY = 50; 


game.draw = function() { 

    c = document.getElementById('canvas'); 
    ctx = c.getContext("2d"); 
    clearCanvas(); 
    //PLAYER 
    ctx.fillStyle = "blue"; 
    ctx.fillRect(game.playerX, game.playerY, 50, 50); 
    //ENEMY 
    ctx.fillStyle = "green"; 
    ctx.fillRect(200, 200, 50, 50); 

    //Coords 
    ctx.font = "20px Arial"; 
    ctx.fillStyle = "red"; 
    ctx.fillText(game.playerX, 400, 480); 
    ctx.fillText(game.playerY, 450, 480); 

}; 

game.update = function() {  
    document.onkeydown = function() { 
     switch (window.event.keyCode) { 
      case 87: 
       //up 
       --game.playerY; 
       break; 
      case 83: 
       //down 
       ++game.playerY; 
       break; 
      case 65: 
       //left 
       --game.playerX; 
       break; 
      case 68: 
       //right 
       ++game.playerX; 
       break; 
     } 
    }; 
    //COLLISION DETECTION 
    if (game.playerX <= 200 && game.playerX <= 250 && game.playerY >= 200 && game.playerY <= 250) { 
     alert("it worked!"); 
     game.playerX = 400; 

    } 
    //END OF COLLISION DETECTION  
}; 

game.run = function() { 
    game.update(); 
    game.draw(); 
}; 

game.start = function() { 
    game._intervalId = setInterval(game.run, 1000/game.fps); 
}; 

game.stop = function() { 
    clearInterval(game._intervalId); 
}; 

Answer 1

你想if(game.playerX >= 200而非if(game.playerX <= 200。现在你正在检查playerX是否小于200且小于250，哪50个满足。

Answer 2

您正在使用不合适的键盘码：JavaScript Keycodes。另外，当您手动调用game.update（）时，您只会执行一次碰撞检查。您需要将keydown事件中运行碰撞检查：

这里是一个Fiddle

document.onkeydown = function (e) { 
    switch (e.keyCode) { 
     case 38: 
      //up 
      console.log('up'); 
      --game.playerY; 
      break; 
     case 40: 
      //down 
      ++game.playerY; 
      break; 
     case 37: 
      //left 
      --game.playerX; 
      break; 
     case 39: 
      //right 
      ++game.playerX; 
      break; 
    } 

    console.log(game.playerX + ', ' + game.playerY); 

    //COLLISION DETECTION 
    if (game.playerX >= 200 && game.playerX <= 250 && game.playerY >= 200 && game.playerY <= 250) { 
     alert("it worked!"); 
     game.playerX = 400; 
    } 
};