title: HTML5 Canvas game loop delta time calculations
body: <p>I'm new to game development. Currently I'm doing a game for <a href="http://js13kgames.com/" rel="noreferrer">js13kgames</a> contest, so the game should be small and that's why I don't use any of modern popular frameworks. </p>
  
  <p>While developing my <strong>infinite game loop</strong> I found several articles and pieces of advice to implement it. Right now it looks like this:</p>
  
  <pre><code>self.gameLoop = function () {
          self.dt = 0;
  
          var now;
          var lastTime = timestamp();
          var fpsmeter = new FPSMeter({decimals: 0, graph: true, theme: 'dark', left: '5px'});
  
          function frame () {
              fpsmeter.tickStart();
              now = window.performance.now();
  
              // first variant - delta is increasing..
              self.dt = self.dt + Math.min(1, (now-lastTime)/1000);
  
              // second variant - delta is stable.. 
              self.dt = (now - lastTime)/16;
              self.dt = (self.dt &gt; 10) ? 10 : self.dt;
  
              self.clearRect();
  
              self.createWeapons();
              self.createTargets();
  
              self.update('weapons');
              self.render('weapons');
  
              self.update('targets');
              self.render('targets');
  
              self.ticks++;
  
              lastTime = now;
              fpsmeter.tick();
              requestAnimationFrame(frame);
          }
  
          requestAnimationFrame(frame);
  };
  </code></pre>
  
  <p>So the problem is in <code>self.dt</code> I've eventually found out that first variant is not suitable for my game because it increases forever and the speed of weapons is increasing with it as well  (e.g. <code>this.position.x += (Math.cos(this.angle) * this.speed) * self.dt;</code>..</p>
  
  <p>Second variant looks more suitable, but does it correspond to this kind of loop (<a href="http://codeincomplete.com/posts/2013/12/4/javascript_game_foundations_the_game_loop/" rel="noreferrer">http://codeincomplete.com/posts/2013/12/4/javascript_game_foundations_the_game_loop/</a>)?</p>