gamecontroller.min.js

!function(t){"use strict";function e(t,i){var o,s,n,a,r=i,h=1,c=!0;if("boolean"==typeof t&&(c=t,h=2),"object"!=typeof t&&"function"!=typeof t&&(t={}),!r)return t;for(o in r)i=t[o],s=r[o],t!==s&&(n=Array.isArray(s),c&&("object"==typeof s||n)?(a=n?i&&Array.isArray(i)?i:[]:i&&"object"==typeof i?i:{},t[o]=e(a,s)):"undefined"!=typeof s&&(t[o]=s));return t}var i,o,s=2*Math.PI,n={}.hasOwnProperty,a=function(t,e){function i(){this.constructor=t}for(var o in e)n.call(e,o)&&(t[o]=e[o]);return i.prototype=e.prototype,t.prototype=new i,t.__super__=e.prototype,t},r=t.GameController={options:{left:{type:"dpad",position:{left:"13%",bottom:"22%"},dpad:{up:{width:"7%",height:"15%",stroke:2,touchStart:function(){r.simulateKeyEvent("press",38),r.simulateKeyEvent("down",38)},touchEnd:function(){r.simulateKeyEvent("up",38)}},left:{width:"15%",height:"7%",stroke:2,touchStart:function(){r.simulateKeyEvent("press",37),r.simulateKeyEvent("down",37)},touchEnd:function(){r.simulateKeyEvent("up",37)}},down:{width:"7%",height:"15%",stroke:2,touchStart:function(){r.simulateKeyEvent("press",40),r.simulateKeyEvent("down",40)},touchEnd:function(){r.simulateKeyEvent("up",40)}},right:{width:"15%",height:"7%",stroke:2,touchStart:function(){r.simulateKeyEvent("press",39),r.simulateKeyEvent("down",39)},touchEnd:function(){r.simulateKeyEvent("up",39)}}},joystick:{radius:60,touchMove:function(t){console.log(t)}}},right:{type:"buttons",position:{right:"17%",bottom:"28%"},buttons:[{offset:{x:"-13%",y:0},label:"X",radius:"7%",stroke:2,backgroundColor:"blue",fontColor:"#fff",touchStart:function(){r.simulateKeyEvent("press",88),r.simulateKeyEvent("down",88)},touchEnd:function(){r.simulateKeyEvent("up",88)}},{offset:{x:0,y:"-11%"},label:"Y",radius:"7%",stroke:2,backgroundColor:"yellow",fontColor:"#fff",touchStart:function(){r.simulateKeyEvent("press",70),r.simulateKeyEvent("down",70)},touchEnd:function(){r.simulateKeyEvent("up",70)}},{offset:{x:"13%",y:0},label:"B",radius:"7%",stroke:2,backgroundColor:"red",fontColor:"#fff",touchStart:function(){r.simulateKeyEvent("press",90),r.simulateKeyEvent("down",90)},touchEnd:function(){r.simulateKeyEvent("up",90)}},{offset:{x:0,y:"11%"},label:"A",radius:"7%",stroke:2,backgroundColor:"green",fontColor:"#fff",touchStart:function(){r.simulateKeyEvent("press",67),r.simulateKeyEvent("down",67)},touchEnd:function(){r.simulateKeyEvent("up",67)}}],dpad:{up:{width:"7%",height:"15%",stroke:2},left:{width:"15%",height:"7%",stroke:2},down:{width:"7%",height:"15%",stroke:2},right:{width:"15%",height:"7%",stroke:2}},joystick:{radius:60,touchMove:function(t){console.log(t)}}},touchRadius:45},touchableAreas:[],touchableAreasCount:0,touches:[],offsetX:0,offsetY:0,bound:{left:!1,right:!1,top:!1,bottom:!1},cachedSprites:{},paused:!1,init:function(t){t=t||{},e(this.options,t);var i=navigator.userAgent.toLowerCase(),o=function(t){return-1!==i.indexOf(t)};this.performanceFriendly=["iphone","android"].filter(o)[0]||this.options.forcePerformanceFriendly;var s=document.getElementById(this.options.canvas);this.options.canvas&&s?s&&(this.options.canvas=s):this.options.canvas=document.getElementsByTagName("canvas")[0],this.options.ctx=this.options.canvas.getContext("2d"),this.createOverlayCanvas()},boundingSet:function(t){var e,i,o,s;if(t.width)e=this.getPixels(t.width),i=this.getPixels(t.height),o=this.getPixels(t.x),s=this.getPixels(t.y);else{var n=this.options.touchRadius?2*this.getPixels(t.radius)+this.getPixels(this.options.touchRadius)/2:t.radius;e=i=2*(n+this.getPixels(t.stroke)),o=this.getPixels(t.x)-e/2,s=this.getPixels(t.y)-i/2}var a=o+e,r=s+i;(!this.bound.left||o<this.bound.left)&&(this.bound.left=o),(!this.bound.right||a>this.bound.right)&&(this.bound.right=a),(!this.bound.top||s<this.bound.top)&&(this.bound.top=s),(!this.bound.bottom||r>this.bound.bottom)&&(this.bound.bottom=r)},createOverlayCanvas:function(){var t=this;this.canvas=document.createElement("canvas"),this.resize(!0),document.body.appendChild(this.canvas),this.ctx=this.canvas.getContext("2d"),window.addEventListener("resize",function(){setTimeout(function(){r.resize.call(t)},10)}),this.setTouchEvents(),this.loadSide("left"),this.loadSide("right"),this.render(),this.touches&&this.touches.length||(this.paused=!0)},pixelRatio:1,resize:function(t){var e=r.options.canvas,i=this.options.canvas;this.canvas.width=i.width,this.canvas.height=i.height,this.offsetX=e.offsetLeft+document.body.scrollLeft,this.offsetY=e.offsetTop+document.body.scrollTop,i.style.width&&i.style.height&&-1!==i.style.height.indexOf("px")&&(this.canvas.style.width=i.style.width,this.canvas.style.height=i.style.height,this.pixelRatio=this.canvas.width/parseInt(this.canvas.style.width,10)),this.canvas.style.position="absolute",this.canvas.style.zIndex="5",this.canvas.style.left=i.offsetLeft+"px",this.canvas.style.top=i.offsetTop+"px";var o=this.canvas.getAttribute("style")+" -ms-touch-action: none;";this.canvas.setAttribute("style",o),t||(this.touchableAreas=[],this.cachedSprites=[],this.reloadSide("left"),this.reloadSide("right"))},getPixels:function(t,e){return t?"number"==typeof t?t:parseInt(t,10)/100*("x"===e?this.canvas.width:this.canvas.height):0},simulateKeyEvent:function(t,e){if("undefined"==typeof window.onkeydown)return!1;var i=document.createEvent("KeyboardEvent");-1!==navigator.userAgent.toLowerCase().indexOf("chrome")&&(Object.defineProperty(i,"keyCode",{get:function(){return this.keyCodeVal}}),Object.defineProperty(i,"which",{get:function(){return this.keyCodeVal}}));var o=i.initKeyboardEvent||i.initKeyEvent;o.call(i,"key"+t,!0,!0,document.defaultView,!1,!1,!1,!1,e,e),i.keyCodeVal=e},setTouchEvents:function(){var t=this,e=function(e){window.navigator.msPointerEnabled&&e.clientX&&e.pointerType===e.MSPOINTER_TYPE_TOUCH?t.touches[e.pointerId]={clientX:e.clientX,clientY:e.clientY}:t.touches=e.touches||[]},i=function(i){t.paused&&(t.paused=!1),i.preventDefault(),e(i)},o=function(e){e.preventDefault(),window.navigator.msPointerEnabled&&e.pointerType===e.MSPOINTER_TYPE_TOUCH?delete t.touches[e.pointerId]:t.touches=e.touches||[],e.touches&&e.touches.length||(t.render(),t.paused=!0)},s=function(t){t.preventDefault(),e(t)};this.canvas.addEventListener("touchstart",i,!1),this.canvas.addEventListener("touchend",o),this.canvas.addEventListener("touchmove",s),window.navigator.msPointerEnabled&&(this.canvas.addEventListener("MSPointerDown",i),this.canvas.addEventListener("MSPointerUp",o),this.canvas.addEventListener("MSPointerMove",s))},addTouchableDirection:function(t){var e=new c(t);e.id=this.touchableAreas.push(e),this.touchableAreasCount++,this.boundingSet(t)},addJoystick:function(t){var e=new u(t);e.id=this.touchableAreas.push(e),this.touchableAreasCount++,this.boundingSet(t)},addButton:function(t){var e=new d(t);e.id=this.touchableAreas.push(e),this.touchableAreasCount++,this.boundingSet(t)},addTouchableArea:function(){},loadButtons:function(t){for(var e=this.options[t].buttons,i=0,o=e.length;o>i;i++)if(e[i]&&"undefined"!=typeof e[i].offset){var s=this.getPositionX(t),n=this.getPositionY(t);e[i].x=s+this.getPixels(e[i].offset.x,"y"),e[i].y=n+this.getPixels(e[i].offset.y,"y"),this.addButton(e[i])}},loadDPad:function(t){var e=this.options[t].dpad||{},i=this.getPositionX(t),o=this.getPositionY(t);if(e.up&&e.left&&e.down&&e.right){var s={x:i,y:o,radius:e.right.height},n=new l(s);this.touchableAreas.push(n),this.touchableAreasCount++}var a=this.getPixels(e.left.height,"y")/2,r=this.getPixels(e.up.width,"y")/2;e.up||(e.up.x=i-r,e.up.y=o-this.getPixels(e.up.height,"y")-a,e.up.direction="up",this.addTouchableDirection(e.up)),e.left||(e.left.x=i-this.getPixels(e.left.width,"y")-r,e.left.y=o-a,e.left.direction="left",this.addTouchableDirection(e.left)),e.down||(e.down.x=i-this.getPixels(e.down.width,"y")/2,e.down.y=o+a,e.down.direction="down",this.addTouchableDirection(e.down)),e.right||(e.right.x=i+r,e.right.y=o-this.getPixels(e.right.height,"y")/2,e.right.direction="right",this.addTouchableDirection(e.right))},loadJoystick:function(t){var e=this.options[t].joystick;e.x=this.getPositionX(t),e.y=this.getPositionY(t),this.addJoystick(e)},reloadSide:function(t){this.loadSide(t)},loadSide:function(t){var e=this.options[t];"dpad"===e.type?this.loadDPad(t):"joystick"===e.type?this.loadJoystick(t):"buttons"===e.type&&this.loadButtons(t)},normalizeTouchPositionX:function(t){return(t-this.offsetX)*this.pixelRatio},normalizeTouchPositionY:function(t){return(t-this.offsetY)*this.pixelRatio},getXFromRight:function(t){return this.canvas.width-t},getYFromBottom:function(t){return this.canvas.height-t},getPositionX:function(t){var e=this.options[t].position;return"undefined"!=typeof e.left?this.getPixels(e.left,"x"):this.getXFromRight(this.getPixels(e.right,"x"))},getPositionY:function(t){var e=this.options[t].position;return"undefined"!=typeof e.top?this.getPixels(e.top,"y"):this.getYFromBottom(this.getPixels(e.bottom,"y"))},renderAreas:function(){for(var t=0,e=this.touchableAreasCount;e>t;t++){var i=this.touchableAreas[t];if("undefined"!=typeof i){i.draw();for(var o=!1,s=0,n=this.touches.length;n>s;s++){var a=this.touches[s];if("undefined"!=typeof a){var r=this.normalizeTouchPositionX(a.clientX),h=this.normalizeTouchPositionY(a.clientY);i.check(r,h)&&!o&&(o=this.touches[s])}}o?(i.active||i.touchStartWrapper(o),i.touchMoveWrapper(o)):i.active&&i.touchEndWrapper(o)}}},render:function(){var t=this.bound;if(this.paused&&this.performanceFriendly||this.ctx.clearRect(t.left,t.top,t.right-t.left,t.bottom-t.top),!this.paused&&!this.performanceFriendly){var e="touch-circle",o=this.cachedSprites[e],n=this.options.touchRadius;if(!o&&n){var a=document.createElement("canvas"),h=a.getContext("2d");a.width=2*n,a.height=2*n;var c=n,d=h.createRadialGradient(c,c,1,c,c,c);d.addColorStop(0,"rgba( 200, 200, 200, 1 )"),d.addColorStop(1,"rgba( 200, 200, 200, 0 )"),h.beginPath(),h.fillStyle=d,h.arc(c,c,c,0,s,!1),h.fill(),o=r.cachedSprites[e]=a}for(var u=0,l=this.touches.length;l>u;u++){var p=this.touches[u];if("undefined"!=typeof p){var f=this.normalizeTouchPositionX(p.clientX),y=this.normalizeTouchPositionY(p.clientY);f-n>this.bound.left&&f+n<this.bound.right&&y-n>this.bound.top&&y+n<this.bound.bottom&&this.ctx.drawImage(o,f-n,y-n)}}}this.paused&&this.performanceFriendly||this.renderAreas(),i(this.renderWrapper)},renderWrapper:function(){r.render()}},h=function(){function t(){}return t.prototype.touchStart=null,t.prototype.touchMove=null,t.prototype.touchEnd=null,t.prototype.type="area",t.prototype.id=!1,t.prototype.active=!1,t.prototype.setTouchStart=function(t){this.touchStart=t},t.prototype.touchStartWrapper=function(){this.touchStart&&this.touchStart(),this.active=!0},t.prototype.setTouchMove=function(t){this.touchMove=t},t.prototype.lastPosX=0,t.prototype.lastPosY=0,t.prototype.touchMoveWrapper=function(e){!this.touchMove||e.clientX===t.prototype.lastPosX&&e.clientY===t.prototype.lastPosY||(this.touchMove(),this.lastPosX=e.clientX,this.lastPosY=e.clientY),this.active=!0},t.prototype.setTouchEnd=function(t){this.touchEnd=t},t.prototype.touchEndWrapper=function(){this.touchEnd&&this.touchEnd(),this.active=!1,r.render()},t}(),c=function(t){function e(t){for(var e in t)this[e]="x"===e?r.getPixels(t[e],"x"):"y"===e||"height"===e||"width"===e?r.getPixels(t[e],"y"):t[e];this.draw()}return a(e,t),e.prototype.type="direction",e.prototype.check=function(t,e){var i=r.options.touchRadius/2;return(Math.abs(t-this.x)<i||t>this.x)&&(Math.abs(t-this.x-this.width)<i||t<this.x+this.width)&&(Math.abs(e-this.y)<i||e>this.y)&&(Math.abs(e-this.y-this.height)<i||e<this.y+this.height)},e.prototype.draw=function(){var t,e=this.type+""+this.id+this.active,i=r.cachedSprites[e];if(!i){var o=document.createElement("canvas"),s=o.getContext("2d");o.width=this.width+2*this.stroke,o.height=this.height+2*this.stroke;var n=this.opacity||.9;switch(this.active||(n*=.5),this.direction){case"up":t=s.createLinearGradient(0,0,0,this.height),t.addColorStop(0,"rgba(0, 0, 0, "+.5*n+")"),t.addColorStop(1,"rgba(0, 0, 0, "+n+")");break;case"left":t=s.createLinearGradient(0,0,this.width,0),t.addColorStop(0,"rgba(0, 0, 0, "+.5*n+")"),t.addColorStop(1,"rgba(0, 0, 0, "+n+")");break;case"right":t=s.createLinearGradient(0,0,this.width,0),t.addColorStop(0,"rgba(0, 0, 0, "+n+")"),t.addColorStop(1,"rgba(0, 0, 0, "+.5*n+")");break;default:case"down":t=s.createLinearGradient(0,0,0,this.height),t.addColorStop(0,"rgba(0, 0, 0, "+n+")"),t.addColorStop(1,"rgba(0, 0, 0, "+.5*n+")")}s.fillStyle=t,s.fillRect(0,0,this.width,this.height),s.lineWidth=this.stroke,s.strokeStyle="rgba(255, 255, 255, 0.1)",s.strokeRect(0,0,this.width,this.height),i=r.cachedSprites[e]=o}r.ctx.drawImage(i,this.x,this.y)},e}(h),d=function(t){function e(t){for(var e in t)this[e]="x"===e?r.getPixels(t[e],"x"):"y"===e||"radius"===e?r.getPixels(t[e],"y"):t[e];this.draw()}return a(e,t),e.prototype.type="button",e.prototype.check=function(t,e){var i=this.radius+r.options.touchRadius/2;return Math.abs(t-this.x)<i&&Math.abs(e-this.y)<i},e.prototype.draw=function(){var t=this.type+""+this.id+this.active,e=r.cachedSprites[t],i=this.radius;if(!e){var o=document.createElement("canvas"),n=o.getContext("2d");n.lineWidth=this.stroke,o.width=o.height=2*(i+n.lineWidth);var a,h=n.createRadialGradient(i,i,1,i,i,i);switch(this.backgroundColor){case"blue":h.addColorStop(0,"rgba(123, 181, 197, 0.6)"),h.addColorStop(1,"#105a78"),a="#0A4861";break;case"green":h.addColorStop(0,"rgba(29, 201, 36, 0.6)"),h.addColorStop(1,"#107814"),a="#085C0B";break;case"red":h.addColorStop(0,"rgba(165, 34, 34, 0.6)"),h.addColorStop(1,"#520101"),a="#330000";break;case"yellow":h.addColorStop(0,"rgba(219, 217, 59, 0.6)"),h.addColorStop(1,"#E8E10E"),a="#BDB600";break;default:case"white":h.addColorStop(0,"rgba( 255,255,255,.3 )"),h.addColorStop(1,"#eee")}n.fillStyle=this.active?a:h,n.strokeStyle=a,n.beginPath();var c=o.width/2;if(n.arc(c,c,i,0,s,!1),n.fill(),n.stroke(),this.label){var d=this.fontSize||.35*o.height,u=o.height/2;n.fillStyle=a,n.font="bold "+d+"px Verdana",n.textAlign="center",n.textBaseline="middle",n.fillText(this.label,u+2,u+2),n.fillStyle=this.fontColor,n.fillText(this.label,u,u)}e=r.cachedSprites[t]=o}r.ctx.drawImage(e,this.x,this.y)},e}(h),u=function(t){function e(t){for(var e in t)this[e]=t[e];this.currentX=this.currentX||this.x,this.currentY=this.currentY||this.y}return a(e,t),e.prototype.type="joystick",e.prototype.check=function(t,e){var i=this.radius+r.getPixels(r.options.touchRadius)/2;return Math.abs(t-this.x)<i&&Math.abs(e-this.y)<i},e.prototype.moveDetails={},e.prototype.touchMoveWrapper=function(t){this.currentX=r.normalizeTouchPositionX(t.clientX),this.currentY=r.normalizeTouchPositionY(t.clientY),this.touchMove&&this.moveDetails.dx!==this.currentX-this.x&&this.moveDetails.dy!==this.y-this.currentY&&(this.moveDetails.dx=this.currentX-this.x,this.moveDetails.dy=this.y-this.currentY,this.moveDetails.max=this.radius+r.options.touchRadius/2,this.moveDetails.normalizedX=this.moveDetails.dx/this.moveDetails.max,this.moveDetails.normalizedY=this.moveDetails.dy/this.moveDetails.max,this.touchMove(this.moveDetails)),this.active=!0},e.prototype.draw=function(){if(!this.id)return!1;var t,e,i=this.type+""+this.id+this.active,o=r.cachedSprites[i],n=this.radius;if(!o){var a=document.createElement("canvas");this.stroke=this.stroke||2,a.width=a.height=2*(this.radius+r.options.touchRadius+this.stroke),e=a.getContext("2d"),e.lineWidth=this.stroke,this.active?(t=e.createRadialGradient(0,0,1,0,0,n),t.addColorStop(0,"rgba( 200,200,200,.5 )"),t.addColorStop(1,"rgba( 200,200,200,.9 )"),e.strokeStyle="#000"):(t=e.createRadialGradient(0,0,1,0,0,n),t.addColorStop(0,"rgba( 200,200,200,.2 )"),t.addColorStop(1,"rgba( 200,200,200,.4 )"),e.strokeStyle="rgba( 0,0,0,.4 )"),e.fillStyle=t,e.beginPath(),e.arc(n,n,n,0,s,!1),e.fill(),e.stroke(),o=r.cachedSprites[i]=a}e=r.ctx,e.fillStyle="#444",e.beginPath(),e.arc(this.x,this.y,.7*n,0,s,!1),e.fill(),e.stroke(),e.drawImage(o,this.currentX-n,this.currentY-n)},e}(h),l=function(t){function e(t){for(var e in t)this[e]="x"===e?r.getPixels(t[e],"x"):"y"===e||"radius"===e?r.getPixels(t[e],"y"):t[e];this.draw()}return a(e,t),e.prototype.check=function(){return!1},e.prototype.draw=function(){r.ctx.fillStyle="rgba(0, 0, 0, 0.5)",r.ctx.beginPath(),r.ctx.arc(this.x,this.y,this.radius,0,s,!1),r.ctx.fill()},e}(h);!function(){if("undefined"==typeof module){var t=0,e=["ms","moz","webkit","o"];i=window.requestAnimationFrame,o=window.cancelAnimationFrame;for(var s=0;s<e.length&&!i;++s)i=window[e[s]+"RequestAnimationFrame"],o=window[e[s]+"CancelAnimationFrame"]||window[e[s]+"CancelRequestAnimationFrame"];i||(i=function(e){var i=Date.now(),o=Math.max(10,16-i+t);return t=i+o,window.setTimeout(function(){e(i+o)},o)}),o||(o=function(t){clearTimeout(t)})}}()}("undefined"!=typeof module?module.exports:window);