Skip to content

Instantly share code, notes, and snippets.

@foldi

foldi/README.md

Last active December 18, 2015 21:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save foldi/5846530 to your computer and use it in GitHub Desktop.
Save foldi/5846530 to your computer and use it in GitHub Desktop.
Download ZIP
SimpleSim step 4
Raw
README.md

Step 4

  • Create an Item class.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta name='viewport' content='user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<title>Simple Simulator</title>
<link rel='stylesheet' href='main.css' type='text/css' charset='utf-8' />
<script src='modernizr.js' type='text/javascript' charset='utf-8'></script>
<script src='simplesim.js' type='text/javascript' charset='utf-8'></script>
</head>
<body>
<script type='text/javascript' charset='utf-8'>
var system = SimpleSim.System;
system.init(function() {
system.add('Item');
});
</script>
</body>
</html>
Raw
modernizr.js
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-teststyles-testprop-testallprops-prefixes-domprefixes
*/
;window.Modernizr=function(a,b,c){function y(a){i.cssText=a}function z(a,b){return y(l.join(a+";")+(b||""))}function A(a,b){return typeof a===b}function B(a,b){return!!~(""+a).indexOf(b)}function C(a,b){for(var d in a){var e=a[d];if(!B(e,"-")&&i[e]!==c)return b=="pfx"?e:!0}return!1}function D(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:A(f,"function")?f.bind(d||b):f}return!1}function E(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return A(b,"string")||A(b,"undefined")?C(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),D(e,b,c))}var d="2.6.2",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l=" -webkit- -moz- -o- -ms- ".split(" "),m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v=function(a,c,d,e){var h,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),l.appendChild(j);return h=["&#173;",'<style id="s',g,'">',a,"</style>"].join(""),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=f.style.overflow,f.style.overflow="hidden",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i},w={}.hasOwnProperty,x;!A(w,"undefined")&&!A(w.call,"undefined")?x=function(a,b){return w.call(a,b)}:x=function(a,b){return b in a&&A(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransforms=function(){return!!E("transform")},p.csstransforms3d=function(){var a=!!E("perspective");return a&&"webkitPerspective"in f.style&&v("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a};for(var F in p)x(p,F)&&(u=F.toLowerCase(),e[u]=p[F](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)x(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},y(""),h=j=null,e._version=d,e._prefixes=l,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return C([a])},e.testAllProps=E,e.testStyles=v,e}(this,this.document);
Raw
simplesim.js
SimpleSim = {}; exports = SimpleSim;
(function(exports) {
/** @namespace */
var System = {
name: 'System'
};
/**
* Stores references to all items in the system.
* @private
*/
System._records = {
lookup: {},
list: []
};
/**
* Used to create unique ids.
* @private
*/
System._idCount = 0;
/**
* Increments idCount and returns the value.
*/
System.getNewId = function() {
this._idCount++;
return this._idCount;
};
/**
* Initializes the system and starts the update loop.
*
* @param {Function} opt_setup= Creates the initial system conditions.
* @param {Object} opt_world= A reference to a DOM element representing the System world.
*/
System.init = function(opt_setup, opt_world) {
var setup = opt_setup || function () {},
world = opt_world || document.body;
System._records.list.push(new exports.World(world));
setup.call(this);
};
/**
* Adds an object to the system.
*
* @param {Object} opt_options= Object properties.
*/
System.add = function(klass, opt_options) {
var last, records = this._records.list,
recordsLookup = this._records.lookup,
options = opt_options || {};
options.world = records[0];
if (exports[klass]) {
records[records.length] = new exports[klass](options);
} else if (exports.Classes[klass]) {
records[records.length] = new exports.Classes[klass](options);
} else {
throw new Error(klass + ' class does not exist.');
}
last = records.length - 1;
recordsLookup[records[last].id] = records[last].el.parentNode;
records[last].init(options);
return records[last];
};
exports.System = System;
}(exports));
(function(exports) {
/**
* Creates a new World.
*
* @param {Object} el The DOM element representing the world.
* @constructor
*/
function World(el) {
var viewportSize = exports.Utils.getViewportSize();
if (!el || typeof el !== 'object') {
throw new Error('World: A valid DOM object is required for a new World.');
}
this.el = el;
this.el.className = 'world';
this.width = viewportSize.width;
this.height = viewportSize.height;
this.location = {x: viewportSize.width / 2, y: viewportSize.height / 2};
this.color = 'transparent';
this.visibility ='visible';
}
/**
* Worlds do not have worlds. However, assigning a
* blank object avoid coding extra logic in System._update.
*/
World.prototype.world = {};
exports.World = World;
}(exports));
(function(exports) {
/**
* Creates a new Item.
*
* @param {Object} options A map of initial properties.
* @constructor
*/
function Item(options) {
if (!options || !options.world || typeof options.world !== 'object') {
throw new Error('Item: A valid DOM object is required for a new Item.');
}
this.world = options.world;
this.name = options.name || 'Item';
this.id = this.name + exports.System.getNewId();
this.el = document.createElement('div');
this.el.id = this.id;
this.el.className = 'item ' + this.name.toLowerCase();
this.el.style.visibility = 'hidden';
this.world.el.appendChild(this.el);
}
/**
* Initializes the object.
*/
Item.prototype.init = function() {};
/**
* Updates properties.
*/
Item.prototype.step = function() {};
exports.Item = Item;
}(exports));
(function(exports) {
var Utils = {};
/**
* Determines the size of the browser viewport.
*
* @returns {Object} The current browser viewport width and height.
* @private
*/
Utils.getViewportSize = function() {
var d = {};
if (typeof(window.innerWidth) !== 'undefined') {
d.width = window.innerWidth;
d.height = window.innerHeight;
} else if (typeof(document.documentElement) !== 'undefined' &&
typeof(document.documentElement.clientWidth) !== 'undefined') {
d.width = document.documentElement.clientWidth;
d.height = document.documentElement.clientHeight;
} else if (typeof(document.body) !== 'undefined') {
d.width = document.body.clientWidth;
d.height = document.body.clientHeight;
} else {
d.width = undefined;
d.height = undefined;
}
return d;
};
exports.Utils = Utils;
}(exports));
(function(exports) {
var Classes = {};
exports.Classes = Classes;
}(exports));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment