如何阻止元素触摸屏幕边框？

Question

我是 JS 的初学者，我正在尝试用它创建一个简单的游戏。我正在寻找一种方法来阻止导致屏幕滚动的播放器 (20px x 20px) 框，我正在寻找一个播放器不能超过屏幕两侧的固定屏幕。请在下面查看以前的尝试。

HTML :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Style.css">
  </head>
  <body>
    <div id="player"></div>
  <script type="text/javascript" src="Script.js"></script>
  </body>
</html>

CSS:

body{
  margin: 0;
  padding: 0;
  background-color: red;
}
#player{
  border-radius: 30%;
  padding: 0px;
  margin: 0px;
  background-color: white;
  width: 20px;
  height: 20px;
  position: absolute;
}

JavaScript:

var player = document.getElementById("player")
var pros = {'top': 0, 'left': 0, 'speed': 10}
var ws = {'h': screen.height, 'w': screen.width}
document.addEventListener("keydown", function(event){
  var keyP = event.key;
  if(keyP === "ArrowDown"){
    pros.top = pros.top + pros.speed;
  }else if(keyP === "ArrowUp"){
    pros.top = pros.top - pros.speed;
  }else if(keyP === "ArrowLeft"){
    pros.left = pros.left - pros.speed;
  }else if(keyP === "ArrowRight"){
    pros.left = pros.left + pros.speed;
  }
  if(pros.top < 0){
    pros.top = 0;
  }else if(pros.top > ws.h){
    pros.top = ws.h;
  }else if(pros.left < 0){
    pros.left = 0;
  }else if(pros.left > ws.w){
    pros.left = ws.w;
  }
  player.style.top = `${pros.top}px`;
  player.style.left = `${pros.left}px`;
});

现在，我希望元素永远不会脱离给定的屏幕区域。 正如您在我尝试使用 screen 的代码中看到的那样。height/screen.width 来控制它，但它仍然会脱离该区域，即使在全屏模式下滚动条也会被激活。对于游戏来说，它看起来太乱了。
这是它如何逃离该区域的图片：

在全屏模式下：

没有全屏模式：

Answer 1

嘿 :) 也许这对你有帮助：

<style type="text/css">
body {
    overflow:hidden;
}
</style>

设置 overflow: hidden 将隐藏滚动条。

Answer 2

根据您提供的样式表，您的 PLAYER 对象的 height 和 width 为 20px。

如果您将元素放置在二维平面上，那么它的坐标将是其 TOP-LEFT 角所在的点。划重点。

因此，您的 JavaScript 应更改为：

  ...
  if(pros.top < 0){
    pros.top = 0;
  }else if(pros.top > ws.h-20){ // changed here
    pros.top = ws.h-20; // try playing with the value here
  }else if(pros.left < 0){ 
    pros.left = 0;
  }else if(pros.left > ws.w-20){ //changed here
    pros.left = ws.w-20; // try playing with the value here
  }
  ...

这将始终将 #player 元素放置在水平轴内侧 20px 和垂直轴内侧 20px 的位置。我成功地限制了水平滚动条的出现，但垂直滚动条仅在 ws.h-40.

值时消失了

希望对您有所帮助。

Answer 3

最准确的位置和尺寸测量值可通过 getBoundingClientRect() 函数获得。

所以在你的击键回调的顶部我会添加两行：

var screenRect = document.body.getBoundingClientRect();
var playerRect = player.getBoundingClientRect();

这些需要在每次迭代时计算，以确保 "game" 适应每次屏幕变化。此外，任何位置增量最好以屏幕尺寸的百分比而不是静态像素值来计算。

你的屏幕边缘检查应该这样重写：

if(playerRect.top < 0){
    pros.top = 0;
} else if(playerRect.top + playerRect.height > screenRect.height){
    // make sure the bottom edge of the player doesn't go over the bottom edge of the screen
    pros.top = screenRect.height - playerRect.height;
}

if(playerRect.left < 0){
    pros.left = 0;
} else if(playerRect.left + playerRect.width + > screenRect.width){
    // make sure the right edge of the player doesn't go over the right edge of the screen
    pros.left = screenRect.width - playerRect.width;
}

在 CSS 端，尝试以下操作：

body{
  margin: 0;
  padding: 0;
  background-color: red;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#player{
  border-radius: 30%;
  padding: 0px;
  margin: 0px;
  background-color: white;
  width: 20px;
  height: 20px;
  position: fixed;
}

如何阻止元素触摸屏幕边框？

How to stop an element to touch screen border?

html

javascript

css

screen

game-development