window.onload = function () { function id(arg) { return document.getElementById(arg); } var canvas = id("canvas"); var span = id("span"); var c = canvas.getContext("2d"); var linesH = []; canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.imageSmoothingEnabled=false; var player={ x : canvas.width/2-20, y : canvas.height/2-20, size : 40, xVel : 0, yVel : 0, color : "black" }; var centerX = player.x+player.size/2; var centerY = player.y+player.size/2; var projectiles=[]; window.addEventListener("click",function(){ span.style.display="none"; var x = event.clientX; var y = event.clientY; deltaX = x - centerX; deltaY = y - centerY; rotation = Math.atan2(deltaY, deltaX); xtarget = Math.cos(rotation); ytarget = Math.sin(rotation); projectiles.push({ x: centerX, y: centerY, speed: 10, xVel: xtarget, yVel: ytarget, size:20, color:randomColor() }); }); var removeList=[]; var particles = []; requestAnimationFrame(loop); function loop() { c.clearRect(0, 0, canvas.width, canvas.height); renderProjectiles(); renderParticles(); renderPlayer(); requestAnimationFrame(loop); } function renderPlayer(){ player.x+=player.xVel; player.y+=player.yVel; c.fillStyle="black"; c.fillRect(player.x,player.y,player.size,player.size); } function renderProjectiles(){ for (i=0;icanvas.width ||projectiles[i].x<0 ||projectiles[i].y+projectiles[i].size>canvas.height ||projectiles[i].y<0){ explosion(projectiles[i]); removeList.push(i); } } for (i = 0; i < removeList.length; i++) { projectiles.splice(removeList[i], 1); } removeList=[]; } function explosion(bullet) { var color = bullet.color; var x = bullet.x; var y = bullet.y; var speedX = -bullet.xVel*bullet.speed; var speedY = -bullet.yVel*bullet.speed; var randNum = Math.floor(Math.random() * 15) + 1; for (iter = 0; iter < randNum; iter++) { particles.push({ xVel: Math.random() * ((bullet.x<0||bullet.x+bullet.size>canvas.width)?(speedX*0.8):(-speedX *0.8)), yVel: Math.random() * ((bullet.x<0||bullet.x+bullet.size>canvas.width)?(-speedY *0.8):(speedY *0.8)), x: x, y: y, size: Math.random() * bullet.size, color: color }); } } function renderParticles() { for (i = 0; i < particles.length; i++) { c.fillStyle = particles[i].color; c.fillRect(particles[i].x, particles[i].y, particles[i].size, particles[i].size); particles[i].x += particles[i].xVel; particles[i].y += particles[i].yVel; particles[i].xVel /= 1.02; particles[i].yVel /= 1.02; particles[i].size /= 1.05; if (particles[i].size < 0.1) { particles.splice(i, 1); } } } function randomColor() { var color = "#"; var one; for (col = 0; col < 6; col++) { one = Math.floor(Math.random() * 16); if (one > 9) { switch (one) { case 10: one = "a" break; case 11: one = "b" break; case 12: one = "c" break; case 13: one = "d" break; case 14: one = "e" break; case 15: one = "f" break; } } color += one; } return color; } };

particles engine