I need help sprite animation with CSS and JS

Question

I made this simple project that allows a 4-image sprite to move in one direction, but I would like to know how I can do this so that whenever the D key (key that moves the character) is not being pressed, the AnimationIndex is the same to 0, giving the impression that the character has stopped.

        $(document).ready(function () {
            var V = 40;
            var boneco = $('.boneco');
            var animacoes = ['direita', 'direita2', 'direita3', 'direita4']; // 4 pois o sprite de andar para a direita contém apenas 4 imagens
            var animacaoIndex = 1;
            var teclaDisponivel = true;

            function moverBonecoDireita() {
                var andou = parseInt(boneco.css('margin-left')) || 0; // lembrar: tudo que vem do css vem como string, usar parseInt para converter
                var larguraTela = $(window).width(); // tam tela
                var larguraBoneco = boneco.width(); // tam boneco

                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');
                }
            }

            $(document).on('keypress', function (evento) {
                var tecla = evento.keyCode;
                if (tecla == 100 && teclaDisponivel) { // tecla 'd'
                    teclaDisponivel = false;
                    moverBonecoDireita();
                    setTimeout(function () {
                        teclaDisponivel = true;
                    }, 110);
                } else if (tecla == 97) { // tecla 'a'
                    boneco.removeClass(animacoes.join(' '));
                    boneco.css('margin-left', '0px');
                    animacaoIndex = 1;
                }
            });
        });

I tried to create a command block so that, when pressing the D key, animationindex would be equal to 0, but I failed

mickmackusa · Accepted Answer · 2024-10-16 17:56:41Z

$(document).ready(function () {
    var V = 40;
    var boneco = $('.boneco');
    var animacoes = ['direita', 'direita2', 'direita3', 'direita4']; 
    var animacaoIndex = 0; 
    var teclaDisponivel = true;

    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');
        }
    }

    $(document).on('keypress', function (evento) {
        var tecla = evento.keyCode;
        if (tecla == 100 && teclaDisponivel) { // 'D' key
            teclaDisponivel = false;
            moverBonecoDireita();
            setTimeout(function () {
                teclaDisponivel = true;
            }, 110);
        } else if (tecla == 97) {
            boneco.removeClass(animacoes.join(' '));
            boneco.css('margin-left', '0px');
            animacaoIndex = 0;
        }
    });

    $(document).on('keyup', function (evento) {
        var tecla = evento.keyCode;
        if (tecla == 100) { 
            boneco.removeClass(animacoes.join(' '));
            animacaoIndex = 0;
            boneco.addClass(animacoes[animacaoIndex]);
        }
    });
});

animacaoIndex = 0; Initialization: The animacaoIndex starts at 0 to represent the first frame of the animation.

This should give you the desired effect where the sprite animation resets to the first frame when the "D" key is not pressed.

Collectives™ on Stack Overflow

I need help sprite animation with CSS and JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related