0

我正在为我的项目制作视频游戏，但遇到了动画问题。基本上我正在做一个最终幻想风格的游戏，你可以在其中给你的 ATB 条充电，一旦它充满了，你就可以做一个技能。所以我在这里有3个功能。第一个是清除我的 ATB 条以便它重置。此代码有效。第二个是通过将 DIV 块移动到位来重新填充时间条。这也有效。第三个功能是我的攻击技能功能，除了没有按照我放置的顺序执行这两个动画功能之外，它也可以使用。

如果你看下面，你会注意到我有代码首先运行清除 ATB 函数，然后运行时间栏函数，希望每次我点击按钮时它都会重置我的 ATB。问题是，它完全忽略了第一个函数并运行第二个函数。我尝试切换它们并发生同样的事情。所以基本上，如果我的两个动画函数都在代码中，我的代码总是会忽略第一个并操作第二个。所以现在我对如何解决这个问题感到困惑，因为我希望这两个代码都可以工作。它们现在是分开独立工作的，但是当我将它们结合起来时，只有第二个注册。 

   // 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!");
    }
});
4

1 回答 1

1

在 clearTimeBar 完成后运行您的 timeBar 函数。

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

或者

window.requestAnimationFrame(function() { timeBar('overlay', 'blue') });
于 2013-10-22T02:42:28.890 回答