Moving Ball

by Ben Clayton

CSS

.ball {
  width: 20px;
  height: 20px;
  border: 2px solid red;
  border-radius: 50%;
  position: absolute;
  background-color: red;
}

JavaScript

function ball(x) {
  var _self = this;
  _self.tid = null;
  _self.x = x * 50;
  _self.y = 10;

  _self.dx = 2;
  _self.dy = 1 + (0.4 * x);
  _self.moving = 1;

  _self.el = null;
  _self.init = function() {
    //debugger;
    _self.el = $('<div class="ball"></div>');
    $('body').append(_self.el);
    _self.tid = setTimeout(_self.tick, 50);
    return _self;
  };
  _self.tick = function() {


    _self.dy += 1;
    _self.x += _self.dx;
    _self.y += _self.dy;
    if (_self.dy > 0 && _self.y > 200) {
      _self.dy *= -0.9;
      if (Math.abs(_self.dy) < 1) {
        _self.moving = 0;
      }
    }


    console.log(_self.x);
    //_self.el.css({'left':_self.x+'px','top':_self.y+'px'});
    _self.el.css({
      "transform": "translate(" + _self.x + 'px' + "," + _self.y + 'px' + ")"
    });
    if (_self.moving) {
      _self.tid = setTimeout(_self.tick, 100)
    };
  };

}

for (var x = 1; x < 100; x++) {
  (new ball(x/10)).init();
}