我是 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 来控制它，但它仍然会脱离该区域，即使在全屏模式下滚动条也会被激活。对于游戏来说，它看起来太乱了。
这是它如何逃离该区域的图片:
在全屏模式下:
没有全屏模式:
最佳答案
可通过 getBoundingClientRect() 函数获得最准确的位置和尺寸测量值。
所以在击键回调的顶部我会添加两行:
var screenRect = document.body.getBoundingClientRect();
var playerRect = player.getBoundingClientRect();
这些都需要在每次迭代时计算，以确保“游戏”适应每次屏幕变化。此外，任何位置增量最好以屏幕尺寸的百分比而不是静态像素值来计算。
你的屏幕边缘检查应该像这样重写:
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;
}
关于javascript - 如何阻止元素触摸屏幕边框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52401666/