Display out update loop, MAX speed, pipe delete optimisation

Thank you @maierfelix for pipe delete optimisation

game.js

@@ -1,3 +1,27 @@
+(function() {
+	var timeouts = [];
+	var messageName = "zero-timeout-message";
+
+	function setZeroTimeout(fn) {
+		timeouts.push(fn);
+		window.postMessage(messageName, "*");
+	}
+
+	function handleMessage(event) {
+		if (event.source == window && event.data == messageName) {
+			event.stopPropagation();
+			if (timeouts.length > 0) {
+				var fn = timeouts.shift();
+				fn();
+			}
+		}
+	}
+
+	window.addEventListener("message", handleMessage, true);
+
+	window.setZeroTimeout = setZeroTimeout;
+})();
+
 var Neuvol;
 var game;
 var FPS = 60;
@@ -112,7 +136,7 @@ var Game = function(){
 	this.generation = 0;
 	this.backgroundSpeed = 0.5;
 	this.backgroundx = 0;
-    this.maxScore = 0;
+	this.maxScore = 0;
 }
 
 Game.prototype.start = function(){
@@ -168,21 +192,14 @@ Game.prototype.update = function(){
 		}
 	}
 
-	var deletedPipes = [];
-	for(var i in this.pipes){
+	for(var i = 0; i < this.pipes.length; i++){
 		this.pipes[i].update();
 		if(this.pipes[i].isOut()){
-			deletedPipes.push(i);
+			this.pipes.splice(i, 1);
+			i--;
 		}
 	}
 
-	var deltaIndex = 0;
-	for(var i in deletedPipes){
-		this.pipes.splice(deletedPipes[i] - deltaIndex, 1);
-		deltaIndex++;
-	}
-
-
 	if(this.interval == 0){
 		var deltaBord = 50;
 		var pipeHoll = 120;
@@ -197,15 +214,21 @@ Game.prototype.update = function(){
 	}
 
 	this.score++;
-    this.maxScore = (this.score > this.maxScore) ? this.score : this.maxScore;
+	this.maxScore = (this.score > this.maxScore) ? this.score : this.maxScore;
 	var self = this;
-	setTimeout(function(){
-		self.update();
-	}, 1000/FPS);
 
-	this.display();
+	if(FPS == 0){
+		setZeroTimeout(function(){
+			self.update();
+		});
+	}else{
+		setTimeout(function(){
+			self.update();
+		}, 1000/FPS);
+	}
 }
 
+
 Game.prototype.isItEnd = function(){
 	for(var i in this.birds){
 		if(this.birds[i].alive){
@@ -234,11 +257,11 @@ Game.prototype.display = function(){
 	for(var i in this.birds){
 		if(this.birds[i].alive){
 			this.ctx.save(); 
- 			this.ctx.translate(this.birds[i].x, this.birds[i].y);
- 			this.ctx.translate(this.birds[i].width/2, this.birds[i].height/2);
- 			this.ctx.rotate(Math.PI/2 * this.birds[i].gravity/20);
- 			this.ctx.drawImage(images.bird, -this.birds[i].width, -this.birds[i].height/2, this.birds[i].width, this.birds[i].height);
- 			this.ctx.restore();
+			this.ctx.translate(this.birds[i].x, this.birds[i].y);
+			this.ctx.translate(this.birds[i].width/2, this.birds[i].height/2);
+			this.ctx.rotate(Math.PI/2 * this.birds[i].gravity/20);
+			this.ctx.drawImage(images.bird, -this.birds[i].width, -this.birds[i].height/2, this.birds[i].width, this.birds[i].height);
+			this.ctx.restore();
 		}
 	}
 
@@ -248,6 +271,11 @@ Game.prototype.display = function(){
 	this.ctx.fillText("Max Score : "+this.maxScore, 10, 50);
 	this.ctx.fillText("Generation : "+this.generation, 10, 75);
 	this.ctx.fillText("Alive : "+this.alives+" / "+Neuvol.options.population, 10, 100);
+
+	var self = this;
+	requestAnimationFrame(function(){
+		self.display();
+	});
 }
 
 window.onload = function(){
@@ -265,9 +293,8 @@ window.onload = function(){
 		});
 		game = new Game();
 		game.start();
-		setTimeout(function(){
-			game.update();
-		}, 1000/FPS);
+		game.update();
+		game.display();
 	}
 
 

index.html

@@ -10,6 +10,7 @@
 	<button onclick="speed(120)">x2</button> 
 	<button onclick="speed(180)">x3</button> 
 	<button onclick="speed(300)">x5</button> 
+	<button onclick="speed(0)">MAX</button> 
 	<br/>
 	<a href="http://github.com/xviniette/FlappyLearning">GitHub Repository</a>
 	<script src = "Neuroevolution.js"></script>