test

by Iván Pereira

HTML

<canvas id="canvas" width="360" height="540"></canvas>

CSS

#canvas{background:#000;}

JavaScript

var canvas = $("#canvas")[0],
		context = canvas.getContext("2d"),
		bloons = {},
		bloonIndex = 0;

var c_wdh = 360,
		c_hgt = 540;

function createBloon(index, x, y) {

	this.index = index;
  this.x = x;
  this.y = y;
  this.vy = 3;
  
  this.drawImage = function() {
  	context.fillStyle = "#FF0000";
  	context.fillRect(this.x, this.y, 50, 50);
	};
  
}
    
var i = 1;

var rendorBloon = setInterval(function(){ 

  bloons[i] = new createBloon(i, Math.random() * (c_wdh - 50), c_hgt);

  i++;
  
  if(i >= 10){
  
    clearInterval(rendorBloon);
    
    rendorBloon = null;
    
  }
  
}, 1000);

var animate = setInterval(function () {
  
  context.clearRect(0, 0, c_wdh, c_hgt);

  for (var i in bloons){
  
  	bloons[i].y -= bloons[i].vy;
    bloons[i].drawImage();
    
    if(bloons[i].y <= -120){
    	delete bloons[i];
    }

  }
  
  if(rendorBloon === null && Object.keys(bloons).length === 0){
  
  	clearInterval(animate);
  
  }

}, 30);