title: how to run JavaScript game animations sequentially after each one is finished
body: <p>Currently, I am using an archaic method of setting a variable true at the start of the animation and false after the animation has played (see below.) I also think something might be wrong with how I process animations in the interval because when I add an animation to the array of animations to be processed, it isn't processed. Here's my code:</p>
  
  <pre><code>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 = "&gt;";
              blink= 1;
          }
          else if(blink == 1){
              document.getElementById("blinker").innerHTML="&amp;nbsp;";
              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&gt;1 &amp;&amp; fadeOut == 0){
              fadeOut = 1;
          }
          else if(fade &lt; 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 += "&lt;br&gt;";
          }
          else{
              elem.innerHTML += object.message.charAt(i);
          }
          i++;
          if (i &gt; 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();
  </code></pre>