如何在 jquery 中设置移动限制？答案

【问题标题】：How do I set a movement limit in jquery?如何在 jquery 中设置移动限制？
【发布时间】：2020-03-04 12:14:26
【问题描述】：

我正在尝试创建 pong，并且我已经创建了所有 html、css 和 js 以供桨移动，但是我如何防止它们从我设置的预定边界之外移动？

这是js中右桨存在的代码，使用jquery。

var rightBoard = GameItem("#rightBoard");
  rightBoard.x = BOARD_WIDTH - $('#rightBoard').width()

这是移动代码。

var keycode = event.which;
    if (keycode === KEY.DOWNARROW) {
      rightBoard.velocityY = 5;
    }if (keycode === KEY.UPARROW) {
      rightBoard.velocityY = -5; 
    }

如何设置限制以使其不会超过某个点？我坚持这一点，因为这是我的第一个项目之一。感谢您的帮助。

【问题讨论】：

标签： jquery pong

【解决方案1】：

每次移动桨叶时，无论是在设置速度期间还是在实际将速度添加到桨叶位置的位置，检查新更新的位置是在边界内还是边界外。如果在里面，则只更新实际位置。

var keycode = event.which;
    if (keycode === KEY.DOWNARROW) {
      if(rightBoard.y + 5 < BOARD_HEIGHT - Paddle_Height)
           rightBoard.velocityY = 5;
      else
           rightBoard.velocityY = 0;
    }if (keycode === KEY.UPARROW) {
      if(rightBoard.y - 5 > 0)
           rightBoard.velocityY = -5;
      else
           rightBoard.velocityY = 0;
    }

这里我假设桨的原点设置在左上角。

【讨论】：