如何在每个动画完成后按顺序运行JavaScript游戏动画

目前，我使用的是一种古老的方法，即在动画开始时设置变量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();

var animationDone=true；
函数g_e（e）{
返回文档.getElementById（e）；
};
班长{
构造函数（）{
this.animations=[]；
this.tasks=[]；
}
开始制作动画（）{
var x=设置间隔（函数（）{
如果（animationDone==true）{
试一试{
警报（this.animations[0]）；
this.aminations[0].func（this.animations[0].args）；
this.animations.shift（）；
}
捕获（e）{
}
}
},1);
}
添加动画（f，a）{
this.animations.push（{func:f，args:a}）；
警报（“添加动画”）；
}
开始工作{
var x=设置间隔（函数（）{
试一试{
this.tasks[0].func（this.tasks[0].args）；
this.tasks.shift（）；
}
捕获（e）{
}
},1);
}
动画_blink（）{
var=0；
window.setInterval（函数闪烁（）{
如果（闪烁==0）{
document.getElementById（“blinker”）.innerHTML=“>”；
眨眼=1；
}
否则如果（闪烁==1）{
document.getElementById（“blinker”）.innerHTML=“”；
闪烁=0；
}
}, 1000);
}
动画淡入淡出（对象）{
var-fade=0；
var衰减=0；
animationDone=false；
var interval=setInterval（函数startFade（）{
g_e（object.element）.style.opacity=淡入淡出；
如果（淡入>1&&fadeOut==0）{
衰减=1；
}
否则，如果（衰减<0）{
间隔时间；
}
else if（淡出==0）{
衰减=衰减+0.2；
}
else if（淡出==1）{
衰减=衰减-0.2；
}
}, 500);
animationDone=true；
}
plbl（对象）{
animationDone=false；
var p=plbl.间隔；
如果（！p）
plbl.interval=p={}；
if（p[object.destination]）
清除（）；
函数clear（）{
clearInterval（p[object.destination]）；
删除p[object.destination]；
}
var i=0；
var elem=document.getElementById（object.destination）；
p[object.destination]=setInterval（函数（）{
checkChar=object.message.charAt（i）；
如果（checkChar==“|”）{
elem.innerHTML+=“
”；
}
否则{
elem.innerHTML+=object.message.charAt（i）；
}
i++；
if（i>message.length）{
animationDone=true；
清除（）；
}
}，物体速度）；
}
命令（输入）{
警报（输入）；
如果（输入=“y”）{
g_e（“开始”）.style.display=“无”；
g_e（“启动”）.style.display=“块”；
添加动画（“测试”、“测试”）；
}
}
获取_输入（）{
var x=g_e（“输入”）。值；
g_e（“输入”）。值=”；
返回x；
}
钥匙检查器（事件）{
var key=event.keyCode；
如果（键==13）{
this.command（this.get_input（））；
返回false；
}
}
开始（）{
这个。开始工作（）；
这个。开始制作动画（）；
这个。动画_blink（）；
}
}
警报（“已编译”）；
main=新的main（）；
main.start（）；

我不确定我会用古语来描述信号量。：）我不确定我会用古语这个词来描述信号量。：）