requirebin sketch

index.js

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

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

var game = new Game({
  canvasId: 'game',
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: '#E187B8'
});

var box = {
  position: { x: game.width/2, y: game.height/2 },
  size: { x: 100, y: 100 }
};

var mouse = new Mouse(game);
mouse.on('mousemove', function(location){
  box.position = location;
});

mouse.on('click', function(){
  box.size.x += 25;
  box.size.y += 25;
});

var degrees = 0;
game.on('update', function(){
  degrees++;
});

game.on('draw', function(context){
  context.save();
  context.translate(box.position.x, box.position.y);
  context.rotate(degrees);
  context.fillStyle = '#fff';
  context.fillRect(-box.size.x/2, -box.size.y/2, box.size.x, box.size.y);
  context.restore();
});

minified.js

require=function(e,t,n){function r(n,s){if(!t[n]){if(!e[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=t[n]={exports:{}};e[n][0].call(a.exports,function(t){var i=e[n][1][t];return r(i?i:t)},a,a.exports)}return t[n].exports}for(var i="function"==typeof require&&require,s=0;n.length>s;s++)r(n[s]);return r}({1:[function(e,t){var n=t.exports={};n.nextTick=function(){var e="undefined"!=typeof window&&window.setImmediate,t="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(e)return function(e){return window.setImmediate(e)};if(t){var n=[];return window.addEventListener("message",function(e){if(e.source===window&&"process-tick"===e.data&&(e.stopPropagation(),n.length>0)){var t=n.shift();t()}},!0),function(e){n.push(e),window.postMessage("process-tick","*")}}return function(e){setTimeout(e,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(e,t,n){(function(e){function t(e,t){if(e.indexOf)return e.indexOf(t);for(var n=0;e.length>n;n++)if(t===e[n])return n;return-1}e.EventEmitter||(e.EventEmitter=function(){});var r=n.EventEmitter=e.EventEmitter,i="function"==typeof Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},s=10;r.prototype.setMaxListeners=function(e){this._events||(this._events={}),this._events.maxListeners=e},r.prototype.emit=function(e){if("error"===e&&(!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 t=this._events[e];if(!t)return!1;if("function"==typeof t){switch(arguments.length){case 1:t.call(this);break;case 2:t.call(this,arguments[1]);break;case 3:t.call(this,arguments[1],arguments[2]);break;default:var n=Array.prototype.slice.call(arguments,1);t.apply(this,n)}return!0}if(i(t)){for(var n=Array.prototype.slice.call(arguments,1),r=t.slice(),s=0,o=r.length;o>s;s++)r[s].apply(this,n);return!0}return!1},r.prototype.addListener=function(e,t){if("function"!=typeof t)throw Error("addListener only takes instances of Function");if(this._events||(this._events={}),this.emit("newListener",e,t),this._events[e])if(i(this._events[e])){if(!this._events[e].warned){var n;n=void 0!==this._events.maxListeners?this._events.maxListeners:s,n&&n>0&&this._events[e].length>n&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),console.trace())}this._events[e].push(t)}else this._events[e]=[this._events[e],t];else this._events[e]=t;return this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(e,t){var n=this;return n.on(e,function r(){n.removeListener(e,r),t.apply(this,arguments)}),this},r.prototype.removeListener=function(e,n){if("function"!=typeof n)throw Error("removeListener only takes instances of Function");if(!this._events||!this._events[e])return this;var r=this._events[e];if(i(r)){var s=t(r,n);if(0>s)return this;r.splice(s,1),0==r.length&&delete this._events[e]}else this._events[e]===n&&delete this._events[e];return this},r.prototype.removeAllListeners=function(e){return 0===arguments.length?(this._events={},this):(e&&this._events&&this._events[e]&&(this._events[e]=null),this)},r.prototype.listeners=function(e){return this._events||(this._events={}),this._events[e]||(this._events[e]=[]),i(this._events[e])||(this._events[e]=[this._events[e]]),this._events[e]}})(e("__browserify_process"))},{__browserify_process:1}],"crtrdg-gameloop":[function(e,t){t.exports=e("4i6ABW")},{}],"4i6ABW":[function(e,t){function n(e){this.canvas=document.getElementById(e.canvasId),this.context=this.canvas.getContext("2d"),this.width=this.canvas.width=e.width,this.height=this.canvas.height=e.height,this.backgroundColor=e.backgroundColor,e.maxListeners?this.setMaxListeners(e.maxListeners):this.setMaxListeners(0),this.loop()}var r=e("events").EventEmitter,i=e("raf"),s=e("inherits");t.exports=n,s(n,r),n.prototype.loop=function(){var e=this;this.ticker=i(this.canvas),this.ticker.on("data",function(t){e.update(t),e.draw()})},n.prototype.pause=function(){this.ticker.pause(),this.emit("pause")},n.prototype.resume=function(){var e=this;this.ticker=i(this.canvas),this.ticker.on("data",function(t){e.update(t),e.draw()}),this.emit("resume")},n.prototype.update=function(e){this.currentScene&&this.sceneManager.update(e),this.emit("update",e)},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(e,t){t.exports="function"==typeof Object.create?function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:function(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}},{}],3:[function(e,t){(function(){function n(e){function t(){var r=n.now(),a=r-i;i=r,s.emit("data",a),s.paused||o(t,e)}var i=n.now(),s=new r;return s.pause=function(){s.paused=!0},s.resume=function(){s.paused=!1},o(t,e),s}t.exports=n;var r=e("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(e){setImmediate(e)}:function(e){setTimeout(e,0)});n.polyfill=o,n.now=s})()},{events:2}]},{},[]),require=function(e,t,n){function r(n,s){if(!t[n]){if(!e[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=t[n]={exports:{}};e[n][0].call(a.exports,function(t){var i=e[n][1][t];return r(i?i:t)},a,a.exports)}return t[n].exports}for(var i="function"==typeof require&&require,s=0;n.length>s;s++)r(n[s]);return r}({1:[function(e,t){var n=t.exports={};n.nextTick=function(){var e="undefined"!=typeof window&&window.setImmediate,t="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(e)return function(e){return window.setImmediate(e)};if(t){var n=[];return window.addEventListener("message",function(e){if(e.source===window&&"process-tick"===e.data&&(e.stopPropagation(),n.length>0)){var t=n.shift();t()}},!0),function(e){n.push(e),window.postMessage("process-tick","*")}}return function(e){setTimeout(e,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(e,t,n){(function(e){function t(e,t){if(e.indexOf)return e.indexOf(t);for(var n=0;e.length>n;n++)if(t===e[n])return n;return-1}e.EventEmitter||(e.EventEmitter=function(){});var r=n.EventEmitter=e.EventEmitter,i="function"==typeof Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},s=10;r.prototype.setMaxListeners=function(e){this._events||(this._events={}),this._events.maxListeners=e},r.prototype.emit=function(e){if("error"===e&&(!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 t=this._events[e];if(!t)return!1;if("function"==typeof t){switch(arguments.length){case 1:t.call(this);break;case 2:t.call(this,arguments[1]);break;case 3:t.call(this,arguments[1],arguments[2]);break;default:var n=Array.prototype.slice.call(arguments,1);t.apply(this,n)}return!0}if(i(t)){for(var n=Array.prototype.slice.call(arguments,1),r=t.slice(),s=0,o=r.length;o>s;s++)r[s].apply(this,n);return!0}return!1},r.prototype.addListener=function(e,t){if("function"!=typeof t)throw Error("addListener only takes instances of Function");if(this._events||(this._events={}),this.emit("newListener",e,t),this._events[e])if(i(this._events[e])){if(!this._events[e].warned){var n;n=void 0!==this._events.maxListeners?this._events.maxListeners:s,n&&n>0&&this._events[e].length>n&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),console.trace())}this._events[e].push(t)}else this._events[e]=[this._events[e],t];else this._events[e]=t;return this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(e,t){var n=this;return n.on(e,function r(){n.removeListener(e,r),t.apply(this,arguments)}),this},r.prototype.removeListener=function(e,n){if("function"!=typeof n)throw Error("removeListener only takes instances of Function");if(!this._events||!this._events[e])return this;var r=this._events[e];if(i(r)){var s=t(r,n);if(0>s)return this;r.splice(s,1),0==r.length&&delete this._events[e]}else this._events[e]===n&&delete this._events[e];return this},r.prototype.removeAllListeners=function(e){return 0===arguments.length?(this._events={},this):(e&&this._events&&this._events[e]&&(this._events[e]=null),this)},r.prototype.listeners=function(e){return this._events||(this._events={}),this._events[e]||(this._events[e]=[]),i(this._events[e])||(this._events[e]=[this._events[e]]),this._events[e]}})(e("__browserify_process"))},{__browserify_process:1}],"crtrdg-mouse":[function(e,t){t.exports=e("/00dNb")},{}],"/00dNb":[function(e,t){function n(e){this.game=e||{},this.el=e.canvas,this.initializeListeners()}var r=e("events").EventEmitter,i=e("inherits");t.exports=n,i(n,r),n.prototype.initializeListeners=function(){var e=this;this.el.addEventListener("click",function(t){return t.preventDefault(),e.calculateOffset(t,function(t){e.emit("click",t)}),!1},!1),this.el.addEventListener("mousedown",function(t){return t.preventDefault(),e.calculateOffset(t,function(t){e.emit("mousedown",t)}),!1},!1),this.el.addEventListener("mouseup",function(t){return t.preventDefault(),e.calculateOffset(t,function(t){e.emit("mouseup",t)}),!1},!1),this.el.addEventListener("mousemove",function(t){return t.preventDefault(),e.calculateOffset(t,function(t){e.emit("mousemove",t)}),!1},!1)},n.prototype.calculateOffset=function(e,t){var n=e.target,r=n.offsetLeft-n.scrollLeft,i=n.offsetTop-n.scrollTop,s={x:e.pageX-r,y:e.pageY-i};t(s)}},{events:2,inherits:3}],3:[function(e,t){t.exports="function"==typeof Object.create?function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:function(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}},{}]},{},[]);var Game=require("crtrdg-gameloop"),Mouse=require("crtrdg-mouse"),canvas=document.createElement("canvas");canvas.id="game",document.body.appendChild(canvas);var game=new Game({canvasId:"game",width:window.innerWidth,height:window.innerHeight,backgroundColor:"#E187B8"}),box={position:{x:game.width/2,y:game.height/2},size:{x:100,y:100}},mouse=new Mouse(game);mouse.on("mousemove",function(e){box.position=e}),mouse.on("click",function(){box.size.x+=25,box.size.y+=25});var degrees=0;game.on("update",function(){degrees++}),game.on("draw",function(e){e.save(),e.translate(box.position.x,box.position.y),e.rotate(degrees),e.fillStyle="#fff",e.fillRect(-box.size.x/2,-box.size.y/2,box.size.x,box.size.y),e.restore()});

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