CSS+JS精灵动画求助：松开D键时重置AnimationIndex至0

要实现D键松开后角色回到停止状态，核心问题是原代码仅监听keypress事件（仅触发一次按键按下），无法检测按键松开动作，且没有持续触发移动的逻辑。以下是修改后的代码及说明：

修改要点 #

• 改用keydown和keyup事件分别监听按键按下与松开
• 添加isDPressed变量跟踪D键状态
• 用setInterval实现按住D键时的持续移动，松开时清除定时器并重置动画帧

修改后的完整代码 #

$(document).ready(function () {
    var V = 40;
    var boneco = $('.boneco');
    var animacoes = ['direita', 'direita2', 'direita3', 'direita4']; 
    var animacaoIndex = 0; // 初始设为停止帧
    var moveInterval;
    var isDPressed = false;

    function moverBonecoDireita() {
        var andou = parseInt(boneco.css('margin-left')) || 0;
        var larguraTela = $(window).width();
        var larguraBoneco = boneco.width();

        if (andou + V + larguraBoneco <= larguraTela) {
            boneco.removeClass(animacoes[animacaoIndex]);
            animacaoIndex = (animacaoIndex + 1) % animacoes.length;
            boneco.addClass(animacoes[animacaoIndex]);
            boneco.css('margin-left', (andou + V) + 'px');
        }
    }

    // 监听D键按下
    $(document).on('keydown', function (evento) {
        if (evento.key === 'd' && !isDPressed) {
            isDPressed = true;
            // 启动持续移动定时器
            moveInterval = setInterval(moverBonecoDireita, 110);
        } else if (evento.key === 'a') {
            clearInterval(moveInterval);
            isDPressed = false;
            boneco.removeClass(animacoes.join(' '));
            boneco.css('margin-left', '0px');
            animacaoIndex = 0;
            boneco.addClass(animacoes[animacaoIndex]);
        }
    });

    // 监听D键松开
    $(document).on('keyup', function (evento) {
        if (evento.key === 'd') {
            isDPressed = false;
            clearInterval(moveInterval);
            // 切换回停止帧
            boneco.removeClass(animacoes[animacaoIndex]);
            animacaoIndex = 0;
            boneco.addClass(animacoes[animacaoIndex]);
        }
    });
});

关键改动说明 #

1. 初始帧设为0：将animacaoIndex初始值改为0，对应停止状态的精灵帧
2. 按键状态跟踪：isDPressed变量记录D键是否被按住，避免重复启动定时器
3. 持续移动逻辑：按住D键时通过setInterval每隔110ms触发一次移动，模拟持续行走动画
4. 松开重置动画：keyup事件触发时，清除定时器，切换回animacaoIndex=0的停止帧
5. A键重置优化：点击A键重置位置时，同时切换回停止帧，保持状态一致

内容的提问来源于stack exchange，提问作者Felipe Soares Rodrigues