game

by wared

HTML

<div id="stage"></div>

CSS

#stage {
  width: 400px;
  height: 300px;
  overflow: hidden;
  background: white;
  position: relative;
}

.hero {
  background: red;
}

JavaScript

var Model, Elem, Anim;
var keys, key;
var stage, hero;
var stageEl, squareEl;
var lastLoop, loopRate;
var LEFT, UP, RIGHT, DOWN;

Model = function (fields) {
  var k;
  this.dirty = {};
  this.fields = fields;
  for (k in fields) {
    this.dirty[k] = true;
  }
};

Model.prototype.commit = function () {
  var k;
  for (k in this.dirty) {
    this.dirty[k] = false;
  }
};

Model.prototype.set = function (k, v) {
  this.fields[k] = v;
  this.dirty[k] = true;
};

Model.prototype.get = function (k) {
  return this.fields[k];
};

Model.prototype.isDirty = function (k) {
  return this.dirty[k];
};

Model.prototype.raw = function () {
  return this.fields;
};

Elem = function (model) {
  this.dom = document.createElement("div");
  this.dom.style.position = "absolute";
};

Elem.prototype.getDom = function () {
  return this.dom;
};

Elem.prototype.translate = function (model) {
  var k;
  for (k in this.translators) {
    if (model.isDirty(k)) {
      this.translators[k].call(
      	this, model.get(k)
      );
    }
  }
};

Elem.prototype.translators = {
  type : function (value) {
    this.dom.setAttribute("class", value);
  },
  x : function (value) {
    this.dom.style.left = value + "px";
  },
  y : function (value) {
    this.dom.style.top = value + "px";
  },
  width : function (value) {
    this.dom.style.width = value + "px";
  },
  height : function (value) {
    this.dom.style.height = value + "px";
  },
  color : function (value) {
    this.dom.style.background = value;
  }
};

Anim = function (init, states, next) {
	this.delay = null;
	this.states = states;
  this.next = next;
	this.goto(init);
};

Anim.prototype.indexOf = function (state) {
	var i = 0, n = this.states.length;
  while (i < n && this.states[i].name != state) i++;
  return i < n ? i : -1;
};

Anim.prototype.goto = function (state) {
	this.state = this.indexOf(state);
	this.delay = this.states[this.state].ms;
};

Anim.prototype.state = function () {
	return...