如何解决按键控制的圆形元素移出浏览器窗口的问题？

原实现代码 #

JavaScript 代码 #

var circle = document.getElementById("circle");

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

function moveDown() {
  var top = circle.offsetTop;
  newTop = top + 10;
  circle.style.top = newTop + "px";
  console.log("moveDown Called")
}

function moveLeft() {
  var left = circle.offsetLeft;
  newLeft = left - 10;
  circle.style.left = newLeft + "px";
  console.log("moveLeft Called")
}

function moveRight() {
  var left = circle.offsetLeft;
  newLeft = left + 10;
  circle.style.left = newLeft + "px";
  console.log("moveRight Called")
}

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();
  }
})

CSS 代码 #

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

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

这段代码通过w/s/a/d按键控制圆形元素上下左右移动，但存在圆形会完全移出浏览器窗口的问题。

问题原因 #

• 代码仅对圆形的top和left属性做简单增减，未设置任何边界限制，当位置超出窗口可视区域范围时，仍会继续移动；
• 未考虑圆形自身尺寸：比如向上/向左移动时，仅判断top/left是否小于0不够，需保证圆形边缘不超出窗口；向下/向右移动时，需结合窗口可视尺寸和圆形自身尺寸计算最大可移动位置。

修复方案 #

修改移动函数，增加边界判断逻辑，确保圆形始终处于浏览器可视窗口内：

修复后的 JavaScript 代码 #

var circle = document.getElementById("circle");
// 提前获取圆形的固定尺寸
const circleWidth = circle.offsetWidth;
const circleHeight = circle.offsetHeight;

function moveUp() {
  var top = circle.offsetTop;
  newTop = top - 10;
  // 限制顶部不超出窗口上沿
  if (newTop >= 0) {
    circle.style.top = newTop + "px";
  }
  console.log("moveUP Called")
}

function moveDown() {
  var top = circle.offsetTop;
  newTop = top + 10;
  // 限制底部不超出窗口下沿（窗口可视高度 - 圆形高度）
  if (newTop <= window.innerHeight - circleHeight) {
    circle.style.top = newTop + "px";
  }
  console.log("moveDown Called")
}

function moveLeft() {
  var left = circle.offsetLeft;
  newLeft = left - 10;
  // 限制左侧不超出窗口左沿
  if (newLeft >= 0) {
    circle.style.left = newLeft + "px";
  }
  console.log("moveLeft Called")
}

function moveRight() {
  var left = circle.offsetLeft;
  newLeft = left + 10;
  // 限制右侧不超出窗口右沿（窗口可视宽度 - 圆形宽度）
  if (newLeft <= window.innerWidth - circleWidth) {
    circle.style.left = newLeft + "px";
  }
  console.log("moveRight Called")
}

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();
  }
})

修复说明 #

1. 提前获取圆形的宽高，用于后续边界计算；
2. 每个移动函数增加条件判断：
   • 向上移动时，确保newTop不小于0，避免圆形顶部超出窗口；
   • 向下移动时，确保newTop不超过window.innerHeight - circleHeight，避免圆形底部超出窗口；
   • 向左移动时，确保newLeft不小于0，避免圆形左侧超出窗口；
   • 向右移动时，确保newLeft不超过window.innerWidth - circleWidth，避免圆形右侧超出窗口；
3. 仅当新位置符合边界要求时，才执行位置更新操作，彻底避免圆形移出窗口。

内容的提问来源于stack exchange，提问作者The Raw Coconut