requirebin sketch

index.js

// Load up the `raf` module.
var raf = require('raf')
var controls = require('kb-controls-iframed')({
  'W': 'up',
  'A': 'left',
  'S': 'down',
  'D': 'right',
  '<up>': 'up',
  '<left>': 'left',
  '<down>': 'down',
  '<right>': 'right'
})

// Create the canvas, and add it
// to the page.
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var width = 500
var height = 300

canvas.width = width
canvas.height = height

document.body.appendChild(canvas)

// Create a square object with a position
// and a speed property.
var square = {
  pos: {
    x: width / 2,
    y: height / 2
  },
  spd: {
    x: 0,
    y: 0
  },
  width: 32,
  height: 32
}

raf(canvas).on('data', function() {
  ctx.fillStyle = '#f2f2f2'
  ctx.fillRect(0, 0, width, height)

  // Respond to your arrow keys
  square.spd.x = 0
  square.spd.y = 0
  if (controls.up)    square.spd.y = -5
  if (controls.left)  square.spd.x = -5
  if (controls.down)  square.spd.y = +5
  if (controls.right) square.spd.x = +5
  
  // Add the speed to the position each
  // frame
	square.pos.x += square.spd.x
  square.pos.y += square.spd.y
  
  // Actually draw the square to the screen
  ctx.fillStyle = '#f53'
  ctx.fillRect(
    square.pos.x - square.width/2,
    square.pos.y - square.height/2,
    square.width,
    square.height
  )
})

document.body.style.margin =
document.body.style.padding = 0
document.body.style.overflow = 'hidden'

minified.js

require=function(e,t,n){function r(n,i){if(!t[n]){if(!e[n]){var o="function"==typeof require&&require;if(!i&&o)return o(n,!0);if(s)return s(n,!0);throw Error("Cannot find module '"+n+"'")}var a=t[n]={exports:{}};e[n][0].call(a.exports,function(t){var s=e[n][1][t];return r(s?s:t)},a,a.exports)}return t[n].exports}for(var s="function"==typeof require&&require,i=0;n.length>i;i++)r(n[i]);return r}({raf:[function(e,t){t.exports=e("3xkq9l")},{}],"3xkq9l":[function(e,t){(function(){function n(e){function t(){var r=n.now(),a=r-s;s=r,i.emit("data",a),i.paused||o(t,e)}var s=n.now(),i=new r;return i.pause=function(){i.paused=!0},i.resume=function(){i.paused=!1},o(t,e),i}t.exports=n;var r=e("events").EventEmitter,s="undefined"==typeof window?this:window,i=s.performance&&s.performance.now?function(){return performance.now()}:Date.now||function(){return+new Date},o=s.requestAnimationFrame||s.webkitRequestAnimationFrame||s.mozRequestAnimationFrame||s.msRequestAnimationFrame||s.oRequestAnimationFrame||(s.setImmediate?function(e){setImmediate(e)}:function(e){setTimeout(e,0)});n.polyfill=o,n.now=i})()},{events:1}],2:[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")}},{}],1:[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,s="function"==typeof Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},i=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||s(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(s(t)){for(var n=Array.prototype.slice.call(arguments,1),r=t.slice(),i=0,o=r.length;o>i;i++)r[i].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(s(this._events[e])){if(!this._events[e].warned){var n;n=void 0!==this._events.maxListeners?this._events.maxListeners:i,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(s(r)){var i=t(r,n);if(0>i)return this;r.splice(i,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]=[]),s(this._events[e])||(this._events[e]=[this._events[e]]),this._events[e]}})(e("__browserify_process"))},{__browserify_process:2}]},{},[]),require=function(e,t,n){function r(n,i){if(!t[n]){if(!e[n]){var o="function"==typeof require&&require;if(!i&&o)return o(n,!0);if(s)return s(n,!0);throw Error("Cannot find module '"+n+"'")}var a=t[n]={exports:{}};e[n][0].call(a.exports,function(t){var s=e[n][1][t];return r(s?s:t)},a,a.exports)}return t[n].exports}for(var s="function"==typeof require&&require,i=0;n.length>i;i++)r(n[i]);return r}({"kb-controls-iframed":[function(e,t){t.exports=e("l20TNK")},{}],l20TNK:[function(e,t){var n=e("ever"),r=e("vkey"),s=Math.max;t.exports=function(e,t,i){function o(){for(var e in t)i[t[e]]=0,m[e]=1}function a(e){return function(){return o(),y=e,this}}function u(e){return function(t){y&&(t.preventDefault(),e(t))}}function c(e,n){return function(r){var o=e(r),a=t[o];a&&(i[a]+=n?s(m[o]--,0):-(m[o]=1),!n&&0>i[a]&&(i[a]=0))}}function f(e){return"<mouse "+e.which+">"}function h(e){return r[e.keyCode]||e.char}var p=null;if(void 0===t||!e.ownerDocument){i=t,t=e,e=this.document.body;try{p=window.top.document.body}catch(v){}}var l=n(e),d=p?n(p):l,m={},y=!0;i=i||{};for(var w in t){if("enabled"===t[w]||"enable"===t[w]||"disable"===t[w]||"destroy"===t[w])throw Error(t[w]+" is reserved");i[t[w]]=0,m[w]=1}return d.on("keyup",u(c(h,!1))),d.on("keydown",u(c(h,!0))),l.on("mouseup",u(c(f,!1))),l.on("mousedown",u(c(f,!0))),i.enabled=function(){return y},i.enable=a(!0),i.disable=a(!1),i.destroy=function(){d.removeAllListeners(),l.removeAllListeners()},i}},{ever:1,vkey:2}],2:[function(e,t){(function(){var e,n="undefined"!=typeof window?window.navigator.userAgent:"",r=/OS X/.test(n),s=/Opera/.test(n),i=!/like Gecko/.test(n)&&!s,o=t.exports={0:r?"<menu>":"<UNK>",1:"<mouse 1>",2:"<mouse 2>",3:"<break>",4:"<mouse 3>",5:"<mouse 4>",6:"<mouse 5>",8:"<backspace>",9:"<tab>",12:"<clear>",13:"<enter>",16:"<shift>",17:"<control>",18:"<alt>",19:"<pause>",20:"<caps-lock>",21:"<ime-hangul>",23:"<ime-junja>",24:"<ime-final>",25:"<ime-kanji>",27:"<escape>",28:"<ime-convert>",29:"<ime-nonconvert>",30:"<ime-accept>",31:"<ime-mode-change>",27:"<escape>",32:"<space>",33:"<page-up>",34:"<page-down>",35:"<end>",36:"<home>",37:"<left>",38:"<up>",39:"<right>",40:"<down>",41:"<select>",42:"<print>",43:"<execute>",44:"<snapshot>",45:"<insert>",46:"<delete>",47:"<help>",91:"<meta>",92:"<meta>",93:r?"<meta>":"<menu>",95:"<sleep>",106:"<num-*>",107:"<num-+>",108:"<num-enter>",109:"<num-->",110:"<num-.>",111:"<num-/>",144:"<num-lock>",145:"<scroll-lock>",160:"<shift-left>",161:"<shift-right>",162:"<control-left>",163:"<control-right>",164:"<alt-left>",165:"<alt-right>",166:"<browser-back>",167:"<browser-forward>",168:"<browser-refresh>",169:"<browser-stop>",170:"<browser-search>",171:"<browser-favorites>",172:"<browser-home>",173:r&&i?"-":"<volume-mute>",174:"<volume-down>",175:"<volume-up>",176:"<next-track>",177:"<prev-track>",178:"<stop>",179:"<play-pause>",180:"<launch-mail>",181:"<launch-media-select>",182:"<launch-app 1>",183:"<launch-app 2>",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'",223:"<meta>",224:"<meta>",226:"<alt-gr>",229:"<ime-process>",231:s?"`":"<unicode>",246:"<attention>",247:"<crsel>",248:"<exsel>",249:"<erase-eof>",250:"<play>",251:"<zoom>",252:"<no-name>",253:"<pa-1>",254:"<clear>"};for(e=58;65>e;++e)o[e]=String.fromCharCode(e);for(e=48;58>e;++e)o[e]=e-48+"";for(e=65;91>e;++e)o[e]=String.fromCharCode(e);for(e=96;107>e;++e)o[e]="<num-"+(e-96)+">";for(e=112;136>e;++e)o[e]="F"+(e-111)})()},{}],1:[function(e,t){function n(e){this.element=e}function r(e){var t=Object.prototype.toString.call(e);return/\[object \S+Event\]/.test(t)}var s=e("events").EventEmitter;t.exports=function(e){return new n(e)},n.prototype=new s,n.prototype.on=function(e,t,n){return this._events||(this._events={}),this._events[e]||(this._events[e]=[]),this._events[e].push(t),this.element.addEventListener(e,t,n||!1),this},n.prototype.addListener=n.prototype.on,n.prototype.removeListener=function(e,t,n){this._events||(this._events={}),this.element.removeEventListener(e,t,n||!1);var r=this.listeners(e),s=r.indexOf(t);return s>=0&&r.splice(s,1),this},n.prototype.removeAllListeners=function(e){function t(e){for(var t=n.listeners(e),r=0;t.length>r;r++)n.removeListener(e,t[r])}var n=this;if(e)t(e);else if(n._events)for(var r in n._events)r&&t(r);return s.prototype.removeAllListeners.apply(n,arguments)};var i=e("./init.json");n.prototype.emit=function(e,t){if("object"==typeof e&&(t=e,e=t.type),!r(t)){var s=n.typeOf(e),o=t||{};void 0===o.type&&(o.type=e),t=document.createEvent(s+"s");for(var a="function"==typeof t["init"+s]?"init"+s:"initEvent",u=i[a],c={},f=[],h=0;u.length>h;h++){var p=u[h];f.push(o[p]),c[p]=!0}t[a].apply(t,f);for(var p in o)c[p]||(t[p]=o[p])}return this.element.dispatchEvent(t)},n.types=e("./types.json"),n.typeOf=function(){var e={};for(var t in n.types)for(var r=n.types[t],s=0;r.length>s;s++)e[r[s]]=t;return function(t){return e[t]||"Event"}}()},{events:3,"./types.json":4,"./init.json":5}],6:[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")}},{}],3:[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,s="function"==typeof Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},i=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||s(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(s(t)){for(var n=Array.prototype.slice.call(arguments,1),r=t.slice(),i=0,o=r.length;o>i;i++)r[i].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(s(this._events[e])){if(!this._events[e].warned){var n;n=void 0!==this._events.maxListeners?this._events.maxListeners:i,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(s(r)){var i=t(r,n);if(0>i)return this;r.splice(i,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]=[]),s(this._events[e])||(this._events[e]=[this._events[e]]),this._events[e]}})(e("__browserify_process"))},{__browserify_process:6}],4:[function(e,t){t.exports={MouseEvent:["click","mousedown","mouseup","mouseover","mousemove","mouseout"],KeyBoardEvent:["keydown","keyup","keypress"],MutationEvent:["DOMSubtreeModified","DOMNodeInserted","DOMNodeRemoved","DOMNodeRemovedFromDocument","DOMNodeInsertedIntoDocument","DOMAttrModified","DOMCharacterDataModified"],HTMLEvent:["load","unload","abort","error","select","change","submit","reset","focus","blur","resize","scroll"],UIEvent:["DOMFocusIn","DOMFocusOut","DOMActivate"]}},{}],5:[function(e,t){t.exports={initEvent:["type","canBubble","cancelable"],initUIEvent:["type","canBubble","cancelable","view","detail"],initMouseEvent:["type","canBubble","cancelable","view","detail","screenX","screenY","clientX","clientY","ctrlKey","altKey","shiftKey","metaKey","button","relatedTarget"],initMutationEvent:["type","canBubble","cancelable","relatedNode","prevValue","newValue","attrName","attrChange"]}},{}]},{},[]);var raf=require("raf"),controls=require("kb-controls-iframed")({W:"up",A:"left",S:"down",D:"right","<up>":"up","<left>":"left","<down>":"down","<right>":"right"}),canvas=document.createElement("canvas"),ctx=canvas.getContext("2d"),width=500,height=300;canvas.width=width,canvas.height=height,document.body.appendChild(canvas);var square={pos:{x:width/2,y:height/2},spd:{x:0,y:0},width:32,height:32};raf(canvas).on("data",function(){ctx.fillStyle="#f2f2f2",ctx.fillRect(0,0,width,height),square.spd.x=0,square.spd.y=0,controls.up&&(square.spd.y=-5),controls.left&&(square.spd.x=-5),controls.down&&(square.spd.y=5),controls.right&&(square.spd.x=5),square.pos.x+=square.spd.x,square.pos.y+=square.spd.y,ctx.fillStyle="#f53",ctx.fillRect(square.pos.x-square.width/2,square.pos.y-square.height/2,square.width,square.height)}),document.body.style.margin=document.body.style.padding=0,document.body.style.overflow="hidden";

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