var circle = document.getElementById("circle");
console.log(window.innerWidth, window.innerHeight)

function moveUp() {
  var top = circle.offsetTop;
  console.log(top)
  newTop = top - 10;
  if(newTop < 0) {
    newTop = 0;
  }
  circle.style.top = newTop + "px";
 
}

function moveDown() {
  var top = circle.offsetTop;
  var height = circle.offsetHeight + top;
  if((height + 10) >= window.innerHeight) {
  return;
  }
  newTop = top + 10;
  circle.style.top = newTop + "px";

  /* console.log("moveDown Called") */
}

function moveLeft() {
  var left = circle.offsetLeft;
  
  newLeft = left - 10;
  if(newLeft<0) {
  newLeft = 0;
  }
  circle.style.left = newLeft + "px";

 
}

function moveRight() {
  var left = circle.offsetLeft;
  newLeft = left + 10;
  if(newLeft > window.innerWidth - 100 ) {
    newLeft = window.innerWidth - 100 ;
  }
  circle.style.left = newLeft + "px";

 
}

window.addEventListener("keypress", (event) => {

  if (event.key == 'w') {
    moveUp();
  } else if (event.key == 's') {
    moveDown();
  } else if (event.key == 'a') {
    moveLeft();
  } else if (event.key == 'd') {
    moveRight();
  }
})

body{
    margin:2px;
    background-color: aquamarine;   
}

#circle{
    height: 100px;
    width: 100px;
    background-color: blue;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
}

<div id="circle">

</div>

• • 解释**

对于moveup()，如果位置是一个负数，意味着div将离开视口，所以在if条件下，new position将始终设置为0，以防止div进入负位置。
对于moveDown()，首先你得到offsetTop，它表示盒子离顶部位置有多远，还有offsetHeight，它表示盒子的高度。所以把这两个相加得到总高度。现在简单地检查这个高度是否超过了你每次移动的innerHeight + the distance(10)。如果超过了innerHeight，就返回。否则移动盒子。
moveLeft()与moveUp()相同。
moveRight()和moveDown()是一样的，但是这里我们计算的是innerWidth。减去它和框宽，这样它就不会超出视口。现在简单的条件检查并设置新的右边位置。
希望能有所帮助

"有什么问题吗"
没有问题，CSS完全按照你告诉它的去做。
例如，你可以点击'w'几次，这将把绝对定位圆的left属性设置为-160px，这将指示浏览器把元素移到左边，远离视口。例如，将其定位在初始包含块的左边缘的-160px或最近定位的祖先。https://developer.mozilla.org/en-US/docs/Web/CSS/left
我不会说这是一个问题，因为这正是left的用途--将元素移动到您喜欢的任何位置。

我该如何补救

如果你不想你的圆离开视口，你需要检查你的圆是否“接触”视口。我将使用左边的例子，但同样的逻辑可以应用于top，right和bottom。
因此，对于左派来说，这将包括两部分：
1.检查从圆到视口左边缘的初始距离。
1.检查新左值的绝对值是否不大于此距离。
例如，对于left方法：

var elDistanceToLeft = window.pageXOffset + circle.getBoundingClientRect().left;

function moveLeft() {
  let left = circle.offsetLeft;
  newLeft = Math.abs(left - 10) <= elDistanceToLeft ? left - 10 : -elDistanceToLeft;
  circle.style.left = newLeft + "px";
}

在这种情况下，你的圆圈会一直向左移动（按下“a”键），直到它“接触到"视见区（屏幕），然后它会停止。

这是一个代码片段

x一个一个一个一个x一个一个二个一个x一个一个三个一个