Ошибка обнаружения столкновений JavaScript не работает

Question

Я пытаюсь сделать работу обнаружения столкновения в программе JavaScript, в которой я работаю в настоящее время, и не могу понять, почему она запускается в таких странных координатах. X 50 Y 199

Если какая-либо из вас будет хорошей помощью, которая была бы высоко оценена. Вот мой код.

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

На основании вашего заявления, если по оси Y, я бы сказал, что вы хотите, а не if(game.playerX >= 200if(game.playerX <= 200. Прямо сейчас вы проверяете, равен ли playerX меньше 200 и меньше 250, что удовлетворяет 50.

Answer 2

Вы используете неправильные коды ключей: JavaScript Keycodes. Кроме того, вы выполняете только проверку на столкновение один раз, когда вы вручную вызываете игру.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; 
    } 
};