JavaScript图形平台游戏碰撞问题求助：角色异常位移与掉落故障

先给你修复后的完整碰撞检测函数，适配CodeHS的Graphics环境，直接解决你提到的两个问题：

function checkCollisions(player, platforms) {
    // 计算角色下一帧的预测位置（避免已重叠再处理，解决卡入问题）
    const nextX = player.x + player.velX;
    const nextY = player.y + player.velY;
    let collided = false;

    for (let platform of platforms) {
        // 计算角色预测位置与平台的边界范围
        const playerLeft = nextX;
        const playerRight = nextX + player.width;
        const playerTop = nextY;
        const playerBottom = nextY + player.height;

        const platformLeft = platform.x;
        const platformRight = platform.x + platform.width;
        const platformTop = platform.y;
        const platformBottom = platform.y + platform.height;

        // 判断是否存在边界重叠（即碰撞）
        const hasHorizontalOverlap = playerRight > platformLeft && playerLeft < platformRight;
        const hasVerticalOverlap = playerBottom > platformTop && playerTop < platformBottom;

        if (hasHorizontalOverlap && hasVerticalOverlap) {
            collided = true;
            // 计算x、y方向的重叠量
            const overlapX = Math.min(playerRight - platformLeft, platformRight - playerLeft);
            const overlapY = Math.min(playerBottom - platformTop, platformBottom - playerTop);

            // 优先处理重叠量更小的方向（判断是水平还是垂直碰撞）
            if (overlapX < overlapY) {
                // 水平碰撞：替换硬卡入为减速逻辑
                if (player.velX > 0) {
                    player.x = platformLeft - player.width;
                } else {
                    player.x = platformRight;
                }
                // 用摩擦力实现自然减速
                player.velX *= player.friction;
            } else {
                // 垂直碰撞：先校验角色是否在平台有效水平范围内（解决悬空回弹）
                const isPlayerOnPlatform = (player.x + player.width/2) > platformLeft && (player.x + player.width/2) < platformRight;
                if (isPlayerOnPlatform) {
                    if (player.velY > 0) {
                        // 角色下落踩中平台顶部，重置位置并停止下落
                        player.y = platformTop - player.height;
                        player.velY = 0;
                        player.onGround = true;
                    } else {
                        // 角色从下方撞平台底部，轻微回弹
                        player.y = platformBottom;
                        player.velY *= -0.5;
                    }
                }
            }
        }
    }

    if (!collided) {
        player.onGround = false;
    }
}

关键修复逻辑说明 #

1. 解决「卡入边缘后掉落」问题 #

• 预测性检测：提前计算角色下一帧位置，避免等角色已经嵌入平台内部再处理——原来的逻辑大概率是用当前位置判断碰撞，导致角色卡入后被重力强行拉落。
• 水平碰撞减速：碰到平台边缘时，不是直接清零速度，而是用摩擦力（player.friction，建议设0.6-0.8）让角色逐渐减速，符合真实物理运动逻辑。

2. 解决「悬空边缘掉落回弹」问题 #

• 水平范围校验：处理垂直碰撞前，先判断角色中心点是否在平台的水平范围内。只有当角色确实踩在平台上方时，才触发落地逻辑；如果角色在平台边缘外悬空，哪怕y轴有轻微重叠，也不会错误触发回弹。

游戏中快速接入步骤 #

1. 确保角色对象包含必要属性：

   const player = {
       x: 100,
       y: 200,
       width: 40,
       height: 60,
       velX: 0,
       velY: 0,
       friction: 0.7,
       onGround: false
   };
   

2. 平台数组可直接复用CodeHS的Rectangle对象属性：

   const platforms = [
       {x: 0, y: 450, width: 800, height: 50}, // 地面
       {x: 200, y: 350, width: 150, height: 20}, // 悬空平台
   ];
   

3. 在主循环（draw()函数）中按顺序执行：

   function draw() {
       // 应用重力
       player.velY += 0.5;
       // 执行碰撞检测
       checkCollisions(player, platforms);
       // 更新角色位置
       player.x += player.velX;
       player.y += player.velY;
   
       // 渲染角色与平台（CodeHS Graphics API）
       clear();
       fillRect(player.x, player.y, player.width, player.height, "blue");
       platforms.forEach(p => fillRect(p.x, p.y, p.width, p.height, "gray"));
   }
   

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