|
@@ -5,23 +5,22 @@ export default class JoyStick {
|
|
|
this._room = e
|
|
|
}
|
|
|
init(e) {
|
|
|
- const {interval: t=33, triggerDistance: r=25, style: n={
|
|
|
- left: 0,
|
|
|
- bottom: 0
|
|
|
- }} = e
|
|
|
- , o = (u,c)=>{
|
|
|
+ const { interval=33, triggerDistance=25, style={left:0, bottom:0} } = e
|
|
|
+
|
|
|
+ const moveFunc = (u,c)=>{
|
|
|
this._room.actionsHandler.joystick({
|
|
|
degree: Math.floor(u),
|
|
|
level: Math.floor(c / 5)
|
|
|
})
|
|
|
}
|
|
|
- , a = this._zone;
|
|
|
+ const a = this._zone;
|
|
|
+
|
|
|
document.body.appendChild(a),
|
|
|
a.style.position = "absolute",
|
|
|
- a.style.width = n.width || "200px",
|
|
|
- a.style.height = n.height || "200px",
|
|
|
- a.style.left = String(n.left || 0),
|
|
|
- a.style.bottom = String(n.bottom || 0),
|
|
|
+ a.style.width = style.width || "200px",
|
|
|
+ a.style.height = style.height || "200px",
|
|
|
+ a.style.left = String(style.left || 0),
|
|
|
+ a.style.bottom = String(style.bottom || 0),
|
|
|
a.style.zIndex = "999",
|
|
|
a.style.userSelect = "none",
|
|
|
a.style.webkitUserSelect = "none",
|
|
@@ -34,24 +33,23 @@ export default class JoyStick {
|
|
|
},
|
|
|
color: "white"
|
|
|
});
|
|
|
+
|
|
|
let s, l;
|
|
|
- return this._joystick.on("move", (u,c)=>{
|
|
|
+ this._joystick.on("move", (u,c)=>{
|
|
|
s = c
|
|
|
- }
|
|
|
- ),
|
|
|
+ })
|
|
|
this._joystick.on("start", ()=>{
|
|
|
l = window.setInterval(()=>{
|
|
|
- s && s.distance > r && o && o(s.angle.degree, s.distance)
|
|
|
+ s && s.distance > triggerDistance && moveFunc && moveFunc(s.angle.degree, s.distance)
|
|
|
}
|
|
|
- , t)
|
|
|
- }
|
|
|
- ),
|
|
|
+ , interval)
|
|
|
+ })
|
|
|
this._joystick.on("end", ()=>{
|
|
|
l && window.clearInterval(l),
|
|
|
l = void 0
|
|
|
- }
|
|
|
- ),
|
|
|
- this._joystick
|
|
|
+ })
|
|
|
+
|
|
|
+ return this._joystick
|
|
|
}
|
|
|
show() {
|
|
|
if (!this._joystick)
|