Movement-library.js

Una semplice libreria per JS che facilita la programmazione di movimenti e spostamenti per oggetti in 2d.

---

Utilizzo

Per utilizzare la libreria segui i passaggi sottostanti.

1. Download: Scarica il file libreria (dall'ultimo Relase stabile) in base al linguaggio che utilizzi: JavaScript oppure TypeScript
2. Sposta il file nella directory del tuo progetto.
3. Dichiarazione con classe: In un altro file JS o TS, inserisci in alto la stringa: const mover = new MoverJS(element, position); per dichiarare l'utilizzo della libreria. Se lo vuoi usare in nel tag script in html, dichiara in head: <script src="/Movement-library.js"></script> (eventualmente aggiorna il path).
4. Dichiarazione con moduli ES6: In un altro file JS o TS, inserisci in alto la stringa: import mover from "https://raw.githubusercontent.com/Croc-Prog-github/Movement-library.js/refs/heads/main/core/Movement-library.js". Nota: questa stringa ti dà accesso all'ultimo commit sul file citato e potrebbe non essere stabile, usalo quando c'è un rilascio.
5. Inizia a scrivere codice, usando i comandi illustrati appena sotto.

Comandi

In questa sezione sono specificati tutti i comandi utilizzabili, con la loro relativa spiegazione.

MoverJS(element, position) (constructor) Viene utilizzato per creare un'istanza di MoverJS, acquisendo l'elemento HTML e il suo tipo di posizionamento.

• element: L'elemento che deve essere mosso. Deve essere ottenuto tramite selettori come document.getElementById('player').
• position: Una stringa che rappresenta il valore della proprietà position in CSS (es. "absolute", "relative", ...).
  

mover.achieve.setXY(x, y) Imposta manualmente le coordinate dell'elemento.

• x: La coordinata orizzontale in pixel.
• y: La coordinata verticale in pixel.
  

mover.achieve.randomXY() Posiziona l'elemento in una posizione casuale all'interno della finestra del browser.

mover.achieve.idElement(id) Posiziona l'elemento nella stessa posizione di un altro elemento HTML specificato tramite id.

• id: L'id dell'elemento HTML di riferimento.
  

mover.achieve.mouseFromEvent(mouseEvent) Posiziona l'elemento nelle coordinate correnti del mouse, prendendo i valori da un evento mouse.

• mouseEvent: L’evento MouseEvent da cui vengono estratte le coordinate (clientX, clientY).
  

mover.getRandomX() Restituisce una coordinata casuale sull’asse X, all’interno della larghezza della finestra del browser.

mover.getRandomY() Restituisce una coordinata casuale sull’asse Y, all’interno dell’altezza della finestra del browser.

mover.glideAt(x, y, seconds) Sposta l’elemento verso una posizione specifica (x, y) in un tempo determinato, con animazione fluida.

• x: Coordinata finale sull’asse X.
• y: Coordinata finale sull’asse Y.
• seconds: Tempo dell’animazione in secondi.
  

mover.glideAtIdElement(id, seconds) Sposta l’elemento verso la posizione di un altro elemento HTML (selezionato tramite id) in un tempo determinato, con animazione fluida.

• id: L’id dell’elemento di riferimento.
• seconds: Tempo dell’animazione in secondi.
  

mover.glideAtAndWait(x, y, seconds) Sposta l’elemento verso una posizione specifica (x, y) in un tempo determinato e attendi la fine dell'animazione prima di eseguire altro.

• x: Coordinata finale sull’asse X.
• y: Coordinata finale sull’asse Y.
• seconds: Tempo dell’animazione in secondi.
  

mover.glideAtIdElementAndWait(id, seconds) Sposta l’elemento verso la posizione di un altro elemento HTML (selezionato tramite id) in un tempo determinato, e attendi la fine dell'animazione prima di eseguire altro.

• id: L’id dell’elemento di riferimento.
• seconds: Tempo dell’animazione in secondi.
  

mover.punteInDirection(degrees) Ruota l’elemento di un certo numero di gradi.

• degrees: il numero dell’angolo di rotazione in gradi (0 = verso destra, 90 = verso il basso).
  

mover.punteTowardsId(targetId) Ruota l’elemento in direzione di un altro elemento specificato tramite id.

• targetId: L’id dell’elemento verso cui ruotare.
  

mover.changeX(dx) Muove l’elemento di un certo valore lungo l’asse X, a partire dalla sua posizione attuale.

• dx: Valore in pixel da aggiungere (positivo = destra, negativo = sinistra).
  

mover.changeY(dy) Muove l’elemento di un certo valore lungo l’asse Y, a partire dalla sua posizione attuale.

• dy: Valore in pixel da aggiungere (positivo = giù, negativo = su).