explosion.js


/*
 * Advanced Explosion effect
 * Each particle has a different size, move speed and scale speed.
 *
 * Parameters:
 *  x, y - explosion center
 *  color - particles' color
 */
 /*
  * A single explosion particle
  */
var particles = [];

function Particle () {
  this.scale = 1.0;
  this.x = 0;
  this.y = 0;
  this.radius = 20;
  this.color = "#000";
  this.velocityX = 0;
  this.velocityY = 0;
  this.scaleSpeed = 0.5;

  this.update = function(ms)
  {
    // shrinking
    this.scale -= this.scaleSpeed * ms / 1000.0;

    if (this.scale <= 0)
    {
      this.scale = 0;
    }
    // moving away from explosion center
    this.x += this.velocityX * ms/1000.0;
    this.y += this.velocityY * ms/1000.0;
  };

  this.draw = function(context2D)
  {
    // translating the 2D context to the particle coordinates
    context2D.save();
    context2D.translate(this.x, this.y);
    context2D.scale(this.scale, this.scale);

    // drawing a filled circle in the particle's local space
    context2D.beginPath();
    context2D.arc(0, 0, this.radius, 0, Math.PI*2, true);
    context2D.closePath();

    context2D.fillStyle = this.color;
    context2D.fill();

    context2D.restore();
  };
}



function createExplosion(x, y, color) {
  var minSize = 10;
  var maxSize = 30;
  var count = 10;
  var minSpeed = 60.0;
  var maxSpeed = 200.0;
  var minScaleSpeed = 1.0;
  var maxScaleSpeed = 4.0;

  for (var angle=0; angle<360; angle += Math.round(360/count))
  {
    var particle = new Particle();

    particle.x = x;
    particle.y = y;

    particle.radius = randomFloat(minSize, maxSize);

    particle.color = color;

    particle.scaleSpeed = randomFloat(minScaleSpeed, maxScaleSpeed);

    var speed = randomFloat(minSpeed, maxSpeed);

    particle.velocityX = speed * Math.cos(angle * Math.PI / 180.0);
    particle.velocityY = speed * Math.sin(angle * Math.PI / 180.0);

    particles.push(particle);
  }
}
function update (frameDelay)
{
  // draw a white background to clear canvas
  context2D.fillStyle = "#FFF";
  //context2D.fillRect(0, 0, context2D.canvas.width, context2D.canvas.height);

  // update and draw particles
  for (var i=0; i<particles.length; i++)
  {
    var particle = particles[i];

    particle.update(frameDelay);
    particle.draw(context2D);
  }

}

function randomFloat (min, max) {
  return min + Math.random()*(max-min);
}



--------------------------------------------------------------------------------




physics.js



console.log("Physics loaded...");


// given: xInitial, timeElapsed (Δt), velocity (v), angle (θ)
// we want: xCurrent

// xCurrent == xInitial + Δt * vHorizontal
// vHorizontal == v * Math.cos(angleInRadians)
// angleInRadians == (Math.PI/180) * θ

function radians(angle) {
  return (Math.PI/180) * angle;
}

function vHorizontal(v, angle) {
  return v * Math.cos(radians(angle));
}

function xCurrent(xInitial, timeElapsed, v, angle) {
  return xInitial + (timeElapsed * vHorizontal(v, angle));
}


// yCurrent == yInitial + yDistance + gravityDistance
// gravityDistance == 0.5 * g * (Δt * Δt)
// g == 0.0004 px/(ms^2) // FROM PhysicsJS
// yDistance == -vVertical * Δt
// vVertical == v * Math.sin(angleInRadians)

Gravity = 0.0004;

function vVertical(v, angle) {
  return v * Math.sin(radians(angle));
}

function yDistance(timeElapsed, v, angle) {
  return -(timeElapsed * vVertical(v, angle));
}

function gravityDistance(timeElapsed, g) {
  return 0.5 * g * (timeElapsed * timeElapsed);
}

function yCurrent(yInitial, timeElapsed, v, angle) {
  return yInitial + yDistance(timeElapsed, v, angle) + gravityDistance(timeElapsed, Gravity);
}