steveosoule
11/18/2015 - 12:25 AM

Object Oriented JS SandBox

Object Oriented JS SandBox

var Person = function(prop){
  var _self = this;
  this.prop = prop;
  this.element = {};
  this.generate = function(){    
    var element = document.createElement('h2');
    element.setAttribute('id', _self.prop.name);
    element.innerText = _self.prop.name;
    element.style.position = 'absolute';
    this.element = document.body.appendChild( element );
  };
  this.render = function(){
     _self.element.style.left = _self.prop.x + 'px';
     _self.element.style.top = _self.prop.y + 'px';
  };
  this.update = function(num){
    num = (isNaN(num)) ? 1 : num;
    
    _self.prop.x += _self.prop.speed + num;
    // _self.prop.y += _self.prop.speed + num;

    _self.render();
  };
};

var steven = new Person({
  name: 'Steven',
  speed: 15,
  x: 10,
  y: 10
});

var bob = new Person({
  name: 'Bob',
  speed: 10,
  x: 10,
  y: 200
});

var Population = function(){
  var _self = this;
  _self.people = [];
  _self.generate = function(){
    _self.people.forEach(function(person, i){
      person.generate();
    });
  };
  _self.update = function(){
    _self.people.forEach(function(person, i){
      person.update();
    });
  };
};

var Miva = new Population(steven);
Miva.people.push(steven);
Miva.people.push(bob);

var Planet = function(){
  document.body.innerHTML = '';
  var _self = this;
  this.time = 0;
  Miva.generate();
  this.timeout = window.setInterval(function(){
    _self.time++;
    console.log(_self.time);
    Miva.update(_self.time);
  }, 500);

  this.stop = function(){
    window.clearInterval(_self.timeout);
  };
};

var earth = new Planet();