Touch-enabled Virtual Joystick In Vanilla JavaScript

Category: Javascript | September 7, 2023
Views Total:825 views
Official Page:Go to website
Last Update:September 7, 2023


Touch-enabled Virtual Joystick In Vanilla JavaScript


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



  • JS update

You Might Be Interested In:

Leave a Reply