Problem z setInerval();

0

Witam, chciałem użyć setInterval do kreacji czegoś takiego na wzór health bara, wszystko fajnie działa, ale problem zaczyna się gdy chce dodać animacje wewnątrz funkcji. Korzystam ze sposobu usuwania i dodawania klas css.
Na zewnątrz funkcji i na konsoli animacja normalnie działa i mogę ją resetować:

document.getElementById("weapon").classList.add('animation1');
[....]
document.getElementById('weapon').classList.remove('animation1');

a to funkcja, hp bar działa i jest dynamiczny, tzn w takim sensie jak chciałem tak działa, ale brakuje mi animacji, które w setInerval mi nia działają, o to funkcja:

function fightBeta(){
        var elem = document.getElementById("myHPbar"); 
        var elem2 = document.getElementById("enemyHPbar"); 
        var width = 100;
        var width2 = 100;
        var maxHp = char.hp;
        var currentHp = char.hp;
        var enemyHp = 200;
        var id = setInterval(frame, 200);
        elem.style.transition = 'width 2s';
       
       function frame(){
        if (width <= 0) {
             clearInterval(id);
        } else
            {
            
            
            var dmgDone = Math.floor((Math.random() * 15) + 5);
            var enemyDmgDone = Math.floor((Math.random() * 10) + 1);
            var percentHP = enemyDmgDone/enemyHp * 100;
            var percentHP2 = dmgDone/maxHp * 100;

            maxHp = maxHp - enemyDmgDone;
            enemyHp = enemyHp - dmgDone;

            width = width - percentHP;
            width2 = width2 - percentHP2;

            
            
            elem.style.trasition = 'width ' + percentHP + 's';

            elem2.style.trasition = 'width ' + percentHP2 + 's';
            
            
            /* document.getElementById("weapon").classList.add('animation1'); */
           /*  document.getElementById('weapon').classList.remove('animation1');  /*nie działa gdzie bym nie dał*/
            if(dmgDone >= enemyHp){
                elem2.style.width = 0 + "%";
                document.getElementById('weapon').classList.remove('animation1');
            } else {

            
            elem.style.width = width + '%'; 
            elem2.style.width = width2 + '%'; 
                }
            }
       }
    }

Problem czemu nie działa wewnątrz setInterval(), nawet jak stawie czas na 5000 czy więcej nie pomaga. Na zewnątrz usuwanie i dodawanie klas normalnie działa i a w tym przypadku nie i nie mam pojęcia czemu to jest spowodowane. A to ważne bo chce, żeby przy starcie tego animacja się włączała(powtarzała tyle razy ile potrzebuje) a po zakończeniu tego eventu znikała.

1

trasition - u sure?

0

ale popraw ten kod np. to nie ma sensu. Co ty tutaj robisz? elem2.style.trasition = 'width ' + percentHP2 + 's';

0

Zrobiłem teraz przykład, żeby każdy wiedział o co biega:
https://jsfiddle.net/kwyoa86n/1/ (tu w setInerval nie działa)
ale tutaj czy gdziekolwiek indziej poza setInterval() działa:
https://jsfiddle.net/n2h6pw51/1/ (tylko raz wyskakuje, a nie co zadany czas)

0

Refresh

1
function fightBeta(){
        var elem = document.getElementById("myHPbar"); 
        var elem2 = document.getElementById("enemyHPbar"); 
        var width = 100;
        var width2 = 100;
        var maxHp = char.hp;
        var currentHp = char.hp;
        var enemyHp = 200;
               function frame(){
        if (width <= 0) {
             clearInterval(id);
        } else
            {

            var dmgDone = Math.floor((Math.random() * 15) + 5);
            var enemyDmgDone = Math.floor((Math.random() * 10) + 1);
            var percentHP = enemyDmgDone/enemyHp * 100;
            var percentHP2 = dmgDone/maxHp * 100;

            maxHp = maxHp - enemyDmgDone;
            enemyHp = enemyHp - dmgDone;

            width = width - percentHP;
            width2 = width2 - percentHP2;

            elem.style.trasition = 'width ' + percentHP + 's';

            elem2.style.trasition = 'width ' + percentHP2 + 's';

            /* document.getElementById("weapon").classList.add('animation1'); */
           /*  document.getElementById('weapon').classList.remove('animation1');  /*nie działa gdzie bym nie dał*/
            if(dmgDone >= enemyHp){
                elem2.style.width = 0 + "%";
                document.getElementById('weapon').classList.remove('animation1');
            } else {

            elem.style.width = width + '%'; 
            elem2.style.width = width2 + '%'; 
                }
            }
       }
        var id = setInterval(frame, 200);
        elem.style.transition = 'width 2s';


    }

Najpierw zdefiniuj funkcję, a potem interwał. To jest zmieniony kod.

0

Może jest jeszcze inny błąd, ale na pewno nie można ustawić interwału z niezdefiniowaną jeszcze funkcją. Może pomóc zdefiniowanie funkcji frame na poziomie głównym a nie wewnątrz funkcji fightBeta. Jeżeli jest błąd składni, informacja powinna wyświetlić się w konsoli przeglądarki (F12 i klikasz Console).

1 użytkowników online, w tym zalogowanych: 0, gości: 1