HTML Canvas 2D游戏建筑碰撞检测仅对最后渲染建筑生效问题排查

核心问题 #

你的碰撞检测逻辑存在两个致命问题：

1. leftCollision状态被循环覆盖：在forEach遍历建筑时，每一次循环都会重置leftCollision——只要当前建筑不满足碰撞条件，就会强制把leftCollision设为false。这意味着只有最后一个建筑的碰撞结果会保留，前面所有建筑的碰撞检测都会被覆盖。
2. 逐建筑修改玩家状态导致检测偏差：遍历过程中直接修改玩家的velocity和position，会让后续建筑的碰撞检测基于已经被修改的玩家状态，而非初始状态，可能导致逻辑混乱。

举个例子：当玩家碰到第一个建筑时，代码会修正位置和速度，但遍历到第二个建筑时，因为没碰撞，leftCollision会被设为false。如果你的输入逻辑是根据leftCollision决定是否允许移动（比如if (!leftCollision) player.velocity.x = 5），那么最后leftCollision为false会让玩家重新获得移动速度，直接无视第一个建筑的碰撞。

修复方案 #

方案1：先收集所有碰撞，再统一处理状态

不要在遍历每个建筑时立即修改玩家状态，先检测所有建筑的碰撞情况，记录结果后再统一处理：

// 初始化碰撞状态为false
let leftCollision = false;
// 保存玩家初始状态，避免中途修改位置导致后续检测误判
const player = world.player;
const initialPlayerX = player.position.x;
const initialPlayerVelX = player.velocity.x;

world.buildings.forEach(building => {
    // 用初始状态判断碰撞，避免中途修改位置影响检测结果
    if (player.position.y + player.spriteHeight >= building.position.y &&
        player.position.y <= building.position.y + building.image.height - player.spriteHeight - 1 &&
        initialPlayerX + player.spriteWidth <= building.position.x &&
        initialPlayerX + player.spriteWidth + initialPlayerVelX >= building.position.x) {
        // 只要有任意一个建筑碰撞，就将状态设为true
        leftCollision = true;
        // 修正玩家位置（如果有多个碰撞，可选择最合理的建筑进行修正）
        player.position.x = building.position.x - player.spriteWidth;
    }
});

// 统一处理速度
if (leftCollision) {
    player.velocity.x = 0;
}

方案2：移除else分支，避免状态覆盖

如果需要保留逐建筑检测的逻辑，只需去掉else分支，不再强制重置leftCollision，确保只要有一个碰撞发生，状态就会保持true：

let leftCollision = false;
const player = world.player;
const initialX = player.position.x;
const initialVelX = player.velocity.x;

world.buildings.forEach(building => {
    if (player.position.y + player.spriteHeight >= building.position.y &&
        player.position.y <= building.position.y + building.image.height - player.spriteHeight - 1 &&
        initialX + player.spriteWidth <= building.position.x &&
        initialX + player.spriteWidth + initialVelX >= building.position.x) {
        leftCollision = true;
        player.velocity.x = 0;
        player.position.x = building.position.x - player.spriteWidth;
    }
    // 移除else分支，不再重置leftCollision
});

额外检查点 #

确认你的输入处理逻辑中，是否基于leftCollision的最终状态来设置玩家速度：

// 错误示例：按键直接重置速度，无视碰撞
if (keys.right.pressed) {
    player.velocity.x = 5;
}

// 正确示例：只有无碰撞时才允许设置移动速度
if (keys.right.pressed && !leftCollision) {
    player.velocity.x = 5;
} else if (!keys.right.pressed) {
    player.velocity.x = 0;
}

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