CodeHS JavaScript 图片碰撞检测失效 角色收集卢比功能故障排查

核心故障点 #

• 碰撞判断的执行时机错误：4段碰撞if语句全部写在start()初始化函数内，该函数仅在程序启动时运行1次，此时角色处于初始静止位置。后续按方向键移动角色时，碰撞检测逻辑不会重新触发，自然无法识别角色移动后的碰撞状态。
• 碰撞边界尺寸计算不匹配：代码中设置卢比实际尺寸为宽50px、高60px，但碰撞判断时给卢比的右边界加的是40px、下边界加的是50px，和实际图片尺寸存在10px的偏差，就算检测逻辑正常运行，也会出现判定不准的问题。
• 额外隐患：按键移动时没有给x、y设置画布边界限制，角色移动到画布外也不会触发重置或拦截，会进一步导致碰撞判定失效。

修正步骤 #

1. 将碰撞检测逻辑抽为独立的全局函数，每次完成角色位置更新后立即调用，保证碰撞判定的频率和角色移动频率同步
2. 修正碰撞判断中的边界值：卢比的右边界取卢比x坐标 + 实际宽度50，下边界取卢比y坐标 + 实际高度60，和实际图片尺寸完全对齐
3. （优化项）后续可以将4个卢比存入统一数组，遍历数组完成碰撞检测，减少重复代码量

修正后的核心代码片段 #

// 碰撞检测独立函数
function checkRupeeCollision(){
    // 卢比1判定：边界和实际尺寸完全匹配
    if(x < rw1 + 50 && x + 48 > rw1 && y < rh1 + 60 && y + 70 > rh1){
        remove(rupee1);
    }
    // 卢比2、3、4的判定替换原有40/50的偏移值，逻辑同理
    if(x < rw2 + 50 && x + 48 > rw2 && y < rh2 + 60 && y + 70 > rh2){
        remove(rupee2);
    }
    if(x < rw3 + 50 && x + 48 > rw3 && y < rh3 + 60 && y + 70 > rh3){
        remove(rupee3);
    }
    if(x < rw4 + 50 && x + 48 > rw4 && y < rh4 + 60 && y + 70 > rh4){
        remove(rupee4);
    }
}

// 移动函数中，每次更新位置后调用碰撞检测
function move(e){
    if (e.keyCode == Keyboard.LEFT){
        x -= 50;
        vixen.setPosition(x, y);
    }
    if (e.keyCode == Keyboard.RIGHT){
        x += 50;
        vixen.setPosition(x, y);
    }
    if (e.keyCode == Keyboard.UP){
        y -= 50;
        vixen.setPosition(x, y);
    }
    if (e.keyCode == Keyboard.DOWN){
        y += 50;
        vixen.setPosition(x, y);
    }
    // 位置更新完成后立刻检测碰撞
    checkRupeeCollision();
}

注意：原代码放在start()函数里的那4段碰撞判断可以直接删掉，初始化阶段的检测没有实际意义。

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