Touch-enabled Virtual Joystick In Vanilla JavaScript

Preview:

Description:

virtual-joystick.js is a JavaScript library to create a touch-enabled joystick control that works seamlessly on mobile devices, allowing users to move objects, control characters, and interact with your application naturally and intuitively.

It provides the ability to detect changes in the position of the joystick handle and return this data as an object containing the delta values for x and y.

How to use it:

1. Download and import the virtual-joystick.js.

import VirtualJoystick from './src/virtual-joystick.js';

2. Create an empty DIV container to hold the virtual joystick.

<div class="joystick"></div>

3. Create a new instance of the VirtualJoystick class and pass in a DOM element as the first argument to create the joystick interface.

const joystickContainer = document.querySelector('.joystick');
const joystick = new VirtualJoystick(joystickContainer, {
      // options
});

4. Available options to customize the virtual joystick.

const joystick = new VirtualJoystick(joystickContainer, {
      width: 100,
      height: 100,
      color: 'gray',
      handleColor: 'white',
      handleRadius: 20,
      onChange: function(delta) {
        // delta.x
        // delta.y
      }
  },
});

Changelog:

09/07/2023

• JS update