import joystick from '../index.js';
joystick("#joystick");
npm install @gusdeboer/joystick-js
The min/max values default to min: 0 and max: 100.
These values can easily be overridden by passing the parameter values to the joystick function.
joystick("#joystick", {
min: 0, // Override default min value, applies to both x and y
max: 100, // Override default max value, applies to both x and y
minY: -50, // Specific Y axis min value
maxY: 50, // Specific Y axis max value
minX: -50, // Specific X axis min value
maxX: 50, // Specific X axis min value
});
By default the joystick snaps back to its origin position. This can be disable by passing the snapBack parameter and setting it to false.
joystick("#joystick", {
snapBack: false
});
By default the output values are rounded, e.g. 1.1 > 1. This can be disabled through the round property
Provided the rounding is disabled, a precision can be set.
joystick("#joystick", {
round: false,
precision: 2
});
The x and y axis can be disabled if needed.
By providing the disableX property the stick can no longer be moved left and right.
joystick("#joystick", {
disableX: true,
disableY: true
});
The joystick can easily be styled as a HTML element. The span.stick is added through javascript.
.joystick {
height: 200px;
width: 200px;
display: inline-block;
border: 3px solid white;
position: relative;
border-radius: 100%;
display: inline-block;
}
.joystick span.stick {
position: absolute;
height: 30%;
width: 30%;
background: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
pointer-events: none !important;
}
The joystick emits a custom javascript change event which an event listener can pick up.
Native Event classes allow a detail property to be set.
document.getElementById("joystick").addEventListener("change", (e) => {
// Do something
console.log(e.detail)
});