window.onload = function(){
var canvas=document.createElement("canvas"),
c = canvas.getcontext("2d");
particles = {}
partcleIndex = 0,
partcleNum = 10;
canvas.width = 400;
canvas.height = 400;
document.body.appendchild(canvas);
c.fillstyle = "rgba(0,0,0,0.2)";
c.fillrect(0,0,canvas.width,canvas.height);
var posX = 20,
posY.canvas.height /2,
vx = 5,
vy = -10,
gravity = 1;
setInterval(funcion(){
posX += vx;
posY += vy;
if (posY > 300 ) {
vy *= -0.5;
vx *= 0.5;
posY = 300;
}
vy += gravity;
c.fillStyle = "rgba(255,255,255,0.5";
c.fillrect(postX,postY,10,10);
function particle (){
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.vx = math.random() * 10 - 5;
this.vy = math.random() * 10 - 5;
this.yx += this.gravity;
this.gravity = 0.3;
particleIndex++;
particles[particleIndex]= this;
this.id=particleindex;
this.life= 0;
this.maxLife= matn.random()* 30 + 50 ;
this.color="hsl("+parseInt(math.random()*360,10)+",100%,50%,0.2)";
}
particle.prototype.draw = function(){
this.x += vx;
this.y += vy;
if (math.random() < 0.1) {
this.vx = math.random() * 10 - 5;
this.vy = math.random() * 10 - 5;
}
\\this.vy += this.gravity;
this.life++;
if(this.life >= this.maxLife){
delete particles[this.id];
}
c.fillStyle = this.color
c.fillRect = (this.x, this.y, 10,10,);
};
}
c.globalCompositeOperation = "lighter";
setInterval(function(){
p.draw();
c.fillstyle = "black";
c.fillrect(0,0,canvas.width,canvas.height);
for (var i = 0; i < 10; i++){
new particle();
}
for (var i in particles ){
particles[i].draw();
}
}, 30);
};
c.globalcompositeOperation = "source-over";
c.fillsyle=rgba(0,0,0,0.5);
c.fillRect(0,0,size,size);