Я не хочу, чтобы мой «игрок» покинул экран, как мне это предотвратить?

Question

Это мой JavaScript. Внизу вы увидите addEventListener для события keydown. В этой функции присутствует код смены ключа. Этот код завернут в функцию if, что входит в функцию if, чтобы остановить проигрыватель от оставления холста.

function initCanvas() { 
    var canvas = document.getElementById('my_canvas'); 
    var ctx = canvas.getContext('2d'); 
    var cW = ctx.canvas.width; 
    var cH = ctx.canvas.height; 
    var dist = 10; 

    function Player() { 
     this.x = 0, this.y = 0, this.w = 50, this.h = 50; 

     this.render = function() { 
      ctx.fillStyle = "orange"; 
      ctx.fillRect(this.x, this.y, this.w, this.h); 
     } 
    } 

    var player = new Player(); 
    player.x = 100; 
    player.y = 225; 

    function animate() { 
     ctx.fillStyle = '#000'; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 
     player.render(); 
    } 
    var animateInterval = setInterval(animate, 30); 

    document.addEventListener('keydown', function(event) { 
     var key_press = String.fromCharCode(event.keyCode); 
     if (//I don't know what should go here) { 
      if (key_press == "W") { 
       player.y -= dist; 
      } else if (key_press == "S") { 
       player.y += dist; 
      } else if (key_press == "A") { 
       player.x -= dist; 
      } else if (key_press == "D") { 
       player.x += dist; 
      } 
     } 
    }); 

} 

window.onload = initCanvas(); 

Answer 1

document.addEventListener('keydown', function(event) { 
    var key_press = String.fromCharCode(event.keyCode); 
    if (//I don't know what should go here) { 
     if (key_press == "W" && player.y >= dist) { 
      player.y -= dist; 
     } else if (key_press == "S" && player.y <= (cH - dist)) { 
      player.y += dist; 
     } else if (key_press == "A" && player.x >= dist) { 
      player.x -= dist; 
     } else if (key_press == "D" && player.x < (cW - dist)) { 
      player.x += dist; 
     } 
    } 
}); 

Дополнительные проверки будет проверять, что он не на краю холста ни на расстоянии < dist от края. Предполагая, что верхний левый угол равен (0,0).

Обратите внимание, что было бы лучше перемещать пользователя к краю холста, когда он находится на расстоянии < dist от него. Я оставлю это вам.