Problem with very simple game loop

[Dream Of Sleeping]

I'm just finishing off my game, and I've went back to the game loop to try and make it run at 60fps. I'm not using requestAnimationFrame in this example, but I'll look into that later. Basically it's printing out that I'm getting anything between 119 and 125 frames per second. I know I must be doing something really stupid, but I just can't see it.

 

     gameLoop: function() {     		if (!this.running) {			return;		}			 		if (!this.lastTime) {			this.lastTime = new Date().getTime();		}						this.currentTime = new Date().getTime();		this.elapsedTime = this.currentTime - this.lastTime;		this.lastTime = this.currentTime;				if (this.input) {			this.input.poll();		}						for (var i = 0; i < this.scenes.length; i++) {			this.scenes[i].updateScene(this.elapsedTime);		}					this.render(this.elapsedTime);	   	  this.frameCounter++;	  this.frameTimer += this.elapsedTime;	  	  if (this.frameTimer >= 1000) {          console.log("frame counter " + this.frameCounter);	  	  this.frameCounter = 0;	  	  this.frameTimer = 0;	  	  	   }	   	   this.timeToCall = Math.max(0, (16 - this.elapsedTime));		  	   window.setTimeout(this.f, this.timeToCall); },

 

[Dream Of Sleeping]

I've been thinking. Should I change it to this?

 

 

  this.timeToCall = 16 - Math.max(0, (16 - this.elapsedTime)); 

That makes it closer to 60 frames per second. Not sure if I'm just getting confused though.

 

Edit: No definitely not, the only reason this works is because it's minus number most of the time so it takes 0 away from 16.

[Dream Of Sleeping]

 gameLoop: function() {     		if (!this.running) {			return;		}			 		if (!this.lastTime) {			this.lastTime = new Date().getTime();		}						this.currentTime = new Date().getTime();		this.elapsedTime = this.currentTime - this.lastTime;		this.lastTime = this.currentTime;				if (this.input) {			this.input.poll();		}						for (var i = 0; i < this.scenes.length; i++) {			this.scenes[i].updateScene(this.elapsedTime);		}					    this.render(this.elapsedTime);	  	  this.frameCounter++;	  this.frameTimer += this.elapsedTime;	  	  if (this.frameTimer >= 1000) {	  	  this.frameCounter = 0;	  	  this.frameTimer = 0;	  	  	   }		  	   this.timePassedThisUpdate = new Date().getTime() - this.currentTime; 	   this.timeToCall =  Math.max(0, (16 - this.timePassedThisUpdate)); 	   window.setTimeout(this.f, this.timeToCall); },

 

 

I think I've figured the problem out. This seems to work better.

[Quetzacotl]

try this, not sure about other parts, but this is for sure one of your bugs

 

if (this.frameTimer >= 1000) {          this.frameCounter = 0;          this.frameTimer -= 1000;              } 

[Dream Of Sleeping]

Thanks. That will definitely make it more accurate.

[Paul-Andre]

This isn't really a bug, but instead of doing:

 

 

new Date().getTime()

 

I would do:

 

 

Date.now()

 

It gives the same results, only it is a bit more fast since it doesn't instantiate a date object. It should work on all modern browsers.