2D平台游戏实现重力与碰撞功能后重力卡顿问题求修复方案

DevOps 小满

2026-9-28

卡顿根源排查

你当前的重力逻辑存在两个严重影响性能的核心问题：

每帧调用get()读取画布像素做碰撞检测：p5.js的get()操作需要读取整个画布的像素缓冲区，属于重IO操作，运行频率越高卡顿越明显
每帧执行print(gc)输出日志：控制台打印本身属于高消耗操作，频繁调用会直接拖慢渲染线程

优化修复方案

1. 替换像素检测为网格碰撞检测

你已经用groundArray存储了所有地面的网格坐标，完全可以直接通过坐标换算判断玩家脚下是否有地面，不需要读取像素，性能可提升数十倍。

2. 删除冗余控制台打印

调试完成后直接移除print(gc)代码，避免无意义的性能损耗。

3. 补充数组越界判断

查询地面数组前先判断索引是否在groundArray的合法范围内，避免运行时报错。

修改后重力逻辑代码参考

gravity(){
    if(this.y <= 400 - this.scale){
        // 匹配初始化时的地面单元尺寸
        const gridSize = 40;
        // 计算玩家碰撞盒底部对应的网格坐标
        const footX = Math.floor(this.x / gridSize);
        const footY = Math.floor((this.y + this.scale) / gridSize);
        
        let hasGround = false;
        // 先判断索引合法性再查询地面
        if(footY >= 0 && footY < groundArray.length){
            if(footX >= 0 && footX < groundArray[footY].length){
                hasGround = groundArray[footY][footX] !== 0;
            }
        }
        // 无地面时才执行下落
        if(!hasGround){
            this.y += 2;
        }
    }
}