Create A Onscreen Joystick With Pure JavaScript – JoyStick.js

Preview:

Description:

JoyStick.js is a zero-dependency JavaScript library to create a touch-enabled onscreen joystick for your game web app.

How to use it:

1. Load the main JavaScript file joy.js in the document.

<script src="joy.js"></script>

2. Create a container on which you want to render the joystick.

<div id="joyDiv"></div>

3. Initialize the library and done.

var joy = new JoyStick('joyDiv');

4. Possible parameters to customize the joystick.

var joy = new JoyStick('joyDiv',{
    // The ID of canvas element
    title: 'joystick',
    // width/height
    width: undefined,
    height: undefined,
    // Internal color of Stick
    internalFillColor: '#00AA00',
    // Border width of Stick
    internalLineWidth: 2,
    // Border color of Stick
    internalStrokeColor: '#003300',
    // External reference circonference width
    externalLineWidth: 2,
    //External reference circonference color
    externalStrokeColor: '#008000',
    // Sets the behavior of the stick
    autoReturnToCenter: true
    
});

5. Get the position & direction of the stick.

joy.GetPosX();
joy.GetPosY();
joy.GetDir();
joy.GetX();
joy.GetY();

6. Or get the stick values using the new callback.

var Joy = new JoyStick('joyDiv', {}, function(stickData) {
    joy1IinputPosX.value = stickData.xPosition;
    joy1InputPosY.value = stickData.yPosition;
    joy1Direzione.value = stickData.cardinalDirection;
    joy1X.value = stickData.x;
    joy1Y.value = stickData.y;
});

Changelog:

v2.0.0 (12/22/2021)

• Added callbacks

06/10/2020

• Bugfixed

05/01/2020

• Improved code style

04/21/2020

• Supports Two sticks in a row