如何优化JS游戏循环实现跳帧，无需手动重写大量代码

你不需要大规模重构现有业务代码，只需要修改外层draw循环的控制逻辑即可实现跳帧效果，完全兼容现有runGame的代码结构：

具体实现 #

修改你的sketchProc代码如下：

var sketchProc = function(processingInstance) {
 with (processingInstance) {
    size(2560, 1800); 
    frameRate(60); // 渲染帧率拉满，逻辑帧率自主控制
    const TARGET_LOGIC_FPS = 30; // 保持和你原有逻辑的30帧更新速率一致
    const FIXED_UPDATE_STEP = 1000 / TARGET_LOGIC_FPS;
    let lastUpdateTime = millis();
    let timeAccumulator = 0;

    var draw = function(){
        const currentTime = millis();
        // 加最大值限制，避免切后台回来后逻辑一次性跑太多帧
        const frameDelta = Math.min(currentTime - lastUpdateTime, 1000);
        lastUpdateTime = currentTime;
        timeAccumulator += frameDelta;

        // 掉帧时多次执行逻辑更新，跳过中间渲染，实现跳帧
        while(timeAccumulator >= FIXED_UPDATE_STEP) {
            runGame(); // 原有游戏逻辑无需任何修改
            timeAccumulator -= FIXED_UPDATE_STEP;
        }
    }
 }}

方案说明 #

• 核心逻辑是用固定时间步长跑游戏更新，渲染帧只负责展示最新的游戏状态，CPU负载过高时只会跳过渲染，不会拖慢游戏运行速度
• 现有runGame内的数千行代码不需要做任何调整，改造成本几乎为0
• 后续如果要迁移到p5.js，这套时间控制逻辑可以直接复用，p5.js也内置了millis()方法，只需要调整外层初始化代码即可

内容的提问来源于stack exchange，提问作者Dr. Slate