Javascript: Почему мой JavaScript не запускает обе анимации?

0

Я работаю над видеоигрой для своего проекта, и я сталкиваюсь с проблемой анимации. В основном я играю в Final Fantasy, где вы подзаряжаете свой батон ATB, и как только он станет полным, вы можете сделать умение. Итак, у меня есть 3 функции. Первый очищает мой батон ATB, чтобы он сбрасывался. Этот код работает. Второй - это перезарядка временной шкалы, перемещая блок DIV на место. Это тоже работает. Третья функция - это функция умения атаки, которая также работает, за исключением того факта, что она не выполняет обе эти функции анимации в том порядке, в котором я их разместил.

Если вы посмотрите ниже, вы заметите, что у меня есть код, который сначала запускает ясную функцию ATB, а затем запускает функцию временной шкалы, надеясь, что каждый раз, когда я нажимаю кнопку, она будет сбросить мой ATB. Проблема в том, что он полностью игнорирует функцию FIRST и запускает вторую. Я попытался переключить их, и это происходит. Поэтому в основном я застрял, когда мой код всегда игнорирует первый и управляет вторым, если обе мои функции анимации находятся в коде. Итак, теперь я смущен тем, как это исправить, потому что я хочу, чтобы коды BOTH работали. Они работают отдельно и независимо, как сейчас, но когда я их совмещаю, регистрируется только второй.

   // 5. ATB TIMEBAR FUNCTION

function clearTimeBar (el, color) {  //Clears the bar
    var elem = document.getElementById(el);
    elem.style.transition = "width 0.0s, ease-in 0s";
    elem.style.background = color;
    elem.style.width = "0px"
}
function timeBar (el, color) {  // Runs the animation
    var elem = document.getElementById(el);
    elem.style.transition = "width 6.0s, ease-in 0s";
    elem.style.background = color;
    elem.style.width = "289px";
    }

// ATTACK SKILL
document.getElementById("attack").addEventListener('click', function(){
    clearTimeBar('overlay','white');  // Clear the ATB bar
    timeBar('overlay', 'blue'); // Run the ATB bar
    var criticalRoll = Math.floor(Math.random() * 100 + 1);
    var precisionRoll = Math.floor(Math.random() * cs.precision + 1);
    var npcParryRoll = Math.floor(Math.random() * dragonstats.parry + 1);
    var damage = Math.floor(Math.random() * cs.strength + 1);
        if (precisionRoll < npcParryRoll) {
            addMessage("The Dragon evaded your attack!");
            return;
        }
        if (cs.critical >= criticalRoll) {
            damage *= 2;
            damage -= dragonstats.armor;
            dragon.hp -= damage;
            document.getElementById("npchp").innerHTML = dragon.hp;
            addMessage("Critical Strike! Dragon suffers " + damage + " hp!")
            }   
        else if (damage - dragonstats.armor <= 0) {
            addMessage("Your opponents armor withstood your attack!");
            }
    else {  
    damage -= dragonstats.armor;
    dragon.hp -= damage;
    document.getElementById("npchp").innerHTML = dragon.hp;
    addMessage("You hit the dragon for " + damage + " hp!");
    }
});
Теги:
animation

1 ответ

1
Лучший ответ

Запустите функцию timeBar после завершения clearTimeBar.

window.setTimeout(function() { timeBar('overlay', 'blue') }, 1000/60);

или

window.requestAnimationFrame(function() { timeBar('overlay', 'blue') });
  • 0
    Спасибо, сэр. Функция таймаута сработала отлично :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню