JS逐帧动画无法运行问题求助（附代码及演示视频）

DevOps 小满

2026-7-12

问题分析与修复方案

你的逐帧动画无法运行的核心问题出在帧计数变量未初始化和帧切换逻辑错误上，以下是具体问题和修复步骤：

1. 未初始化`frames`变量

你仅声明了let frames;但未赋予初始值，变量默认是undefined。在update函数中执行frames++后，变量会变为NaN（非数字），导致后续依赖frames的帧切换逻辑完全失效。

2. 帧切换逻辑错误

drawDino中你用if(frames == 0)触发帧切换，但frames只会在首次执行前是undefined，之后只会递增，永远不会等于0，因此动画帧完全不会切换。另外dino.period每次在if块中赋值属于冗余操作，应放在对象初始化阶段。

修复后的代码

初始化`frames`变量及优化dino对象

let frames = 0; // 初始化帧计数器为0

let dino = {
    animation : [
        startRunImg,
        secondRunImg,
        thirdRunImg,
        startRunImg
    ],
    x : dinoX,
    y : dinoY,
    w : dinoWidth,
    h : dinoHeight,
    onGround : true,
    frame : 0,
    period: 5 // 将帧间隔移至对象初始化
}

修改`drawDino`的帧切换逻辑

function drawDino(){
    let dinoA = dino.animation[dino.frame];
    context.drawImage(dinoA, dino.x, dino.y, dino.w, dino.h);

    if(state.current == state.game){
        // 每经过dino.period帧，切换一次动画帧
        if(frames % dino.period === 0){
            dino.frame = (dino.frame + 1) % dino.animation.length;
        }
    };
};