var particles = []; var canvas; var ctx; var collision =[] ; var colors = ["red","orange","yellow","green","blue","violet","white"];//rainbow attack var frameCount = 0; var color = "white"; var stop = false; var yGround = 0; var yCeil = 0; var walls = []; var plates = []; var shadows = []; var sound; var Particle = function(){} Particle.prototype = { xSpeed : 0, ySpeed : 0, xPos : 0, yPos : 0, width : 16, height : 16, color : "white", draw : function(){ /* ctx.shadowBlur=20; ctx.shadowColor=this.color; ctx.beginPath(); ctx.arc(this.xPos, this.yPos, this.width/2, 0, Math.PI*2); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); */ drawtext(this.xPos,this.yPos+this.height/2,"⚽",20,"serif","white"); shadows.push([this.xPos,this.yPos,this.color]); }, getInfo : function(){ console.log("x:"+this.xPos+", y:"+this.yPos+", xspeed:"+this.xSpeed+", yspeed"+this.ySpeed+" SPEED: "+(Math.sqrt(this.xSpeed*this.xSpeed+this.ySpeed*this.ySpeed))); } } function start(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //ground init yGround = canvas.height -50; plates.push(yGround); //Ceiling init yCeil = 0; plates.push(yCeil); //walls init walls.push(0); walls.push(canvas.width); //sound sound = document.getElementById("sound"); //particles init ///let the fun begin, random particles for(let a = 0;a<30;a++){ particles.push(new Particle()); particles[particles.length-1].xPos = Math.random()*(canvas.width - particles[particles.length-1].width)+ particles[particles.length-1].width/2; particles[particles.length-1].yPos = Math.random()*(yGround - yCeil - particles[particles.length-1].height)+ particles[particles.length-1].height/2; particles[particles.length-1].ySpeed = Math.random()*5-2.5; particles[particles.length-1].xSpeed = Math.random()*5-2.5; particles[particles.length-1].color =colors[Math.floor(Math.random()*7)]; } loop(); } function loop(){ clearCanvas(); //draw ground; ctx.beginPath(); ctx.moveTo(0,yGround); ctx.lineTo(canvas.width,yGround) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); //draw ceil; ctx.beginPath(); ctx.moveTo(0,yCeil ); ctx.lineTo(canvas.width,yCeil) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); //draw wall ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,yGround) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); //draw wall ctx.beginPath(); ctx.moveTo(canvas.width,0); ctx.lineTo(canvas.width,yGround) ctx.strokeStyle = "white"; ctx.stroke(); ctx.closePath(); frameCount ++; //draw particles if(shadows.length>200){ for(let a=0; a<(shadows.length-200);a++){ shadows.shift(); } } for(shadow in shadows){ drawShadow(shadows[shadow], shadow); } for(p in particles){ render(particles[p]); } //animation loop if(frameCount <0){ }else{ window.requestAnimationFrame(loop); } } function render(p){ p.xPos += p.xSpeed ; p.yPos += p.ySpeed; p.draw(); //check collision between particles for(part in particles){ // dist between part if(p===particles[part]){ }else{ var distX = p.xPos - particles[part].xPos; var distY = p.yPos - particles[part].yPos; var dist = Math.sqrt(distX*distX + distY*distY); ///////////// if(dist < p.width/2 + particles[part].width/2 ) { var direction_hitten = p.yPos>particles[part].yPos?-Math.acos(-distX/dist):Math.acos(-distX/dist); var direction_hitter = Math.acos(p.xSpeed/Math.sqrt(p.xSpeed*p.xSpeed+p.ySpeed*p.ySpeed)); var direction_hitter2 = Math.acos(particles[part].xSpeed/Math.sqrt(particles[part].xSpeed*particles[part].xSpeed+particles[part].ySpeed*particles[part].ySpeed)); if(p.ySpeed<0){ direction_hitter *=-1; } if(particles[part].ySpeed<0){ direction_hitter2 *=-1; } partsCollision(p,particles[part],direction_hitten,direction_hitter, direction_hitter2 ); } } // sound.play(); } //collision with walls for(w in walls){ if(p.xSpeed > 0 && walls[w] - p.xPos < p.width/2 && p.xPos < walls[w] ) { p.xSpeed *= -1;//reverse } if(p.xSpeed < 0 && p.xPos -walls[w] < p.width/2 && p.xPos > walls[w]) { p.xSpeed *= -1;//reverse } } //check collision with ceiling or ground for(plate in plates){ if(p.ySpeed > 0 && plates[plate] - p.yPos < p.height/2 && p.yPos < plates[plate] ) { p.ySpeed *= -1;//reverse } if(p.ySpeed < 0 && p.yPos -plates[plate] < p.height/2 && p.yPos > plates[plate]) { p.ySpeed *= -1;//reverse } } } function partsCollision(p1,p2,direction_hitten ,direction_hitter,direction_hitter2 ){ var speed1 = Math.sqrt(p1.xSpeed*p1.xSpeed + p1.ySpeed*p1.ySpeed); var speed2 = Math.sqrt(p2.xSpeed*p2.xSpeed + p2.ySpeed*p2.ySpeed); var invertY=1; var invertY2 = 1; /* if((p1.ySpeed > 0 && p2.ySpeed > 0 && p1.yPos < p2.yPos)||(p1.ySpeed < 0 && p2.ySpeed < 0 && p1.yPos > p2.yPos) ){ if(p1.ySpeed >p2.ySpeed){ invertY = -1; } }*/ ////// var sub; if(direction_hitter - direction_hitten > Math.PI/2){ sub = Math.PI-(direction_hitter -direction_hitten); }else if(direction_hitter-direction_hitten<-Math.PI/2){ sub = Math.PI+(direction_hitter -direction_hitten); }else{ sub =parseFloat(direction_hitter)-parseFloat(direction_hitten); } if(sub < Math.PI/2){ sub += Math.PI; } if(sub > Math.PI/2){ sub -= Math.PI; } var ratio = 1- (Math.abs(sub))/(Math.PI/2); var r1=1-ratio; var r2=ratio; //console.log(ratio+","+direction_hitter+","+direction_hitten); p2.xSpeed= Math.cos(direction_hitten) *speed1 *r2; p2.ySpeed= Math.sin(direction_hitten)*speed1*r2*invertY2; var ninety; ninety = Math.PI/2; if(direction_hitter >=0 && direction_hitten >=0 && direction_hitter >direction_hitten ) { ninety = Math.PI/2; }else if(direction_hitter <=0 && direction_hitten <=0 && direction_hitter > direction_hitten ){ ninety = Math.PI/2; }else if(direction_hitten >0 && direction_hitter <0 && direction_hitter <-Math.PI/2 ){ ninety = Math.PI/2; }else if(direction_hitten <0 && direction_hitter >0 && direction_hitten >-Math.PI/2 ){ ninety = Math.PI/2; }else{ ninety = -Math.PI/2; } p1.xSpeed=Math.cos(parseFloat(direction_hitten) + ninety)*speed1 *(r1); p1.ySpeed=Math.sin(parseFloat(direction_hitten) + ninety)*speed1 *(r1); // adding speed2 // console.log(direction_hitten ); if(direction_hitten <0){ direction_hitten = (parseFloat(direction_hitten)+Math.PI); }else{ direction_hitten = (parseFloat(direction_hitten)-Math.PI); } temp = direction_hitter ; //direction_hitten = (direction_hitten - Math.PI)%Math.PI ; direction_hitter = direction_hitter2 ; var sub=0.00000000; if(direction_hitter - direction_hitten > Math.PI/2){ sub = Math.PI-(direction_hitter -direction_hitten); }else if(direction_hitter-direction_hitten<-Math.PI/2){ sub = Math.PI+(direction_hitter -direction_hitten); }else{ sub =parseFloat(direction_hitter)-parseFloat(direction_hitten); } if(sub < Math.PI/2){ sub += Math.PI; } if(sub > Math.PI/2){ sub -= Math.PI; } var ratio = 1- ((Math.abs(parseFloat(sub)))/(Math.PI/2)); var r1=1-ratio; if(ratio <0){ // console.log(sub+"ratio sub"); } //console.log(ratio+","+direction_hitter+","+direction_hitten); var r2=ratio; var invX = 1; var invY = 1; sub = Math.abs(direction_hitter - temp); /* if(sub< (Math.PI) || (sub > (3*Math.PI/2))){ if(Math.abs(p2.xSpeed)>Math.abs(p2.ySpeed)){ invX =-1; } if(Math.abs(p2.ySpeed)>Math.abs(p2.xSpeed)){ invY =-1; } } */ p1.xSpeed+= Math.cos(parseFloat(direction_hitten)) *speed2 *r2*invX; p1.ySpeed+= Math.sin(parseFloat(direction_hitten))*speed2*r2*invY; var ninety; ninety = Math.PI/2; if(direction_hitter >=0 && direction_hitten >=0 && direction_hitter >direction_hitten ) { ninety = Math.PI/2; }else if(direction_hitter <=0 && direction_hitten <=0 && direction_hitter > direction_hitten ){ ninety = Math.PI/2; }else if(direction_hitten >0 && direction_hitter <0 && direction_hitter <-Math.PI/2 ){ ninety = Math.PI/2; }else if(direction_hitten <0 && direction_hitter >0 && direction_hitten >-Math.PI/2 ){ ninety = Math.PI/2; }else{ ninety = -Math.PI/2; } // console.log(sub); p2.xSpeed += Math.cos(parseFloat(direction_hitten) + ninety)*speed2 *(r1); p2.ySpeed+=Math.sin(parseFloat(direction_hitten) + ninety)*speed2 *(r1); //normalize var speedone = Math.sqrt(p1.xSpeed*p1.xSpeed + p1.ySpeed*p1.ySpeed); var speedtwo = Math.sqrt(p2.xSpeed*p2.xSpeed + p2.ySpeed*p2.ySpeed); var n=((speed1+speed2)/(speedone + speedtwo)) ; p1.xSpeed *= n; p1.ySpeed *= n; p2.xSpeed *= n; p2.ySpeed *= n; //console.log(n); // p1.getInfo(); // p2.getInfo(); //to avoid double collisions balls getting stuck for(let a=0;a<1;a++){ p2.xPos += p2.xSpeed; p2.yPos += p2.ySpeed; p1.xPos += p1.xSpeed; p1.yPos += p1.ySpeed; } // console.log("collision"); } function clearCanvas(){ ctx.clearRect(0,0,canvas.width,canvas.height); } function drawtext(x, y,text, size,font,color){ ctx.font = size+"px"+" "+font; ctx.fillStyle=color; ctx.textAlign="center"; ctx.fillText(text, x, y); } function drawShadow([x,y,color], index){ ctx.shadowBlur=0; ctx.shadowColor=color; ctx.beginPath(); ctx.arc(x, y, index*0.03, 0, Math.PI*2); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); }

Soccer Balls