joystickJS
A simple and customisable virtual joystic
Menu
Install
Download the joystickJS.js file from here and include the file in your code.
<script src="path/to/joystickJS.min.js"></script> // OR npm i joystickjs // OR <script src="https://rawgit.com/alexoakland/joystickJS/master/dist/joystickJS.min.js"></script>
Package manager installations coming soon.
Usage
Create a new Joystick and store it in a variable. Currently options are required which are given to the joystick in the form of a json object described below.
let joystick = element: document frontColor: "red" backColor: "blue" size: 200 position: y: 200 x: 200 mode: "normal" //Can be xAxis, yAxis or stickToEdge returnToCenter: true ;
Options
element: The element in HTML you want to encapsulate the joystick.
element: document
frontColor: The color of the front part of the joystick. Can be any HTML accepted color.
frontColor: "red"
backColor: The color of the front part of the joystick. Can be any HTML accepted color.
backColor: "blue"
size: The diamater of the circle.
size: 200
position: Given in the form of an x and y position, which translates into pixels on the screen.
position: y: 200 x: 200
mode: Defines the mode of the joystick
mode: "normal" //Normal use //or mode: "xAxis" //Locks to x axis (left to right). //or mode: "yAxis" //Locks to y axis (up to down). //or mode: "stickToEdge" //Forces the joystick to stick to the edge.
returnToCenter: If true the joystick will return to the center after it's moved. Doesn't work if stickToEdge is set to true.
returnToCenter: true
Events
To recieve data from the joystick, called the moved function, which accepts a callback, and in that callback include a parameter. The parameter will contain the data from the joystick under event.details
as a json object.
joystick;
The data received includes:
- position: A json object containing the x and y position of the joystick based on the entire screen.
- distance: The distance from the center of the joystick.
- angle: The angle of movement.
- coordinates: A json object containing the x and y position of the joystick based on the joystick.
Issues and Feature requests
If you come across any issues or have suggestions for a feature, feel free to mention them.
Contributing
Before contributing please take a look at the Code of Conduct