Tutti conoscono il gioco del labirinto di legno, dove una palla di ferro deve “camminare” nel nostro labirinto mentre lo spostiamo verso il basso/alto e verso sinistra/destra per evitare le buche. Nel tutorial di oggi impariamo le basi per creare un gioco simile – ovvero come usare DeviceOrientation per intercettare i movimenti del nostro smartphone e spostare una pallina (un div, niente di più) a destra/sinistra o alto/basso a seconda del movimento.

Una piccola nota preliminare: sebbene questa sia una tecnologia abbastanza matura, si tratta comunque di funzionalità non ancora del tutto standard. I dispositivi iOS con un browser piuttosto moderno e Chrome su Android la supportano ma occorre sempre tenere conto che ancora molte combinazioni browser/sistemi operativi non “capiscono” questa tecnologia.

Creiamo il “campo”

Per prima cosa occorre creare lo spazio all’interno del quale si muoverà la nostra palla, e la palla. Ecco qua un semplicissimo CSS:

 

e un ancor più semplice HTML:

 

L’evento deviceorientation

Il cuore del nostro piccolo sistema è l’evento deviceorientation. Ciò che noi dovremo fare è “attaccare” a questo evento una funzione, che verrà richiamata con i parametri (inclinazione orizzontale, inclinazione verticale, orientamento) che ci interessano. Ecco il nostro JavaScript:

 

Ora dobbiamo solo inserire la nostra funzione moveBall, ma questa la facciamo noi a seconda delle nostre esigenze – noi abbiamo fatto una cosetta velocissima così:

 

 

In sostanza sposta di 5 pixel il top e/o il left del nostro div “#ball”, bloccandolo quando supera certi valori (che abbiamo messo a mano). Il risultato? Lo potete vedere nel video qui sotto:

I sorgenti sono qua: http://html5today.it/labs/deviceorientation/index.html

Buon divertimento! :)

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis