main.js

var obj;
var compound;
obj = function(name) {
  var instance = {
    name: name,
    componenttype: obj,
  };
  var components = compound(instance);
  instance.components = components;
  instance.event = function(name, args) {
    components.iterateall(function(component) {

      if (component[name]) {
        component[name].bind(component)(args);
      } else {
        if (component.componenttype == obj) {
          component.event(name, args);
        }
      }
    });
  }
  return instance;
}
compound = function(root, typepropertyname) {
  var instance = { root: root };
  var components = {};
  typepropertyname = typepropertyname || 'componenttype';
  instance.add = function(child) {
    var _type = child[typepropertyname];
    if (!components[_type]) {
      components[_type] = [];
    }
    components[_type].push(child);
    child.object = root;
  }
  instance.first = function(_type) {
    if (components[_type]) {
      return components[_type][0];
    }
  }
  instance.iterateall = function(fn) {
    for (var _type in components) {
      var l = components[_type].length;
      for (var i = 0; i < l; i++) {
        if (components[_type] && components[_type][i]) {
          fn(components[_type][i]);  
        }
      }
    }
  }
  return instance;
}

var vector2;
var __tovector2 = function(val) {
  if (typeof(val) == 'number') return vector2(val, val);
  return vector2(val.x, val.y);
}
var __movetowards = function(a, b, speed) {
  var delta = 0;
  speed = speed || 1;
  if (a < b) {
    if (a + speed > b) {
      delta = b - a;
    } else {
      delta = speed;
    }
  } else if (a > b) {
    if (a - speed < b) {
      delta = b - a;
    } else {
      delta = -speed;
    }
  }
  return a + delta;
}
vector2 = function(x, y) {
  x = x || 0;
  y = y || 0;
  var vector = { x: x, y: y };
  vector.add = function(other) {
    other = __tovector2(other);
    return vector2(other.x + x, other.y + y);
  }
  vector.sub = function(other) {
    other = __tovector2(other);
    return vector2(x - other.x, y - other.y);
  }
  vector.mul = function(other) {
    other = __tovector2(other);
    return vector2(other.x * x, other.y * y);
  }
  vector.movetowards = function(other, speed) {
    other = __tovector2(other);
    return vector2(__movetowards(x, other.x, speed), __movetowards(y, other.y, speed));
  }
  return vector
}

var transform;
transform = function(position) {
  var instance = {
    componenttype: transform,
  };
  position = position || vector2(0, 0);
  instance.position = position;
  return instance;
}

var axiscontroller;
axiscontroller = function(up, down, left, right) {
  var instance = {
    componenttype: axiscontroller,
  };
  var delta = vector2();
  var controlmap = { };
  controlmap[up] = vector2(0, -1);
  controlmap[down] = vector2(0, 1);
  controlmap[left] = vector2(-1, 0);
  controlmap[right] = vector2(1, 0);
  var pressed = {};
  instance.onkeypress = function(e) {
    if (!pressed[e.key] && controlmap[e.key]) {
      pressed[e.key] = true;
      delta = delta.add(controlmap[e.key]);  
    }
  }
  instance.onkeyup = function(e) {
    if (controlmap[e.key]) {
      pressed[e.key] = false;
      delta = delta.sub(controlmap[e.key]);
    }
  }
  instance.getdelta = function() {
    return delta;
  }
  return instance;
}

var player = obj('player');
player.components.add(axiscontroller('w','s','a','d'));
player.components.add(transform());
player.components.add({
  componenttype: 'movementcontroller',
  speed: 9,
  update: function() {
    var axis = player.components.first(axiscontroller);
    var movement = player.components.first('movementcontroller');
    var transf = player.components.first(transform);
    transf.position = transf.position.add(axis.getdelta().mul(movement.speed));
  },
  draw: function() {
    var div = document.createElement('div');
    var transf = player.components.first(transform);
    div.style.backgroundColor = 'red';
    div.style.width = '10px';
    div.style.height = '10px';
    div.style.top = [transf.position.y, 'px'].join('');
    div.style.left = [transf.position.x, 'px'].join('');
    div.style.position = 'absolute';
    document.body.querySelector('#canvas').appendChild(div);
  }
})

var cow = obj('cow');
cow.components.add(transform(vector2(100, 30)));
cow.components.add({
  componenttype: 'grazingbehavior',
  update: function() {
    if (!this.goal) {
      this.goal = vector2(0, 0);
    }
    this.goal = player.components.first(transform).position;
    var transf = this.object.components.first(transform);
    transf.position = transf.position.movetowards(this.goal, 3);
  },
  draw: function() {
    var div = document.createElement('div');
    var transf = this.object.components.first(transform);
    div.style.backgroundColor = 'blue';
    div.style.width = '10px';
    div.style.height = '10px';
    div.style.top = [transf.position.y, 'px'].join('');
    div.style.left = [transf.position.x, 'px'].join('');
    div.style.position = 'absolute';
    document.body.querySelector('#canvas').appendChild(div);
  }
});

var game = obj('simulation');
game.components.add(cow);
game.components.add(player);
game.value = 0;
game.speed = 5;
false && game.components.add({
  componenttype: 'draw',
  draw: function() {},
  update: function(dt) {
  }
})
false && game.components.add({
  componenttype: 'controller',
  update: function(dt) {
    this.object.value += this.object.speed * dt;
  }
})

var maxturn = Infinity;
var simulate;
simulate = function(objx, turn, time) {
  if (turn > maxturn) return;
  turn = turn || 0;
  time = time || Date.now();
  if (turn == 0) {
    objx.event('start');
  } else {
    var deltatime = Date.now() - time;
    objx.event('update', deltatime / 1000);
    var canvas = window.document.body.querySelector('#canvas');
    if (canvas) {
      canvas.remove();
    }
    canvas = document.createElement('div');
    canvas.id = 'canvas';
    document.body.appendChild(canvas);
    objx.event('draw');
  }
  window.document.onkeydown = function() {
    objx.event('onkeydown', arguments[0]);
  }
  window.document.onkeypress = function() {
    objx.event('onkeypress', arguments[0]);
  }
  window.document.onkeyup = function() {
    objx.event('onkeyup', arguments[0]);
  }
  setTimeout(function() { simulate(objx, turn + 1, time + deltatime) }, 200);
}

simulate(game);