game.js

var cue = new Cue(100,100);

var context;
var mx;
var my;
var offset = $('canvas').offset();
var shooting = false;
var maxCuePull = 125;
var cueSpeedMultiplier = 0.08;

var width = 500;
var height = 500;

var pits = new Array();
pits[0] = new Pit(75,75)
pits[1] = new Pit(width-75, 75)
pits[2] = new Pit(75, height-75)
pits[3] = new Pit(width-75, height-75)

var balls = new Array();
for (i = 0; i < 10; i++){
  var ballX;
  var ballY;
  var overlap;
  do{
    overlap = false;
    ballX = 50+Math.ceil(Math.random()*400);
    ballY = 50+Math.ceil(Math.random()*400);

    $.each(balls, function(){
      if (dist(this.x, this.y, ballX, ballY) < 40){
        overlap = true;
      }
    });
    if (dist(cue.x, cue.y, ballX, ballY) < 40){
      overlap = true;
    }

  }while(overlap==true);

  balls[i] = new Ball(ballX, ballY);
}

// balls getting stuck on walls

function init(){
  context = myCanvas.getContext('2d');
  setInterval(tick,10);
}
function tick(){
  draw();
  cue.move();
  $.each(balls, function(){
    var ball = this;
    ball.move();
    checkCollision(cue, ball);
    
    $.each(pits, function(){
      if (pitDeath(this, ball)) {
        console.log('pit');
        var i = balls.indexOf(ball);
        if(i != -1) balls.splice(i, 1);
      };
    });
    $.each(balls, function(){
      if (this != ball) checkCollision(this, ball);
    });
  });
  $.each(pits, function(){
    if (pitDeath(this, cue)) {
      console.log('pit');
      cue = null;
    };
  });
}
function draw(){
  context.clearRect(0,0, width,height);

  $.each(pits, function(){
    pit = this
    context.beginPath();
    context.fillStyle="#000";
    context.arc(pit.x,pit.y,pit.radius,0,Math.PI*2,true);
    context.closePath();
    context.fill();
  });

  if (shooting) {
    context.strokeStyle = '#f00';
    context.lineWidth   = 10;

    context.beginPath();
    context.moveTo(cue.x, cue.y);
    context.lineTo(mx, my);

    context.stroke();
    context.closePath();
  }

  $.each(balls, function(){
    ball = this
    context.beginPath();
    context.fillStyle="#00ff00";
    context.arc(ball.x,ball.y,20,0,Math.PI*2,true);
    context.closePath();
    context.fill();
  });

  context.beginPath();
  context.fillStyle="#0000ff";
  context.arc(cue.x,cue.y,20,0,Math.PI*2,true);
  context.closePath();
  context.fill();
}
function dist(x, y, X, Y){
  x_diff = Math.pow( (x-X), 2 );
  y_diff = Math.pow( (y-Y), 2 );
  dist1 = Math.sqrt( x_diff + y_diff );
  if (dist1<0) {dist1 = -dist1;}
  return dist1;
}

$('canvas').mousedown(function(e){
  mx = e.pageX - offset.left
  my = e.pageY - offset.top
  if (dist(mx,my, cue.x, cue.y) < 20){
    shooting = true;
  }
});
$('canvas').mouseup(function(e){
  if (shooting){
    mx = e.pageX - offset.left
    my = e.pageY - offset.top
    calculateCuePull();

    var dx = cue.x-mx;
    var dy = cue.y-my;
    cue.vx = (dx*cueSpeedMultiplier);
    cue.vy = (dy*cueSpeedMultiplier);
  }
  shooting=false;
});
$('canvas').mousemove(function(e){
  mx = e.pageX - offset.left - 10
  my = e.pageY - offset.top - 10
  calculateCuePull();
});


window.onload += init();