如何在JavaScript Canvas中实现玩家与墙体的正确碰撞检测？

我制作了一个示例演示问题，正在开发一款玩家收集苹果的游戏——玩家与苹果的碰撞检测功能正常（触碰苹果后玩家得1分，苹果会从数组中移除），但编写的checkSolidCollisions函数无法正常检测玩家与墙体数组的碰撞，导致玩家可以直接穿过墙体。

问题代码 #

checkSolidCollisions(walls) {
    // check to see if player is colliding with walls
    for (let i = 0; i < walls.length; i++) {
        if (
            this.dx <= walls[i].x + walls[i].width &&
            this.dx + this.dw >= walls[i].x &&
            this.dy <= walls[i].y + walls[i].height &&
            this.dy + this.dh >= walls[i].y
        ) {
            console.log(true);
            return true;
        }
    }
    return false;
}

问题演示 #

这是基于OOP JavaScript开发的项目，可提供更多信息以解决该问题。

1. 核心问题：仅检测碰撞未处理位置回退 #

你的碰撞检测函数只是判断了碰撞状态，但没有在碰撞发生时阻止玩家移动或回退位置——即使函数返回true，如果后续没有对应处理，角色仍会穿墙。

2. 先验证变量对应关系 #

确认以下变量的含义是否正确，变量对应错误会直接导致检测失效：

• this.dx/this.dy：玩家的当前坐标位置
• this.dw/this.dh：玩家的宽高
• walls[i].x/walls[i].y：墙体的坐标位置
• walls[i].width/walls[i].height：墙体的宽高

3. 修正移动+碰撞处理流程 #

在玩家移动逻辑中加入碰撞回退：

move() {
    // 保存移动前的位置
    const prevX = this.dx;
    const prevY = this.dy;

    // 执行原本的移动逻辑（比如根据方向键更新dx/dy）
    // ...你的移动代码...

    // 检测碰撞
    if (this.checkSolidCollisions(walls)) {
        // 碰撞发生，回退到移动前的位置
        this.dx = prevX;
        this.dy = prevY;
    }
}

4. 可选：细化碰撞方向判断 #

如果需要更精准的方向阻挡（比如只限制碰撞方向的移动），可以拆分碰撞条件：

checkSolidCollisions(walls) {
    for (let wall of walls) {
        // X轴重叠判断
        const xOverlap = this.dx + this.dw > wall.x && this.dx < wall.x + wall.width;
        // Y轴重叠判断
        const yOverlap = this.dy + this.dh > wall.y && this.dy < wall.y + wall.height;

        if (xOverlap && yOverlap) {
            // 可在这里扩展方向判断，比如计算碰撞偏移量，只回退对应轴的位置
            return true;
        }
    }
    return false;
}

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