Author: | bobboteck |
---|---|
Views Total: | 7,193 views |
Official Page: | Go to website |
Last Update: | December 22, 2021 |
License: | MIT |
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