joystickjs

A simple and customisable virtual joystick

Usage no npm install needed!

<script type="module">
  import joystickjs from 'https://cdn.skypack.dev/joystickjs';
</script>

README

joystickJS

A simple and customisable virtual joystic

npm

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 = new Joystick( {
        element: document.getElementById("joystick"),
        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.getElementById("joystick"),

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.moved(function(event){
       console.log(event.details);
    });

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