2 lines
3.7 KiB
JavaScript
2 lines
3.7 KiB
JavaScript
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-1cbf3c12"],{"2ff9":function(t,i,e){},"87c4":function(t,i,e){},"8cb4":function(t,i,e){"use strict";e("2ff9")},"9df7":function(t,i,e){"use strict";e("87c4")},c9e8:function(t,i,e){"use strict";e.r(i);var s=function(){var t=this,i=t._self._c;return i("div",{staticClass:"game-container"},[i("VirtualJoystick",{attrs:{size:200,stickSize:80},on:{move:t.handleJoystickMove,stop:t.handleJoystickStop}}),i("div",{staticClass:"joystick-info"},[i("p",[t._v("方向: "+t._s(t.direction))]),i("p",[t._v("X: "+t._s(t.x.toFixed(2)))]),i("p",[t._v("Y: "+t._s(t.y.toFixed(2)))]),i("p",[t._v("角度: "+t._s(t.angle.toFixed(0))+"°")]),i("p",[t._v("力度: "+t._s((100*t.distance).toFixed(0))+"%")])])],1)},n=[],o=function(){var t=this,i=t._self._c;return i("div",{staticClass:"joystick-container",style:{width:t.size+"px",height:t.size+"px"},on:{mousedown:t.startControl,touchstart:t.startControl,mouseleave:t.endControl,touchend:t.endControl,touchcancel:t.endControl}},[i("div",{staticClass:"joystick-base rounded-full bg-gray-300/50 absolute inset-0 flex items-center justify-center"}),i("div",{staticClass:"joystick-stick rounded-full bg-blue-500 shadow-lg flex items-center justify-center text-white font-bold",style:{width:t.stickSize+"px",height:t.stickSize+"px",left:t.stickPosition.x+"px",top:t.stickPosition.y+"px",transform:t.isActive?"":"translate(-50%, -50%)"},on:{mousemove:t.moveControl,touchmove:t.moveControl}},[t._t("default",(function(){return[t._v("操作")]}))],2)])},c=[],a={name:"VirtualJoystick",props:{size:{type:Number,default:200},stickSize:{type:Number,default:80},maxRadiusRatio:{type:Number,default:.8}},data(){return{isActive:!1,stickPosition:{x:0,y:0},center:{x:0,y:0},maxRadius:0}},mounted(){this.center.x=this.size/2,this.center.y=this.size/2,this.maxRadius=this.size/2*this.maxRadiusRatio,this.stickPosition.x=this.center.x-this.stickSize/2,this.stickPosition.y=this.center.y-this.stickSize/2},methods:{startControl(t){t.preventDefault(),this.isActive=!0,this.moveControl(t)},moveControl(t){if(!this.isActive)return;let i,e;t.preventDefault(),t.type.includes("mouse")?(i=t.clientX,e=t.clientY):(i=t.touches[0].clientX,e=t.touches[0].clientY);const s=this.$el.getBoundingClientRect();let n=i-s.left,o=e-s.top,c=n-this.center.x,a=o-this.center.y,r=Math.sqrt(c*c+a*a);const h=180*Math.atan2(a,c)/Math.PI;r>this.maxRadius&&(r=this.maxRadius,n=this.center.x+Math.cos(h*Math.PI/180)*r,o=this.center.y+Math.sin(h*Math.PI/180)*r,c=n-this.center.x,a=o-this.center.y),this.stickPosition.x=n-this.stickSize/2,this.stickPosition.y=o-this.stickSize/2;const l=c/this.maxRadius,u=a/this.maxRadius,d=this.getDirection(h);this.$emit("move",{x:l,y:u,angle:h,distance:r/this.maxRadius,direction:d})},endControl(t){t.preventDefault(),this.isActive&&(this.isActive=!1,this.stickPosition.x=this.center.x-this.stickSize/2,this.stickPosition.y=this.center.y-this.stickSize/2,this.$emit("stop",{x:0,y:0,angle:0,distance:0,direction:"center"}))},getDirection(t){const i=(t%360+360)%360;return i>=337.5||i<22.5?"right":i>=22.5&&i<67.5?"up-right":i>=67.5&&i<112.5?"up":i>=112.5&&i<157.5?"up-left":i>=157.5&&i<202.5?"left":i>=202.5&&i<247.5?"down-left":i>=247.5&&i<292.5?"down":i>=292.5&&i<337.5?"down-right":"center"}}},r=a,h=(e("8cb4"),e("2877")),l=Object(h["a"])(r,o,c,!1,null,"0c54fa24",null),u=l.exports,d={components:{VirtualJoystick:u},data(){return{x:0,y:0,angle:0,distance:0,direction:"center"}},methods:{handleJoystickMove(t){this.x=t.x,this.y=t.y,this.angle=t.angle,this.distance=t.distance,this.direction=t.direction},handleJoystickStop(t){this.x=t.x,this.y=t.y,this.angle=t.angle,this.distance=t.distance,this.direction=t.direction}}},x=d,f=(e("9df7"),Object(h["a"])(x,s,n,!1,null,null,null));i["default"]=f.exports}}]);
|
|
//# sourceMappingURL=chunk-1cbf3c12.fe98d47e.js.map
|