Problem with joysticks, need help (JavaScript)

Question

So, I have two joysticks, one to move and one to shoot, and I have been trying for a while to make it so that both joysticks can be moved at the same time, and so that the touch which drags each joystick is somehow identified so that only when this specific touch is released the joystick gets placed back to the center. I have managed to do this so far, but there is one bug I don't understand, if you start moving one joystick, and then start dragging the other without releasing the first, and then you release the first joystick and try to drag it again, both joysticks will for some reason be dragged towards that last touch. I don't know why, my code logic may be a little complicated to gasp at first, so if you are up to the challenge take a look and help me figure out a solution:
https://code.sololearn.com/Wzcu6ECNgsp6/?ref=app

Answer 1

I would like to confirm that this works fine.

Answer 2

Mirielle[ Exams ] maybe you did it wrong, just to confirm, thats exactly what I do and the problem appears:

"I touch the grey joystick, drag it up, then touch the red joystick simultaneously without leaving the grey joystick, drag the red joystick up, then while both joysticks are being dragged up I release the finger that is dragging the grey joystick, but still keep the finger that drags the red, after I try to drag the grey joystick again, without releasing the finger that is dragging the red joystick both joysticks will be dragged towards the last touch I made to drag the grey joystick, and the touch that was dragging the red joystick will be ignored"

Did you try the exact same thing and had no issue?

Answer 3

I got tired with this, I really hate touchscreens, I decided to do this the easy way, when touchstart triggers I check wether the touch was over the shoot joystick or the move joystick, and I keep track of their index and clientX in variables that I update. Then, while touchmove triggers I loop through the touches and check if distance between their clientX position and the clientX position calculated before when touch had started is less than the radius formed by the finger + 10, I add up 10 just to give up some more space, if true I just update the touchIndex to the index of the touch that passed the test, and I use that index to move the joyStick around. This will probably make more sense if you check the code, it works fine, there did were some errors that could appear if touch was canceled for example but I fixed that with a try{}catch{} statement:
https://code.sololearn.com/WAU4MZHlr9RK/?ref=app