JS游戏开发：通过元素left值判断碰撞停止动画失效问题

你的代码存在的核心问题 #

1. 类型不匹配：width 是数字类型，而 elem.style.left 返回的是带 % 后缀的字符串（比如 "5%"），直接用 == 比较永远不会相等。
2. 错误的碰撞判断逻辑：你并没有检查两张图片是否真的发生碰撞，只是在判断 width 是否等于其中一个元素的 left 值，这完全和碰撞无关。
3. 独立的定时器管理：两个移动函数各自启动定时器，碰撞发生时只停止当前函数的定时器，另一个元素会继续移动。
4. 获取位置的方式不准确：elem.style.left 只能获取内联样式中的 left 值，如果元素的位置是通过 CSS 类设置的，这个值会是空的，应该用 getBoundingClientRect() 来获取精确的元素位置和尺寸。

修正后的代码实现 #

下面是重构后的代码，解决了上述问题，实现了碰撞时停止所有动画的功能：

// 全局存储两个定时器ID，方便碰撞时停止
let playerInterval;
let enemyInterval;

function startGame() {
    // 启动玩家移动
    playerInterval = setInterval(movePlayer, 100);
    // 启动敌人移动
    enemyInterval = setInterval(moveEnemy, 100);
}

function movePlayer() {
    const elem = document.getElementById("1");
    let currentLeft = parseFloat(elem.style.left) || 0; // 解析当前left值为数字
    currentLeft += 1;
    elem.style.left = currentLeft + '%';
    
    // 每次移动后检查碰撞
    checkCollision();
}

function moveEnemy() {
    const enem = document.getElementById("2");
    let currentLeft = parseFloat(enem.style.left) || 70; // 初始left是70%
    currentLeft -= 1;
    enem.style.left = currentLeft + '%';
    
    // 每次移动后检查碰撞
    checkCollision();
}

function checkCollision() {
    const player = document.getElementById("1");
    const enemy = document.getElementById("2");
    
    // 获取元素的精确位置和尺寸
    const playerRect = player.getBoundingClientRect();
    const enemyRect = enemy.getBoundingClientRect();
    
    // 判断矩形是否碰撞
    const isCollided = playerRect.right > enemyRect.left &&
                      playerRect.left < enemyRect.right &&
                      playerRect.bottom > enemyRect.top &&
                      playerRect.top < enemyRect.bottom;
    
    if (isCollided) {
        // 停止所有动画
        clearInterval(playerInterval);
        clearInterval(enemyInterval);
        console.log("碰撞发生，动画停止");
    }
}

关键改进点说明 #

• 使用 getBoundingClientRect()：这个方法返回元素相对于视口的位置和尺寸，包括 left、right、top、bottom、width、height 等属性，是判断碰撞的可靠方式。
• 正确的碰撞检测逻辑：通过判断两个矩形是否在水平和垂直方向上都有重叠，来确定是否发生碰撞。
• 统一管理定时器：将定时器ID存储为全局变量，碰撞时可以同时停止两个元素的移动。
• 类型转换：用 parseFloat() 将样式字符串转换为数字，避免类型不匹配的问题。

内容的提问来源于stack exchange，提问作者Tameem AS