Create A Onscreen Joystick With Pure JavaScript – JoyStick.js

Category: Javascript | December 22, 2021
Author:bobboteck
Views Total:7,193 views
Official Page:Go to website
Last Update:December 22, 2021
License:MIT

Preview:

Create A Onscreen Joystick With Pure JavaScript – JoyStick.js

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

You Might Be Interested In:


Leave a Reply