search

bobboteck / JoyStick

A simple JoyStick that use HTML5, Canvas and Vanilla JavaScript, for touch and mouse interfaces (no JQuery required), preview at:
https://bobboteck.github.io/joy/joy.html
MIT License
355 stars 96 forks source link

Error with different css-positions #10

Closed morasp closed 4 years ago

morasp commented 4 years ago

When working with a CSS position other than the default, the joystick can not be moved correctly. I suspect, this is an issue with the calculation of the movement. I suggest to calculate the movement based on the last and the current position.

bobboteck commented 4 years ago

Hi @morasp can you send me more detail of your problem?

morasp commented 4 years ago

If I position the Container with css

    position: fixed;
    bottom: 30px;
    left:0px;

the movement of the stick is restricted to sidewards movement (I have only tested vertical repositioning) If I check the value of canvas.offsetTop is the same as without the positioning. Tested on MacOS 10.15.5 and Safari

bobboteck commented 4 years ago

Hi @morasp, I think the problem is due to the absolute positioning that you used. The JoyStick work on the position in the parent element, and if you force it the Stick can't move correctly. For now I'm sorry, I can try to check if there is a way to make it work even like this, when I have closed the other issues and I will have time to work on it.

samburdge commented 4 years ago

Hi, I had this same issue. It definitely makes sense to have the joystick at the bottom of the screen, but at the moment you can't position it where you want. Apart from that the joystick is great!

Tezcan98 commented 4 years ago

I discover that's trick. You should create a div before joystick. Also Thanks guy, after I publish my game I'll add you to credits. But I just started the game :D

bobboteck commented 4 years ago

I discover that's trick. You should create a div before joystick. Also Thanks guy, after I publish my game I'll add you to credits. But I just started the game :D

Yes if you use DIV and put the JoyStick into it work correctly. I try to find a solution on @morasp question

bobboteck commented 4 years ago

Hi guys, I'm happy to declare this issue closed, now you can use FIXED or ABSOLUTE position in the CSS style. See the example of implementation here: https://bobboteck.github.io/joy/joy.html Have fun using the joystick!