如果對象到達頁面上的某個點，如何使對象停止？

Question

我正在制作一個游戲，您可以在某個區域內四處走動，但問題是您可以在我希望玩家進入的區域外自由移動。有什么辦法可以讓玩家到達某個區域頁面上的坐標，他不能再移動了？

我對它進行了編碼，以便每次按下任何箭頭鍵時，播放器都會向所選方向移動 16px。

<script>
//pressing a key
$(document).keydown(function(e){

//sets variables
var position = $("#player").position();
var xLimit = 500;
var yLimit = 300;
var currentX = 0;
var currentY = 0;
var offset = 16;

//everytime user presses "left" key object "player" moves left 16 pixels.
switch(e.keyCode){
case 37: //left
$("#player").css('left', position.left - 16 + 'px');

function moveLeft() {
   if (currentX + offset <= xLimit) {
       currentX += offset;
   }
}
break;


//everytime user presses "up" key object "player" moves up 16 pixels.
case 38: //up
$("#player").css('top', position.top - 16 + 'px');

function moveUp() {
   if (currentX + offset <= xLimit) {
       currentX += offset;
   }
}
break;


//everytime user presses "right" key object "player" moves right 16 pixels.
case 39: //right
$("#player").css('left', position.left + 16 + 'px');

function moveRight() {
   if (currentX + offset <= xLimit) {
       currentX += offset;
   }
}
break;


//everytime user presses "down" key object "player" moves down 16 pixels.
case 40: //down
$("#player").css('top', position.top + 16 + 'px');
break;

function moveDown() {
   if (currentX + offset <= xLimit) {
       currentX += offset;
   }
}

}
});
</script>

我試過了，但沒有用，有什么建議嗎？

Answer 1

您首先需要定義面積是多少（假設 X 和 Y 的下限為 0）：

var position = $("#player").position();
var xLimit = 500;
var yLimit = 300;
var offset = 16;

您可以測試移動是否會將玩家扔到您定義的區域之外。

switch(e.keyCode){
   case 37: //left
       function moveLeft() {
          if (position.left - offset >= 0) {
              $("#player").css('left', position.left - offset + 'px');
          }
       }
       break;

   case 38: //up
       function moveUp() {
          if (position.top - offset >= 0) {
              $("#player").css('top', position.top - offset + 'px');
          }
       }
       break;

   case 39: //right
       function moveRight() {
          if (position.left + offset <= xLimit) {
              $("#player").css('left', position.left + offset + 'px');
          }
       }
       break;

   case 40: //down
       function moveDown() {
           if (position.top + offset <= yLimit) {
               $("#player").css('top', position.top + offset + 'px');
           }
       }
       break;
 }