requirebin sketch

index.js

var Game = require('crtrdg-gameloop');

var canvas = document.createElement('canvas');
canvas.id = 'game';
document.body.appendChild(canvas);

var game = new Game({
  canvasId: 'game',
  width: 1000,
  height: 400,
  backgroundColor: '#E187B8'
});

console.log(game.width / 2, game.height / 2);

game.on('draw', function(context){
  context.translate(game.width / 2, game.height / 2);
  context.rotate(1);
  context.fillStyle = '#fff';
  context.fillRect(0, 0, 100, 100);
});

minified.js

require=function(t,e,n){function r(n,s){if(!e[n]){if(!t[n]){var o="function"==typeof require&&require;if(!s&&o)return o(n,!0);if(i)return i(n,!0);throw Error("Cannot find module '"+n+"'")}var a=e[n]={exports:{}};t[n][0].call(a.exports,function(e){var i=t[n][1][e];return r(i?i:e)},a,a.exports)}return e[n].exports}for(var i="function"==typeof require&&require,s=0;n.length>s;s++)r(n[s]);return r}({1:[function(t,e){var n=e.exports={};n.nextTick=function(){var t="undefined"!=typeof window&&window.setImmediate,e="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(t)return function(t){return window.setImmediate(t)};if(e){var n=[];return window.addEventListener("message",function(t){if(t.source===window&&"process-tick"===t.data&&(t.stopPropagation(),n.length>0)){var e=n.shift();e()}},!0),function(t){n.push(t),window.postMessage("process-tick","*")}}return function(t){setTimeout(t,0)}}(),n.title="browser",n.browser=!0,n.env={},n.argv=[],n.binding=function(){throw Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(){throw Error("process.chdir is not supported")}},{}],2:[function(t,e,n){(function(t){function e(t,e){if(t.indexOf)return t.indexOf(e);for(var n=0;t.length>n;n++)if(e===t[n])return n;return-1}t.EventEmitter||(t.EventEmitter=function(){});var r=n.EventEmitter=t.EventEmitter,i="function"==typeof Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)},s=10;r.prototype.setMaxListeners=function(t){this._events||(this._events={}),this._events.maxListeners=t},r.prototype.emit=function(t){if("error"===t&&(!this._events||!this._events.error||i(this._events.error)&&!this._events.error.length))throw arguments[1]instanceof Error?arguments[1]:Error("Uncaught, unspecified 'error' event.");if(!this._events)return!1;var e=this._events[t];if(!e)return!1;if("function"==typeof e){switch(arguments.length){case 1:e.call(this);break;case 2:e.call(this,arguments[1]);break;case 3:e.call(this,arguments[1],arguments[2]);break;default:var n=Array.prototype.slice.call(arguments,1);e.apply(this,n)}return!0}if(i(e)){for(var n=Array.prototype.slice.call(arguments,1),r=e.slice(),s=0,o=r.length;o>s;s++)r[s].apply(this,n);return!0}return!1},r.prototype.addListener=function(t,e){if("function"!=typeof e)throw Error("addListener only takes instances of Function");if(this._events||(this._events={}),this.emit("newListener",t,e),this._events[t])if(i(this._events[t])){if(!this._events[t].warned){var n;n=void 0!==this._events.maxListeners?this._events.maxListeners:s,n&&n>0&&this._events[t].length>n&&(this._events[t].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[t].length),console.trace())}this._events[t].push(e)}else this._events[t]=[this._events[t],e];else this._events[t]=e;return this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(t,e){var n=this;return n.on(t,function r(){n.removeListener(t,r),e.apply(this,arguments)}),this},r.prototype.removeListener=function(t,n){if("function"!=typeof n)throw Error("removeListener only takes instances of Function");if(!this._events||!this._events[t])return this;var r=this._events[t];if(i(r)){var s=e(r,n);if(0>s)return this;r.splice(s,1),0==r.length&&delete this._events[t]}else this._events[t]===n&&delete this._events[t];return this},r.prototype.removeAllListeners=function(t){return 0===arguments.length?(this._events={},this):(t&&this._events&&this._events[t]&&(this._events[t]=null),this)},r.prototype.listeners=function(t){return this._events||(this._events={}),this._events[t]||(this._events[t]=[]),i(this._events[t])||(this._events[t]=[this._events[t]]),this._events[t]}})(t("__browserify_process"))},{__browserify_process:1}],"crtrdg-gameloop":[function(t,e){e.exports=t("4i6ABW")},{}],"4i6ABW":[function(t,e){function n(t){this.canvas=document.getElementById(t.canvasId),this.context=this.canvas.getContext("2d"),this.width=this.canvas.width=t.width,this.height=this.canvas.height=t.height,this.backgroundColor=t.backgroundColor,t.maxListeners?this.setMaxListeners(t.maxListeners):this.setMaxListeners(0),this.loop()}var r=t("events").EventEmitter,i=t("raf"),s=t("inherits");e.exports=n,s(n,r),n.prototype.loop=function(){var t=this;this.ticker=i(this.canvas),this.ticker.on("data",function(e){t.update(e),t.draw()})},n.prototype.pause=function(){this.ticker.pause(),this.emit("pause")},n.prototype.resume=function(){var t=this;this.ticker=i(this.canvas),this.ticker.on("data",function(e){t.update(e),t.draw()}),this.emit("resume")},n.prototype.update=function(t){this.currentScene&&this.sceneManager.update(t),this.emit("update",t)},n.prototype.draw=function(){this.currentScene?(this.context.fillStyle=this.currentScene.backgroundColor,this.sceneManager.draw(this.context)):this.context.fillStyle=this.backgroundColor,this.context.fillRect(0,0,this.width,this.height),this.emit("draw",this.context)}},{events:2,raf:3,inherits:4}],4:[function(t,e){e.exports="function"==typeof Object.create?function(t,e){t.super_=e,t.prototype=Object.create(e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}})}:function(t,e){t.super_=e;var n=function(){};n.prototype=e.prototype,t.prototype=new n,t.prototype.constructor=t}},{}],3:[function(t,e){(function(){function n(t){function e(){var r=n.now(),a=r-i;i=r,s.emit("data",a),s.paused||o(e,t)}var i=n.now(),s=new r;return s.pause=function(){s.paused=!0},s.resume=function(){s.paused=!1},o(e,t),s}e.exports=n;var r=t("events").EventEmitter,i="undefined"==typeof window?this:window,s=i.performance&&i.performance.now?function(){return performance.now()}:Date.now||function(){return+new Date},o=i.requestAnimationFrame||i.webkitRequestAnimationFrame||i.mozRequestAnimationFrame||i.msRequestAnimationFrame||i.oRequestAnimationFrame||(i.setImmediate?function(t){setImmediate(t)}:function(t){setTimeout(t,0)});n.polyfill=o,n.now=s})()},{events:2}]},{},[]);var Game=require("crtrdg-gameloop"),canvas=document.createElement("canvas");canvas.id="game",document.body.appendChild(canvas);var game=new Game({canvasId:"game",width:1e3,height:400,backgroundColor:"#E187B8"});console.log(game.width/2,game.height/2),game.on("draw",function(t){t.translate(game.width/2,game.height/2),t.rotate(1),t.fillStyle="#fff",t.fillRect(0,0,100,100)});

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

view on requirebin