requirebin sketch

index.js

var fit = require('canvas-fit');
var pressed = require('key-pressed');
var collide = require('box-collide');
var clamp = require('clamp');

var ctx = document.querySelector('#c').getContext('2d');
window.addEventListener('resize', fit(ctx.canvas), false);

var entities = [];
var systems = [];

entities.push({
  tags: ['paddle'],
  x: 0,
  y: 0,
  width: 20,
  height: 100
});

entities.push({
  tags: ['ball'],
  x: 100,
  y: 100,
  radius: 10,
  width: -5,
  height: -5,
  vx: 5,
  vy: 5
});

// update paddle position and render
systems.push(function() {
  getEntities(['paddle']).forEach(function (e) {
    if(pressed('<up>')) {
    	e.y -= 10;
    } else if(pressed('<down>')) {
    	e.y += 10;
    }
    
    e.y = clamp(e.y, 0, ctx.canvas.height - e.height);
    ctx.fillRect(e.x, e.y, e.width, e.height);
  });
});

// ball wall interaction
systems.push(function() {
  getEntities(['ball']).forEach(function (e) {
  	if(e.x + e.radius > ctx.canvas.width) e.vx = -Math.abs(e.vx);
    if(e.y + e.radius> ctx.canvas.height) e.vy = -Math.abs(e.vy);;
    if(e.y - e.radius < 0) e.vy = Math.abs(e.vy);
    if(e.x - e.radius < 0) {
    	e.x = randomRange(ctx.canvas.width / 2, ctx.canvas.width);
      e.y = randomRange(ctx.canvas.height / 2, ctx.canvas.height);
    }
  });
});

// ball paddle interaction
systems.push(function() {
  getEntities(['ball']).forEach(function(ball) {
    getEntities(['paddle']).forEach(function(paddle) {
      if(collide(paddle, ball)) {
        ball.vx = Math.abs(ball.vx);
      }
    });
  });
});

// update ball position and render
systems.push(function() {
  getEntities(['ball']).forEach(function (e) {
 		e.x += e.vx;
    e.y += e.vy;

		ctx.beginPath();
    ctx.arc(e.x, e.y, e.radius, 0, 2 * Math.PI, false);
    ctx.fill();
  });
});

// lewp
;(function update() {
	requestAnimationFrame(update);
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  systems.forEach(function(system) {
  	system();
  });
})();

// return all entities matching all tags
function getEntities(tags) {
  return entities.filter(function(e) {
    return tags.every(function(tag) {
    	return e.tags && e.tags.length && e.tags.indexOf(tag) !== -1;
    });
  });
}

function randomRange(min, max) {
	return Math.round((Math.random() * (max - min)) + min)
}

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canMutationObserver=typeof window!=="undefined"&&window.MutationObserver;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}var queue=[];if(canMutationObserver){var hiddenDiv=document.createElement("div");var observer=new MutationObserver(function(){var queueList=queue.slice();queue.length=0;queueList.forEach(function(fn){fn()})});observer.observe(hiddenDiv,{attributes:true});return function nextTick(fn){if(!queue.length){hiddenDiv.setAttribute("yes","no")}queue.push(fn)}}if(canPost){window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],2:[function(require,module,exports){var ua=typeof window!=="undefined"?window.navigator.userAgent:"",isOSX=/OS X/.test(ua),isOpera=/Opera/.test(ua),maybeFirefox=!/like Gecko/.test(ua)&&!isOpera;var i,output=module.exports={0:isOSX?"<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:isOSX?"<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:isOSX&&maybeFirefox?"-":"<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:isOpera?"`":"<unicode>",246:"<attention>",247:"<crsel>",248:"<exsel>",249:"<erase-eof>",250:"<play>",251:"<zoom>",252:"<no-name>",253:"<pa-1>",254:"<clear>"};for(i=58;i<65;++i){output[i]=String.fromCharCode(i)}for(i=48;i<58;++i){output[i]=i-48+""}for(i=65;i<91;++i){output[i]=String.fromCharCode(i)}for(i=96;i<106;++i){output[i]="<num-"+(i-96)+">"}for(i=112;i<136;++i){output[i]="F"+(i-111)}},{}],"key-pressed":[function(require,module,exports){(function(process){var keys=require("vkey");var list=Object.keys(keys);var down={};reset();module.exports=pressed;if(process.browser){window.addEventListener("keydown",keydown,false);window.addEventListener("keyup",keyup,false);window.addEventListener("blur",reset,false)}function pressed(key){return key?down[key]:down}function reset(){list.forEach(function(code){down[keys[code]]=false})}function keyup(e){down[keys[e.keyCode]]=false}function keydown(e){down[keys[e.keyCode]]=true}}).call(this,require("_process"))},{_process:1,vkey:2}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"box-collide":[function(require,module,exports){module.exports=function(ra,rb){var a=norm(ra),b=norm(rb);var inx=isect(a.left,b.left,b.right)||isect(a.right,b.left,b.right)||inside(a.left,a.right,b.left,b.right)||inside(b.left,b.right,a.left,a.right);var iny=isect(a.top,b.top,b.bottom)||isect(a.bottom,b.top,b.bottom)||inside(a.top,a.bottom,b.top,b.bottom)||inside(b.top,b.bottom,a.top,a.bottom);return inx&&iny};function isect(x,lower,upper){return x>=lower&&x<=upper}function inside(a0,a1,b0,b1){return a0>=b0&&a1<=b1}function norm(q){var p={left:q.left,right:q.right,top:q.top,bottom:q.bottom};if(p.left===undefined&&q.x!==undefined)p.left=q.x;if(p.top===undefined&&q.y!==undefined)p.top=q.y;var w=q.width||0,h=q.height||0;if(p.right===undefined&&q.x!==undefined)p.right=q.x+w;if(p.bottom===undefined&&q.y!==undefined)p.bottom=q.y+h;return p}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({clamp:[function(require,module,exports){module.exports=clamp;function clamp(value,min,max){return min<max?value<min?min:value>max?max:value:value<max?max:value>min?min:value}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=getSize;function getSize(element){if(element===window||element===document.body){return[window.innerWidth,window.innerHeight]}if(!element.parentNode){var temporary=true;document.body.appendChild(element)}var bounds=element.getBoundingClientRect();var styles=getComputedStyle(element);var height=(bounds.height|0)+parse(styles.getPropertyValue("margin-top"))+parse(styles.getPropertyValue("margin-bottom"));var width=(bounds.width|0)+parse(styles.getPropertyValue("margin-left"))+parse(styles.getPropertyValue("margin-right"));if(temporary){document.body.removeChild(element)}return[width,height]}function parse(prop){return parseFloat(prop)||0}},{}],"canvas-fit":[function(require,module,exports){var size=require("element-size");module.exports=fit;function fit(canvas,parent,scale){canvas.style.position=canvas.style.position||"absolute";canvas.style.top=0;canvas.style.left=0;scale=parseFloat(scale||1);return resize();function resize(){var p=parent||canvas.parentNode;if(p&&p!==document.body){var psize=size(p);var width=psize[0]|0;var height=psize[1]|0}else{var width=window.innerWidth;var height=window.innerHeight}canvas.width=width*scale;canvas.height=height*scale;canvas.style.width=width+"px";canvas.style.height=height+"px";return resize}}},{"element-size":1}]},{},[]);var fit=require("canvas-fit");var pressed=require("key-pressed");var collide=require("box-collide");var clamp=require("clamp");var ctx=document.querySelector("#c").getContext("2d");window.addEventListener("resize",fit(ctx.canvas),false);var entities=[];var systems=[];entities.push({tags:["paddle"],x:0,y:0,width:20,height:100});entities.push({tags:["ball"],x:100,y:100,radius:10,width:-5,height:-5,vx:5,vy:5});systems.push(function(){getEntities(["paddle"]).forEach(function(e){if(pressed("<up>")){e.y-=10}else if(pressed("<down>")){e.y+=10}e.y=clamp(e.y,0,ctx.canvas.height-e.height);ctx.fillRect(e.x,e.y,e.width,e.height)})});systems.push(function(){getEntities(["ball"]).forEach(function(e){if(e.x+e.radius>ctx.canvas.width)e.vx=-Math.abs(e.vx);if(e.y+e.radius>ctx.canvas.height)e.vy=-Math.abs(e.vy);if(e.y-e.radius<0)e.vy=Math.abs(e.vy);if(e.x-e.radius<0){e.x=randomRange(ctx.canvas.width/2,ctx.canvas.width);e.y=randomRange(ctx.canvas.height/2,ctx.canvas.height)}})});systems.push(function(){getEntities(["ball"]).forEach(function(ball){getEntities(["paddle"]).forEach(function(paddle){if(collide(paddle,ball)){ball.vx=Math.abs(ball.vx)}})})});systems.push(function(){getEntities(["ball"]).forEach(function(e){e.x+=e.vx;e.y+=e.vy;ctx.beginPath();ctx.arc(e.x,e.y,e.radius,0,2*Math.PI,false);ctx.fill()})});(function update(){requestAnimationFrame(update);ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);systems.forEach(function(system){system()})})();function getEntities(tags){return entities.filter(function(e){return tags.every(function(tag){return e.tags&&e.tags.length&&e.tags.indexOf(tag)!==-1})})}function randomRange(min,max){return Math.round(Math.random()*(max-min)+min)}

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "key-pressed": "0.0.1",
    "box-collide": "1.0.2",
    "clamp": "1.0.1",
    "canvas-fit": "1.2.0"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->
<canvas id="c"></canvas>

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin