Come aggiungere controlli inclinazione per il vostro gioco HTML5

I dispositivi mobili hanno un meccanismo di ingresso molto intrigante che consente di controllare gli oggetti in un gioco HTML5 inclinando. Questo funziona con uno speciale strumento di bordo chiamato l'accelerometro, che segue il movimento. L'accelerometro in realtà misura la rotazione, e si può utilizzare per ottenere controlli tilt belle nel vostro gioco.

Come aggiungere controlli inclinazione per il vostro gioco HTML5

La biblioteca simpleGame ha un oggetto speciale chiamato Accel che incapsula l'accelerometro. Funziona molto simile all'oggetto Joy.

  1. Creare un oggetto Accel.

    SimpleGame ha un oggetto Accel. Creare questo oggetto per attivare il test di accelerometro.
  2. Utilizzare metodi per determinare l'inclinazione.

    L'oggetto Accel ha metodi speciali chiamati getAX () e getAY () che indicano la quantità di rotazione.
  3. Modificare i valori di accelerazione.

    I valori AX e AY visualizzare la quantità di rotazione attorno all'asse X e Y, rispettivamente. I valori vanno da -9 a 9. In generale, è necessario modificare i valori di inclinazione per ottenere esattamente il comportamento desiderato. Ciò comporta di solito un paio di calcoli matematici semplici.

Ecco il codice per accel.html:

<! DOCTYPE HTML>
<Html lang = "it-IT">
<Head>
<Meta charset = "UTF-8">
<Title> accel.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
gioco var;
palla var;
var Accel
funzione init () {
gioco = new Scene ();
palla = new Sprite (gioco, "redBall.png", 50, 50);
Accel = new Accel ();

game.start ();
} // End init
update function () {
game.clear ();

newDX = accel.getAY ();
newDY = accel.getAX ();

newDX * = -5;
newDY * = -5;

ball.setDX (newDX);
ball.setDY (newDY);

ball.update ();

}
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

L'accelerometro è facile da usare:

  1. Fare una variabile per contenere l'oggetto accelerometro.

    È possibile chiamare il vostro accelerazione variabile.
  2. Utilizzare accel.getAX () per ottenere la rotazione attorno X.

    Il metodo getAX () restituisce la percentuale di inclinazione attorno all'asse X. L'asse X va da un lato all'altro sullo schermo, così la rotazione intorno a X è normalmente legata al movimento lungo l'asse Y!
  3. Utilizzare acccel.getAY () per determinare la rotazione attorno Y.

    Analogamente, il metodo getAY () descrive la percentuale di inclinazione lungo il (verticale) Y. Normalmente, userete getAY () per controllare il movimento orizzontale.
  4. Non essere preoccupato per l'asse Z.

    È inoltre possibile leggere rotazione lungo l'asse Z (che va dal centro dello schermo per il naso), ma questo non è generalmente disponibile.
  5. Supponiamo (per ora) che la posizione neutra è disteso perfettamente piana su un tavolo.

    Otterrete i valori zero per getAX () e getAY () quando il dispositivo è sdraiato completamente immobile su un tavolo perfettamente piano.
  6. Esperimento con fattori di scala.

    Avrai generalmente necessario moltiplicare i getAX () e getAY () risultati per una certa quantità per ottenere il comportamento desiderato. Se si moltiplica sia da negativo a cinque, si ottengono valori appropriati per dy e dx. Avrete bisogno di sperimentare per ottenere esattamente il comportamento desiderato.