joy.min.js

/*
 * @author Roberto D'Amico (Bobboteck) https://github.com/bobboteck/JoyStick/blob/master/joy.js
 */
let StickStatus={xPosition:0,yPosition:0,x:0,y:0,cardinalDirection:"C"};var JoyStick=function(t,e,i){var o=void 0===(e=e||{}).title?"joystick":e.title,n=void 0===e.width?0:e.width,a=void 0===e.height?0:e.height,r=void 0===e.internalFillColor?"#00AA00":e.internalFillColor,c=void 0===e.internalLineWidth?2:e.internalLineWidth,s=void 0===e.internalStrokeColor?"#003300":e.internalStrokeColor,d=void 0===e.externalLineWidth?2:e.externalLineWidth,u=void 0===e.externalStrokeColor?"#008000":e.externalStrokeColor,h=void 0===e.autoReturnToCenter||e.autoReturnToCenter;i=i||function(t){};var S=document.getElementById(t);S.style.touchAction="none";var f=document.createElement("canvas");f.id=o,0===n&&(n=S.clientWidth),0===a&&(a=S.clientHeight),f.width=n,f.height=a,S.appendChild(f);var l=f.getContext("2d"),k=0,g=2*Math.PI,x=(f.width-(f.width/2+10))/2,v=x+5,P=x+30,C=f.width/2,p=f.height/2,y=f.width/10,m=-1*y,w=f.height/10,L=-1*w,F=C,T=p;function E(){l.beginPath(),l.arc(C,p,P,0,g,!1),l.lineWidth=d,l.strokeStyle=u,l.stroke()}function W(){l.beginPath(),F<x&&(F=v),F+x>f.width&&(F=f.width-v),T<x&&(T=v),T+x>f.height&&(T=f.height-v),l.arc(F,T,x,0,g,!1);var t=l.createRadialGradient(C,p,5,C,p,200);t.addColorStop(0,r),t.addColorStop(1,s),l.fillStyle=t,l.fill(),l.lineWidth=c,l.strokeStyle=s,l.stroke()}f.addEventListener("touchstart",(function(t){k=1,D=t.targetTouches[0].identifier}),!1),document.addEventListener("touchmove",(function(t){1===k&&t.targetTouches[0].target===f&&(F=t.targetTouches[0].pageX,T=t.targetTouches[0].pageY,"BODY"===f.offsetParent.tagName.toUpperCase()?(F-=f.offsetLeft,T-=f.offsetTop):(F-=f.offsetParent.offsetLeft,T-=f.offsetParent.offsetTop),l.clearRect(0,0,f.width,f.height),E(),W(),StickStatus.xPosition=F,StickStatus.yPosition=T,StickStatus.x=((F-C)/v*100).toFixed(),StickStatus.y=((T-p)/v*100*-1).toFixed(),StickStatus.cardinalDirection=G(),i(StickStatus))}),!1),document.addEventListener("touchend",(function(t){if(t.changedTouches[0].identifier!==D)return;k=0,h&&(F=C,T=p);l.clearRect(0,0,f.width,f.height),E(),W(),StickStatus.xPosition=F,StickStatus.yPosition=T,StickStatus.x=((F-C)/v*100).toFixed(),StickStatus.y=((T-p)/v*100*-1).toFixed(),StickStatus.cardinalDirection=G(),i(StickStatus)}),!1),f.addEventListener("mousedown",(function(t){k=1}),!1),document.addEventListener("mousemove",(function(t){1===k&&(F=t.pageX,T=t.pageY,"BODY"===f.offsetParent.tagName.toUpperCase()?(F-=f.offsetLeft,T-=f.offsetTop):(F-=f.offsetParent.offsetLeft,T-=f.offsetParent.offsetTop),l.clearRect(0,0,f.width,f.height),E(),W(),StickStatus.xPosition=F,StickStatus.yPosition=T,StickStatus.x=((F-C)/v*100).toFixed(),StickStatus.y=((T-p)/v*100*-1).toFixed(),StickStatus.cardinalDirection=G(),i(StickStatus))}),!1),document.addEventListener("mouseup",(function(t){k=0,h&&(F=C,T=p);l.clearRect(0,0,f.width,f.height),E(),W(),StickStatus.xPosition=F,StickStatus.yPosition=T,StickStatus.x=((F-C)/v*100).toFixed(),StickStatus.y=((T-p)/v*100*-1).toFixed(),StickStatus.cardinalDirection=G(),i(StickStatus)}),!1),E(),W();let D=null;function G(){let t="",e=F-C,i=T-p;return i>=L&&i<=w&&(t="C"),i<L&&(t="N"),i>w&&(t="S"),e<m&&("C"===t?t="W":t+="W"),e>y&&("C"===t?t="E":t+="E"),t}this.GetWidth=function(){return f.width},this.GetHeight=function(){return f.height},this.GetPosX=function(){return F},this.GetPosY=function(){return T},this.GetX=function(){return((F-C)/v*100).toFixed()},this.GetY=function(){return((T-p)/v*100*-1).toFixed()},this.GetDir=function(){return G()}};