JQuery Shooter example

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

  bullets:[],
  foes: []
};
_hlp = {

  scrollX : function() {
    return (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0) -
      (document.documentElement.clientLeft || document.body.clientLeft || 0);
  },

  //--------------------
  scrollY : function() {
    return (window.pageYOffset ||  document.documentElement.scrollTop || document.body.scrollTop || 0) -
      (document.documentElement.clientTop || document.body.clientTop || 0);
  },
  //--------------------
  wr : function(tx) {
    _glo.debug.wr(tx);
  },

  //--------------------
  map: function (func, arr) {

    //_hlp.wr(arr.length);

    for (var i=0; i<arr.length; i++) {
        func(arr[i]);
     }
   },

  //--------------------
  hex2dec : function (hnumber) {

     return parseInt(hnumber,16);
  },

  //--------------------
  dec2hex : function (dnumber) {

    return dnumber.toString(16);
  },

  //--------------------
  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;
  },

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

     var x = x4 || 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]+')';
  },

  //--------------------
  sdate : function() {

    var d = new Date();

    var y = d.getFullYear();
    var m = d.getMonth();
    var day =d.getDay();
    var h = d.getHours();
    var min = d.getMinutes();
    var s = d.getSeconds();

    return h+':'+min+':'+s;
  },
  //--------------------
  radcoord : function(xc, yc, psy, rad) {

    return {x:xc+rad*Math.cos(psy), y: yc+rad*Math.sin(psy)};
  },

  //--------------------
  getangle : function(xc, yc, x, y ) {

    var hpt = Math.sqrt(Math.pow(y-yc,2)+ Math.pow(x-xc,2));
    var angle = Math.acos((x-xc)/(hpt))* ((y-yc>0)?1:-1);

    return angle;
  }

};


//-------------------------------
function extend(Child, Parent) {

  var F =function() {};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.prototype.constructor = Child;
  Child.superclass = Parent.prototype;
}
//-------------------------------
function moveObj() {

  var _self = this;

  this.busyfin=false;

  this.speedx = 1;
  this.speedy = 1;

  this.targX = 0;
  this.targY = 0;
  var targ=false;



  //-------------------------------
  this.mkEl = function(classz) {

    var bo = $(document.body);
    var el = $('<div/>');

    bo.append(el);

    el.data('xz',0);
    el.data('yz',0);

    if (classz)
       el.addClass(classz);

    return el;

  };
  //-------------------------------
  this.getX = function () {

    return this.el.data('xz');
  };
  //-------------------------------
  this.getY = function () {

    return this.el.data('yz');
  };

  //-------------------------------
  this.setVis = function() {


    var x = this.el.data('xz');
    var y = this.el.data('yz');
    var w = this.el.width()/2;
    var h = this.el.height()/2;

    if ((x+w<window.innerWidth-5) && (x-w>0) &&
      (y+h<window.innerHeight-5) && (y-h>0)) {

        this.el.css('visibility','visible');

       this.el.css('left',x-w);
       this.el.css('top',y-h);

      } else {

        this.el.css('visibility','hidden');

        this.el.css('left','');
        this.el.css('top','');

      }
  };
  //-------------------------------
  this.setX = function(x) {


    this.el.data('xz',x);
    this.setVis();

  };
  //-------------------------------
  this.setY = function(y) {

    this.el.data('yz',y);
    this.setVis();

  };
  //-------------------------------
  this.setXY = function(x,y) {

    this.setX(x);
    this.setY(y);
  };
  //-------------------------------
  this.checkBound = function(x,y) {

    return false;
  };
  //-------------------------------
  this.moveTo = function(x,y) {

    var xo = this.getX();
    var yo = this.getY();

    if ((Math.abs(x-xo)<10) && (Math.abs(y-yo)<10)) {
      this.finished();
      return;
    }


    var xn = xo+ this.speedx;
    var yn = yo+ this.speedy;


    if (this.checkBound(xn,yn)) {
      this.finished();
      return;
    }

    //_hlp.wr('movenum='+this.num+' '+_hlp.sdate());
    //_hlp.wr('inf='+x+' '+xo+' '+this.speedx);
    this.setXY(xn,yn);


  };

  //-------------------------------
  this.finished = function() {

  };

  //-------------------------------
  this.setSpeed = function (dx, dy) {

    this.speedx = dx;
    this.speedy = dy;
  };

  //-------------------------------
  this.setSpeedTarg = function (steps) {

    var dx = (this.targX - this.getX())/steps;
    var dy = (this.targY - this.getY())/steps;

    this.setSpeed(dx,dy);
    };

  //-------------------------------
  this.setTarg = function(x,y) {

    this.targX = x;
    this.targY = y;
    targ = true;
  };
  //-------------------------------
  this.clearTarg = function() {

       targ = false;
    };

  //-------------------------------
  this.moveToTarg = function() {

    if (targ===false)
       return;

    this.moveTo(this.targX, this.targY);
  };
}

//-------------------------------
//         debug
//-------------------------------
function Debug() {

  Debug.superclass.constructor.apply(this,arguments);

  this.el = this.mkEl('debug');

  this.setXY(150,150);

  this.wr = function(tx) {
    this.el.prepend($('<p/>').html(tx));
  };
}
//-------------------------------
//         hero
//-------------------------------
function Hero () {

  Hero.superclass.constructor.apply(this, arguments);

  this.el = this.mkEl('mainHero');
  this.setXY(window.innerWidth/2, window.innerHeight/2);


}
//-------------------------------
//        cannon
//-------------------------------
function Cannon() {

  var _self = this;
  var num_bullet = 0;

  Cannon.superclass.constructor.apply(this, arguments);
  //this.speed = 10;
  this.el= this.mkEl('cannon');

  //---------------------------------------
  this.setAngle = function (x,y) {

    var xh = _glo.hero.getX();
    var yh = _glo.hero.getY();

    var angle = _hlp.getangle(xh,yh,x,y);

    var coords = _hlp.radcoord(xh,yh, angle,40);

    _self.setXY(coords.x,coords.y);
  };

   //---------------------------------------
    window.onmousemove = function(ev) {
      ev = ev || event;


      var mx = ev.clientX + _hlp.scrollX();
      var my = ev.clientY + _hlp.scrollY();

      _self.setAngle(mx,my);
    };

   //---------------------------------------
    window.onclick = function (ev) {

      ev = ev || event;

      var mx = ev.clientX + _hlp.scrollX();
      var my = ev.clientY + _hlp.scrollY();

      var xc = _self.getX();
      var yc = _self.getY();

      var bullet = new Bullet(_self);


      bullet.setXY(xc, yc);

      var angle = _hlp.getangle( xc, yc, mx, my);
      var coords = _hlp.radcoord(xc, yc, angle, 1000);

      bullet.setTarg(coords.x, coords.y);
      bullet.setSpeedTarg(60);

      bullet.num = num_bullet;

      num_bullet++;

      _glo.bullets.push(bullet);

   };
   //---------------------------------------

}

//-------------------------------
//       flame
//-------------------------------
function Flame(par) {

  Flame.superclass.constructor.apply(this, arguments);
  this.el = this.mkEl('flame');
  this.el.css('display','none');
  this.setXY(par.getX()-20+Math.random()*40, par.getY()-20+Math.random()*40);
  this.el.css('background-color',_hlp.rn());



}

//-------------------------------
//           bullet
//-------------------------------
function Bullet(par) {


  Bullet.superclass.constructor.apply(this, arguments);

  var _self = this;
  this._parent = par;
  this.checkedin=false;

  this.el = this.mkEl('bullet');

  //-----------------------------------
  this.fireworks = function () {

      var flames = [];


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

           var flame = new Flame(_self);
           flames.push(flame);

         }
     //---------------------------------
     return $.Deferred(

       function(dfd) {

         var numfires = 0;
         //--------------------------
         for (i=0; i<flames.length; i++) {

           flames[i].el.delay(10*i)
             .queue( function () {
               $(this).css('display','block');
               $(this).dequeue();
             })
             .animate (
             {'left': Math.random()*window.innerWidth-200,
              'top' : Math.random()*window.innerHeight-200
             },
             { 'duration': 500,
              'easing': '',
              complete : function() {
                numfires++;


                if (numfires==flames.length) {

                   dfd.resolve();
                }
              }
             }).queue(function() {$(this).remove()});
         }

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





       });
  };
  //-----------------------------------
  this.checkTarget = function(x,y) {

    if (this.checkedin===true)
       return true;
    //--------------------
    checkIn = function (inf) {

      var xz = inf.el.data('xz');
      var yz = inf.el.data('yz');

      var w = inf.el.width()/2;
      var h = inf.el.height()/2;


      if ((x<xz+w) && (x>xz-w) && (y<yz+w) && (y>yz-w)) {

        return true;
      }
      return false;
    };
    //--------------------

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

      if (checkIn(_glo.foes[i])) {

        $.when(_glo.foes[i].killed()).done(

          function() {
              _glo.foes.splice(i,1);
              //_hlp.wr('foes=' +_glo.foes.length);
          })

        this.checkedin = true;
        return true;
      }
     }
    return false;


  };
  //-----------------------------------
  this.checkBound = function(x,y) {


    var w = this.el.width()/2;
    var h = this.el.height()/2;

    if (x+w>window.innerWidth) return true;
    if (x-w<0) return true;
    if (y+h>window.innerHeight) return true;
    if (y-h<0) return true;

    if (this.checkTarget(x,y)) {

      return true;}


    return false;
  };

  //-----------------------------------
  this.finished = function () {

    if (this._parent.busyfin===true) {

      return;
    }

    this._parent.busyfin = true;

    //_hlp.wr('s='+this.num);

    for (i=0; i<_glo.bullets.length; i++) {
      if (_glo.bullets[i].num==this.num) {

          _glo.bullets.splice(i,1);
          //_hlp.wr('len='+_glo.bullets.length);
      }
    }


    this.el.css('visibility','hidden');

    $.when (this.fireworks()).done(

      function() {

          _self.el.remove();
          //delete _self;
         _self._parent.busyfin = false;

      }
      );


    //_hlp.wr('test4');


  };


}

//-------------------------------
//          foe
//-------------------------------
function Foe () {

  Foe.superclass.constructor.apply(this, arguments);

  var _self = this;

  this.el = this.mkEl('foe');


  //--------------------------------
  this.bleeding = function() {

    var drops = [];
    for (var i=0; i<3; i++) {

      var drop = new Flame(_self);
      drop.el.css('background-color','red');
      drop.el.css('width',5).css('height',5);

      drops.push(drop);
    }
    //-------------
    return $.Deferred (
      function(dfd) {

        var numdrops = 0;

        var tx = _self.el.offset().left;
        var ty = _self.el.offset().top;

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


          drops[i].el.delay(i*4).queue (
            function() {
              $(this).css('display','block');
              $(this).dequeue();
            })
            .animate({
              'left': -20+Math.random()*40 + tx,
              'top': -20+Math.random()*40 + ty },

                     {'duration': 200,
                      'easing': '',

                      complete: function () {

                        numdrops++;
                        if (numdrops==drops.length)
                           dfd.resolve();
                      }
                     })
            .queue(

              function() {

                $(this).remove();
            });
        }
      });
  };
  //--------------------------------
  this.killed = function () {

    this.setTarg(Math.random()*window.innerWidth,
                   Math.random()*window.innerHeight);
    this.setSpeedTarg(100);

    return $.Deferred(

      function(dfd) {

         $.when (_self.bleeding()).done(

           function() {
           _self.el.remove();
           dfd.resolve();
         });

      });
  };

  //--------------------------------
  this.explode = function() {

    var flames = [];

    //----------------
    for (var i=0; i<400; i++) {

      var flame = new Flame(_self);
      flame.el.css('background-color','red');
      flames.push(flame);
    }
    //----------------
    return $.Deferred (

      function(dfd) {

        var numfires = 0;

        for (var i=0; i<flames.length; i++) {
          flames[i].el.delay(4*i).queue (
            function() {
              $(this).css('display','block');
              $(this).dequeue();
            })
            .animate({'left': Math.random()*window.innerWidth-20,
                      'top': Math.random()*window.innerHeight-20},

                     {'duration': 500,
                      'easing': '',
                      complete: function () {

                        numfires++;
                        if (numfires==flames.length)
                          dfd.resolve();
                      }

                     }).queue(function() {

                          $(this).remove();
                        });


        }
      });

  };
  //--------------------------------
  this.finished = function () {

    clearInterval(gl_fint);
    clearInterval(gl_int);

    $.when (this.explode()).done (

      function () {

        var glass = $('<div/>', {'class':'glass'});
        $(document.body).append(glass);


        var fdv = $('<div/>',{'class':'final'});
        fdv.html('tower captured');
        $(document.body).append(fdv);

        fdv.css('left', window.innerWidth/2 - fdv.width()/2);
        fdv.css('top', window.innerHeight/2 - fdv.height()/2);

        fdv.fadeIn('slow');
        glass.fadeIn('slow');
      }
      );
  };
}

//-------------------------------
extend(Debug, moveObj);
extend(Hero, moveObj);
extend(Cannon, moveObj);
extend(Bullet, moveObj);
extend(Flame, moveObj);
extend(Foe, moveObj);


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

function frame() {

  //_glo.cannon.moveToTarg();

  //_hlp.wr(_glo.bullets.length)
  //_hlp.wr(window.innerWidth);

  movef = function (el) {

    el.moveToTarg();

  };

  _hlp.map(movef, _glo.bullets);
  _hlp.map(movef, _glo.foes);



}
//-------------------------------
function addHero() {

  _glo.debug = new Debug();
  _glo.hero = new Hero();
  _glo.cannon = new Cannon();


}
//-------------------------------
function addFoe() {

  var foe = new Foe();

  var xc = _glo.hero.getX();
  var yc = _glo.hero.getY();

  var angle = -7+ Math.random()*14;
  var coords = _hlp.radcoord(xc, yc, angle, 500);

  foe.setXY(coords.x, coords.y);

  foe.setTarg(xc,yc);
  foe.setSpeedTarg(500+Math.random()*400);

  _glo.foes.push(foe);


}

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

  addHero();

  gl_int = setInterval(frame,10);
  gl_fint = setInterval(addFoe,1000);
}
//-------------------------
$(document).ready(
  init);