A simple implementation for joystick that using vanilla JS for joystick. No need external library, easy to use.
- Versioning
- Add more data like postion (CW,W)
- Testing edge cases
- Adding more info, picture and tryme webpage
First, include the necessary joystick.js file and create a unique <div> for each joystick instance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Joystick Example</title>
<!-- Include the joystick.js file -->
<script src="joystick.js"></script>
</head>
<body style="background-color: #2f2d5a; color: white;">
<h2>Basic Joystick</h2>
<div id="joystick1Div"></div>
<h2>Advanced Joystick</h2>
<div id="joystick2Div"></div>
<script>
// Create a basic joystick
const joystick1 = new Joystick('joystick1Div');
// Create an advanced joystick with custom configuration
const joystick2 = new Joystick('joystick2Div', {
sizeBackground: 150,
boundSize: 120,
handleSize: 20,
minAxis: -50,
maxAxis: 50,
step: 2,
stickOnXAxis: false,
stickOnYAxis: false,
returnToCenter: true,
onChange: (coordinates) => {
console.log(`Joystick 2 Coordinates: X = ${coordinates.x}, Y = ${coordinates.y}`);
}
});
</script>
</body>
</html>-
Include the Joystick JavaScript File:
- Include the necessary
joystick.jsfile with the<script>tag:<script src="joystick.js"></script>.
- Include the necessary
-
Create Unique Divs for Each Joystick:
- Add a unique
<div>for each joystick you want to create:<div id="joystick1Div"></div>and<div id="joystick2Div"></div>.
- Add a unique
-
Initialize the Joystick:
- Create a new instance of the
Joystickclass for each joystick, specifying the unique ID of the<div>where the joystick will be rendered.
- Create a new instance of the
You can customize the joystick by passing various parameters to the constructor. Here is an example with an advanced configuration:
<script>
// Create an advanced joystick
const advancedJoystick = new Joystick('joystick2Div', {
sizeBackground: 200, // Size of the joystick container in pixels
boundSize: 150, // Diameter of the joystick background circle
handleSize: 30, // Diameter of the joystick handle
minAxis: -100, // Minimum axis value
maxAxis: 100, // Maximum axis value
step: 5, // Step increment for joystick values
stickOnXAxis: false, // Allow movement on X-axis
stickOnYAxis: true, // Allow movement on Y-axis only
returnToCenter: false, // Joystick does not return to center when released
onChange: (coordinates) => {
console.log(`Advanced Joystick Coordinates: X = ${coordinates.x}, Y = ${coordinates.y}`);
}
});
</script>Example for Sending Joystick Values Periodically
function sendJoystickValue() {
const joystickValue = joystick2.getCoor(); // Get current coordinates of the joystick
fetch('/joystick-value', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ x: joystickValue.x, y: joystickValue.y }) // Send joystick coordinates as JSON
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
}
// Send the joystick value every 5 seconds
setInterval(sendJoystickValue, 5000);Joystick
- The joystick object
All paramter are optional, no need to declare if not use or need to change. See Default for each parameter for more informations. The paramters no need in spesific order.
-
sizeBackground: {int}- Default:
120 - Usage: Specifies the size of the square canvas that contains the joystick, in pixels. This will create a canvas of
sizeBackground x sizeBackgroundpixels.
- Default:
-
boundSize: {int}- Default:
100 - Usage: Specifies the diameter of the big circle, which serves as the boundary for the joystick handle, in pixels.
- Default:
-
handleSize: {int}- Default:
16 - Usage: Specifies the diameter of the small circle (the joystick handle) that the user can drag, in pixels.
- Default:
-
minAxis: {int}- Default:
-100 - Usage: Sets the minimum value for both the X and Y axes of the joystick. The joystick will output values between
minAxisandmaxAxis.
- Default:
-
maxAxis: {int}- Default:
100 - Usage: Sets the maximum value for both the X and Y axes of the joystick. The joystick will output values between
minAxisandmaxAxis.
- Default:
-
step: {int}- Default:
1 - Usage: Specifies the increment step for the joystick values. This defines the resolution or sensitivity of the joystick movement. Smaller steps provide more fine-grained control.
- Default:
-
stickOnXAxis: {bool}- Default:
false - Usage: If set to
true, the joystick handle will only move along the X-axis and ignore the Y-axis movements.
- Default:
-
stickOnYAxis: {bool}- Default:
false - Usage: If set to
true, the joystick handle will only move along the Y-axis and ignore the X-axis movements.
- Default:
-
returnToCenter: {bool}- Default:
true - Usage: If set to
true, the joystick handle will return to the center of the big circle when the user releases it. Iffalse, the handle will stay in its current position when released.
- Default:
-
onChange: {function}- Default:
null - Usage: A callback function that is triggered whenever the joystick position changes. This function receives the current coordinates
{ x, y }of the joystick handle as an argument.
- Default:
Special thanks to the contributors and the open-source community for their continuous support. Thanks to Nakamoto Albert for supporting with ProjectEDNA.