Bouncing Lyra

For /r/mylittlepony

HTML

<div id="gameContainer"></div>

CSS

body {background-color:#222; color:#eee; margin:0; padding:0;}
canvas {background-color: #444; border: 1px solid #555; display:block; margin:16px auto 0;}

JavaScript

// step 1: lyra
var lyra = new Image();
lyra.src = "https://dl.dropboxusercontent.com/u/416738/img/lyra.png";

// step 2: details
// Configuration
var conf = {};
conf.cnvW = 640;
conf.cnvH = 3 / 4 * conf.cnvW;
conf.dt = 0.03125;
conf.friction = 20; // f = 2 u_kinetic F_normal

// Because fuck pi
Math.TAU = 2 * Math.PI;

// game object and canvas setup
var game = {};
game.canvas = document.createElement("canvas");
game.ctx = game.canvas.getContext("2d");
game.canvas.width = conf.cnvW;
game.canvas.height = conf.cnvH;
game.ctx.fillStyle = "gray";
game.ctx.strokeStyle = "white";
game.ctx.textBaseline = "top";
game.ctx.font = "14px sans-serif";
game.cycleInterval = null;
game.me = null;
game.players = [];
game.obj = [];
game.paused = true;
game.togglePause = function(a) {
  if (game.paused) { // unpause
    game.cycleInterval = setInterval(cycle, 1000 * conf.dt);
    game.paused = false;
  } else { // pause
    clearInterval(game.cycleInterval);
    game.ctx.fillText("Paused", 0, 0);
    game.paused = true;
  }
};
game.collisionResponse = function(a, b, dx, dy, r){
  r = Math.sqrt(r);
  // Make [dx, dy] a unit vector
  dx /= r;
  dy /= r;
  // Separate balls
  var sep = r - a.r - b.r;
  a.x += sep / 2 * dx;
  a.y += sep / 2 * dy;
  b.x -= sep / 2 * dx;
  b.y -= sep / 2 * dy;
  // Code from http://stackoverflow.com/questions/345838/
  var aci = a.vx * dx + a.vy * dy; // [a.vx, a.vy] . [dx, dy]
  var bci = b.vx * dx + b.vy * dy; // [b.vx, b.vy] . [dx, dy]
  // Solve for the new velocities.
  // Turns out it's really simple when the masses are the same.
  var ac = bci - aci;
  var bc = aci - bci;
  // Update object velocities
  // [a.vx, a.vy] += (acf - aci) * [dx, dy]
  // [b.vx, b.vy] += (bcf - bci) * [dx, dy]
  a.vx += ac * dx;
  a.vy += ac * dy;
  b.vx += bc * dx;
  b.vy += bc * dy;
};

// Mouse functionality
var mouse = {};
mouse.x = mouse.y = 0;
mouse.down = false;
mouse.downFun = function() { mouse.down = true; };
mouse.upFun = function() { mouse.down = false;...