Skip to content

Library to implement a joystick with Canvas in JavaScript and HTML

License

Notifications You must be signed in to change notification settings

rodnye/JoyStick

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

JoyStick

joystick red
Librería para implementar un joystick con canvas en javascript y html. El JoyStick usa los eventos ontouch de html, por lo que no funcionará si el navegador usado no tiene soporte. Puedes ver un ejemplo en código aquí

Primeros pasos

Antes que nada añada el script de la librería a su proyecto.

<script src="/joystick.min.js"></script>

Usted debería haber creado un elemento

con un ancho y alto en el cual se insertará el joystick

<div id="joy" style="width:150px; height:150px"></div>

El joystick tomará las dimensiones de su contenedor padre, por eso es necesario estos valores en el div.

¿Cómo usar la librería?

Es muy fácil de implementar, simplemente llame al contructor de la clase JoyStick y añada como parámetro el contenedor.

let container = document.getElementById("joy");
let joy = new JoyStick(container);

Opcionalmente puedes añadir un objeto de opciones para personalizar el joystick.

let container = document.getElementById("joy");
let joy = new JoyStick(container, {
  fillStyle: "#ff0000",
  strokeStyle: "#ff0000",
});

Puede obtener la posición de la palanca mediante las propiedades x y y en fracción (-1 a 1):

joy.x
joy.y

Constructor

new JoyStick(container, options)

Argumento Tipo Descripción
container HTMLDivElement (requerido) el elemento div donde se insertará el joystick
options Object (opcional) algunos ajustes extras
options.fillStyle color color de relleno de la palanca
options.strokeStyle color color del borde del joystick
options.eventArea HTMLDivElement elemento donde ocurrirán los eventos ontouch del joystick (por defecto es el elemento contenedor)
options.callback function función que será llamada cada vez que se mueva el joystick

Propiedades

x

number
Fracción de -1 a 1 de la posición de la palanca en el eje "x"

y

number
Fracción de -1 a 1 de la posición de la palanca en el eje "y"

s

number
Fracción de 0 a 1 indicando la distancia entre la palanca y el centro del joystick

pressed

boolean
Indica si el joystick está siendo usado o no.

container

HTMLDivElement
El contenedor en el que se encuentra el canvas

canvas

HTMLCanvasElement
El canvas en el que se dibuja el joystick

context

CanvasRenderingContext2D
El contexto usado del canvas