jQuery Billiard

//--------------------------------------------------
_glo = {

  startc:'',
  finc:'',

  stringl:[],
  balls:[],
  looses:[],
  //-------------------------
  hex2dec: function(hnumber) {
    return parseInt(hnumber,16);
  },
  //-------------------------
  dec2hex: function(dnumber) {
     return dnumber.toString(16);
},

  //-------------------------
  step100: function(start,fin, step) {

    return Math.floor(start+(fin - start)/100*step);
  },
  //-------------------------

  col2rgb: function(hcolor) {

  var cols=[];
  var c = hcolor.slice(1);
    cols.push(this.hex2dec(c.slice(0,2)));
    cols.push(this.hex2dec(c.slice(2,4)));
    cols.push(this.hex2dec(c.slice(4,6)));

   return cols;
},

  tr: function(mes) {
    this.informer.append($('<p/>').html(mes));
  }

}

//--------------------------------------------------

  _hc = {


    //----------------------
    rn : function (x) {

    var x = x || 255;

    var colors=[];

      for (var i=0; i<3;i++) {
        colors.push(Math.floor(Math.random()*x));
      }

    return 'rgb('+colors[0]+','+colors[1]+','+colors[2]+')';

  },
    //----------------------
    grad : function(step) {

      var startC = _glo.col2rgb(_glo.startc);
      var finC = _glo.col2rgb(_glo.finc);


      var r = _glo.step100(finC[0] ,startC[0],step);
      var g = _glo.step100(finC[1] ,startC[1],step);
      var b = _glo.step100(finC[2] ,startC[2],step);

      return 'rgb('+r+','+g+','+b+')';


  }


  }

//--------------------------------------------------
_hlp = {



  apel: function(class4,x,y, par) {

  var par = par || $(document.body);

  var el= $('<div/>',{class:class4})
    .css({'left':x, 'top':y});


  $(par).append(el);

    return el;
},

  //-----------------------------------
  apels: function (class4, x,y, count4, par) {

    elarr = new Array();

    for (var i=0; i<count4; i++) {

      var el =this.apel(class4,x,y,par);
      elarr.push(el);
    }

    return elarr;
  },

  //-----------------------------------
  setbg: function(els, func) {


    for (var i=0; i<els.length; i++) {

      var step = Math.floor((i/els.length)*100);
      var color= func(step);

      els[i].css('background-color', color);
    }

    },

  //-----------------------------------
  setpos: function(els, coords) {

    for (var i=0; i<els.length; i++) {

      var step = Math.floor((i/els.length)*100);

      var x = _glo.step100(coords.x1,coords.x2,step);
      var y = _glo.step100(coords.y1,coords.y2,step);

      els[i].css('left',x);
      els[i].css('top',y);
    }
  },
  //-----------------------------------
  shoot: function(els, targ) {

    return $.Deferred(

    function(dfd) {

    var numfin=0;
    for (var i=0; i<els.length; i++) {

      els[i].animate({
           left: targ.offset().left+16,
        top: targ.offset().top+16},{duration:200,easing:'',

                       complete: function() {
                       numfin++;

                       if (numfin==els.length) {
                         dfd.resolve();
                       }
                                    }}

                    )
    }


    });

  },
  //-----------------------------------
  moveball: function(targ_) {

    _selfh=this;

    if (targ_.data('bint'))
       clearInterval(targ_.data('bint'));

      targ_.data('bint', setInterval(
        //----------------------------------
        function() {

           var l = targ_.offset().left;
           var t = targ_.offset().top;

           var w = targ_.width();
           var h = targ_.height();

           var dx = targ_.data('vector').dx;
           var dy = targ_.data('vector').dy;



          if ((l+dx>window.innerWidth-w) || (l+dx<0)) {
            l-=dx;
            dx=-dx/2;

          }

          if ((t+dy>window.innerHeight-h) || (t+dy<0)) {
            t-=dy;
            dy=-dy/2;

          }
          dx*=0.995;
          dy*=0.995;

            if ((Math.abs(dx)<0.3) && (Math.abs(dy)<0.3)) {
              clearInterval(targ_.data('bint'));
            }


           targ_.css('left',l+dx);
           targ_.css('top',t+dy);
          targ_.data('vector',{dx:dx,dy:dy})


          var wt=targ_.data('waitout');
          if (wt>0)
             targ_.data('waitout',wt-1);
          else
             for (var i=0; i<_glo.balls.length; i++) {
                _selfh.isCollide(targ_, _glo.balls[i]);
             };


          for (var i=0; i<_glo.looses.length; i++) {
             _selfh.isGoal(targ_, _glo.looses[i]);
           }




    },10));
  },

  //-----------------------------------
  isCollide :function(targ_, ball_, check) {

     var l = targ_.offset().left;
     var t = targ_.offset().top;

     var l3 = ball_.offset().left;
     var t3 = ball_.offset().top;

     var rad = targ_.width()/2;
     var xc = l+rad;
     var yc = t+rad;

     var rad3 = ball_.width()/2;
     var xc3 = l3+rad3;
     var yc3 = t3+rad3;

     if (targ_.get(0)===ball_.get(0))
        return;

     if (Math.sqrt(Math.pow(xc-xc3,2)+Math.pow(yc-yc3,2))>rad+rad3)
        return false;

     if (check) return true;

     //_glo.tr('collide');

     //this.fireworks(targ_);
     targ_.data('waitout',2);
     ball_.data('waitout',2);


     var dx = targ_.data('vector').dx;
     var dy = targ_.data('vector').dy;

     var vmod = Math.sqrt(dx*dx+dy*dy); //----module of 1 ball before

     var phi = Math.asin(dy/vmod); //----angle of first ball

     var dx3 = xc3-xc;
     var dy3 = yc3-yc;
     var vmod3 = Math.sqrt(dx3*dx3+dy3*dy3); //---distance between centers

     var psy = Math.asin(dy3/vmod3); //----angle between centers



     var vmod4 = vmod*Math.cos(phi-psy);//---module of 2 ball
     var vmod5 = vmod*Math.sin(phi-psy); //--module of 1 ball after

     vmod4z = vmod4;// * vmod / (vmod4+vmod5);
     vmod5z = vmod5;// * vmod / (vmod4+vmod5);

     var dx4 = vmod4z*Math.cos(psy);  //---vector of 2 ball
     var dy4 = vmod4z*Math.sin(psy);

     var dx5 = vmod5z*Math.cos(1.57+psy);
     var dy5 = vmod5z*Math.sin(1.57+psy);


    ball_.data('vector',{dx: dx4, dy: dy4});
    targ_.data('vector',{dx: dx5, dy: dy5});


    this.moveball(ball_);

  },

  //-----------------------------------
  isGoal: function(targ_,loose_) {

     var l = targ_.offset().left;
     var t = targ_.offset().top;

     var l3 = loose_.offset().left;
     var t3 = loose_.offset().top;

     var rad = targ_.width()/2;
     var xc = l+rad;
     var yc = t+rad;

     var rad3 = loose_.width()/2;
     var xc3 = l3+rad3;
     var yc3 = t3+rad3;



     if (Math.sqrt(Math.pow(xc-xc3,2)+Math.pow(yc-yc3,2))>rad+rad3)
        return false;

     clearInterval(targ_.data('bint'));
     _glo.tr('goal');

     this.fireworks(targ_);
     targ_.remove();
  },

  //-----------------------------------
  fireworks : function(targ_) {

    for (i=0; i<40; i++) {
      var el = this.apel('dot',targ_.offset().left, targ_.offset().top);
      el.css('background-color',_hc.rn(255));

             el.animate(
             {left:Math.random()*window.innerWidth-200,
              top:Math.random()*window.innerHeight-200, opacity:0},
          500)
          .queue(function() {$(this).remove()})
    }
  },
  //-----------------------------------
  appwEvs: function(el) {

    if (!_glo.evman)
       _glo.evman = new Evman();

    _glo.evman.hook(el);



}}

//--------------------------------------------------
//--------------------------------------------------
  Evman = function() {

    _self=this;


    this.hook = function(el) {

      el.on('mousedown', this.mouseDown);


    }

    //--------------------------------
    this.mouseDown = function(ev) {

      var ev = ev || event;

      _self.targ=$(this);

      if (_self.targ.data('bint')) {
        clearInterval(_self.targ.data('bint'));
      }

       $(window).on('mouseup', _self.mouseUp);
       $(window).on('mousemove',_self.mouseMove);

       if (ev.preventDefault)
          ev.preventDefault();
       else
         ev.returnValue=false;
    }

    //--------------------------------
      this.mouseMove = function(ev) {

        var ev = ev || event;

        mouseX = ev.clientX;
        mouseY = ev.clientY;

        tX = _self.targ.offset().left+16;
        tY = _self.targ.offset().top+16;


        _self.targ.data('vector',{dx:(tX-mouseX)/20, dy:(tY-mouseY)/20});

        _hlp.setpos(_glo.stringl,
                    {x1:tX,x2:mouseX,y1:tY, y2:mouseY});

        if (!_self.vis) {
           $('.dot').fadeIn('fast');
           _self.vis=true;
        }
      }


    //--------------------------------
        this.mouseUp = function(ev) {

          var ev = ev || event;


          $(this).off('mouseup');
          $(this).off('mousemove');



          $.when(_hlp.shoot(_glo.stringl, _self.targ)).done(

            function() {

               $('.dot').fadeOut('fast');
            _self.vis=false;
            //_hlp.fireworks(_self.targ);
            _hlp.moveball(_self.targ);

            });
        }
  }



$(document).ready(
  init
)


  //--------------------------------------------------
  //--------------------------------------------------
  function init() {

   _glo.informer = _hlp.apel('informer',100,0);
   _glo.tr('start');
   _glo.stringl = _hlp.apels('dot',200,200,20);
    $('.dot').css('display','none');

   _glo.startc='#0000ff';
   _glo.finc='#ff0000';


   _hlp.setbg(_glo.stringl, _hc.grad);
    _hlp.setpos(_glo.stringl, {x1:100,x2:400,y1:100,y2:400});


    for (var i=0; i<15; i++) {
       var el=_hlp.apel('ball',
                    100+Math.random()*(window.innerWidth-250),
         100+Math.random()*(window.innerHeight-250));
       _hlp.appwEvs(el);
       _glo.balls.push(el);
    }

    _hlp.setbg(_glo.balls, function() {return _hc.rn(255);});

    var lx=[0, window.innerWidth-110, window.innerWidth/2];
    var ly=[0, window.innerHeight-110, window.innerHeight/2];
    for (var i=0; i<9; i++) {

       if (i==8) continue;
       var el=_hlp.apel('loose',
                    lx[i % 3], ly[Math.floor(i/3)]);


       _glo.looses.push(el);
    }
  }