如何在每个完成后依次运行JavaScript游戏动画

Question

目前，我正在使用一种古老的方法，在动画开始时将变量设置为true，并在动画播放后使用false（见下文）。我还认为我在间隔中处理动画的方式可能有问题，因为当我将动画添加到要处理的动画数组时，它不会被处理。这是我的代码：

var animationDone = true;
function g_e(e){
    return document.getElementById(e);
};
class Main{
    constructor(){
        this.animations = [];
    this.tasks = [];
}
start_animating(){
    var x = setInterval(function (){
        if (animationDone == true){
            try{
                alert(this.animations[0]);
                    this.aminations[0].func(this.animations[0].args);
                this.animations.shift();
            }
            catch(e){
            }
        }
    },1);
}
add_animation(f, a){
    this.animations.push({func:f, args:a});
    alert("animation added");
}
start_working(){
    var x = setInterval(function (){
        try{
            this.tasks[0].func(this.tasks[0].args);
            this.tasks.shift();
        }
        catch(e){
        }
    },1);
}
animation_blink(){
    var blink = 0;
    window.setInterval(function blinking(){
        if (blink == 0){
            document.getElementById("blinker").innerHTML = ">";
            blink= 1;
        }
        else if(blink == 1){
            document.getElementById("blinker").innerHTML=" ";
            blink = 0;
        }
    }, 1000);
}
animation_fade(object){
    var fade = 0;
    var fadeOut = 0;
    animationDone = false;
    var interval = setInterval(function startFade(){
        g_e(object.element).style.opacity = fade;
        if(fade>1 && fadeOut == 0){
            fadeOut = 1;
        }
        else if(fade < 0){
            clearInterval(interval);
        }
        else if(fadeOut == 0){
            fade = fade + 0.2;
        }
        else if(fadeOut == 1){
            fade = fade - 0.2;
        }
    }, 500);
    animationDone = true;
}
plbl(object){
    animationDone = false;
    var p = plbl.intervals;
    if (!p)
        plbl.intervals = p = {};
    if (p[object.destination])
        clear();
    function clear() {
        clearInterval(p[object.destination]);
        delete p[object.destination];
    }
    var i = 0;
    var elem = document.getElementById(object.destination);
    p[object.destination] = setInterval(function(){
        checkChar = object.message.charAt(i);
        if(checkChar =="|"){
            elem.innerHTML += "<br>";
        }
        else{
            elem.innerHTML += object.message.charAt(i);
        }
        i++;
        if (i > message.length){
            animationDone = true;
            clear();
        }
    }, object.speed);
}
command(input){
    alert(input);
    if(input == "y"){
        g_e("start").style.display = "none";
        g_e("startUp").style.display = "block";
        this.add_animation("test", "test");
    }
}
get_input(){
    var x = g_e("input").value;
    g_e("input").value = "";
    return x;
}
key_checker(event){
    var key = event.keyCode;
    if (key == 13){
        this.command(this.get_input());
        return false;
    }
}
start(){
    this.start_working();
    this.start_animating();
    this.animation_blink();
}
}
alert("compiled");
main = new Main();
main.start();