Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rodnye/joystick
Library to implement a joystick with Canvas in JavaScript and HTML
https://github.com/rodnye/joystick
canvas control game-development html5-canvas javascript joystick js
Last synced: 2 days ago
JSON representation
Library to implement a joystick with Canvas in JavaScript and HTML
- Host: GitHub
- URL: https://github.com/rodnye/joystick
- Owner: rodnye
- License: mit
- Created: 2022-09-18T23:21:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-24T15:45:36.000Z (over 2 years ago)
- Last Synced: 2024-11-24T20:46:40.953Z (3 months ago)
- Topics: canvas, control, game-development, html5-canvas, javascript, joystick, js
- Language: JavaScript
- Homepage:
- Size: 558 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JoyStick
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í](https://github.com/RodnyE/JoyStick/blob/main/example.html)
## Primeros pasos
Antes que nada añada el script de la librería a su proyecto.
```html
```
Usted debería haber creado un elemento
con un ancho y alto en el cual se insertará el joystick
```html
```
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.
```javascript
let container = document.getElementById("joy");
let joy = new JoyStick(container);
```
Opcionalmente puedes añadir un objeto de opciones para personalizar el joystick.
```javascript
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):
```javascript
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