如何在JavaScript中让矩形触碰到屏幕边界时通过停止setInterval实现停止移动

嘿，我看到你在制作这款简单小游戏时遇到了边界检测和定时器清除的问题，咱们一步步拆解并修复这些问题：

原代码的核心问题 #

1. 定时器变量作用域问题：你在keydown事件的case里声明的leftInterval和rightInterval是局部变量，clearinterval函数根本访问不到它们，自然无法清除定时器。
2. 边界判断逻辑错误：
   • 直接用element.style.left < 0是无效的，因为element.style.left是带%的字符串，需要转成数值后再比较。
   • 边界判断只执行了一次（页面加载时），没有在每次移动后检查。
3. 重复创建定时器：每次按方向键都会新建一个定时器，多次按键会导致移动速度越来越快。

修正后的完整代码 #

HTML（无需修改）

<div id="rectangle"></div>

CSS（微调，确保元素初始定位正确）

body {
    background-color: brown;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    margin: 0; /* 移除默认边距，避免边界计算偏差 */
    overflow: hidden; /* 防止元素超出屏幕时出现滚动条 */
}
#rectangle {
    position: absolute; /* 把定位移到CSS里，JS只负责动态修改位置 */
    bottom: 2.5%;
    background-color: burlywood;
    width: 12%;
    height: 14px;
}

JavaScript（核心修改部分）

const element = document.querySelector('#rectangle');
const elementWidthPercent = 12; // 和CSS里的宽度保持一致，方便边界计算
let a = 1;
let currentInterval = null; // 用一个全局变量管理当前的定时器

// 页面加载时初始化位置
window.addEventListener('load', () => {
    element.style.left = "44%";
});

document.addEventListener('keydown', function (e) {
    // 先清除之前的定时器，避免重复叠加
    if (currentInterval) {
        clearInterval(currentInterval);
    }

    switch (e.keyCode) {
        case 37:
            currentInterval = setInterval(moveLeft, 100);
            break;
        case 39:
            currentInterval = setInterval(moveRight, 100);
            break;
    }
});

function moveLeft() {
    // 获取当前left的数值（去掉%）
    let currentLeft = parseInt(getComputedStyle(element).left);
    // 计算新的位置，确保不小于0（左边界）
    let newLeft = Math.max(currentLeft - a, 0);
    element.style.left = `${newLeft}%`;

    // 如果已经到达左边界，清除定时器
    if (newLeft === 0) {
        clearInterval(currentInterval);
        currentInterval = null;
    }
}

function moveRight() {
    let currentLeft = parseInt(getComputedStyle(element).left);
    // 右边界是100%减去元素自身宽度，避免元素超出屏幕
    let maxLeft = 100 - elementWidthPercent;
    let newLeft = Math.min(currentLeft + a, maxLeft);
    element.style.left = `${newLeft}%`;

    // 到达右边界时停止
    if (newLeft === maxLeft) {
        clearInterval(currentInterval);
        currentInterval = null;
    }
}

关键修改说明 #

• 统一管理定时器：用currentInterval全局变量存储当前运行的定时器，每次按键先清除之前的，避免多个定时器同时运行。
• 可靠获取元素样式：用getComputedStyle(element)获取元素的实际计算样式，比直接读element.style.left更可靠（比如元素样式来自CSS时，element.style.left会是空的）。
• 正确的边界计算：
  • 左边界：确保元素的left不小于0，避免元素左上角超出屏幕左边缘。
  • 右边界：计算为100% - 元素宽度，这样元素的右边缘刚好贴合屏幕右边界，不会超出。
• 移动时实时检查边界：每次执行moveLeft/moveRight时都检查边界，到达边界就清除定时器停止移动。

这样修改后，矩形就能在碰到屏幕左右边界时自动停止移动啦～

内容的提问来源于stack exchange，提问作者oday qsrawi