Un gioco è composto di vari elementi che si muovono e interagiscono tra di loro. Ad esempio potrebbe esserci un uomo che corre su uno sfondo, lo stesso sfondo che si muove, i nemici che vengono incontro all'uomo, i colpi sparati dall'uomo, ecc...

Per fare funzionare i vari elementi serve qualcosa che renda facile aggiungere nuovi elementi e farli interagire tra di loro. Di seguito vi mostro un semplice game engine che permette di fare funzionare un illimitato gruppo di elementi a patto che si crei una funzione ad hoc. La funzione loop infatti disegna e muove tutti gli elementi e poi rilancia ancora se stessa.

requestAnimationFrame è una funzione che funziona come setTimeout ma non richiede il parametro del tempo perché il browser in automatico cerca di lanciarla il massimo numero di volte. Un numero che comunque non andrà oltre le 60 volte per secondo. Così facendo la funzione loop può essere chiamata ad intervlli leggermente diversi e si passano i secondi trascorsi dall'ultima invocazione alle funzioni che disegnano gli elementi. Ogni funzione decide se il tempo passato è sufficiente per cmbiare qualcosa nello schermo oppure ridisegnare l'elemento nella posizione precedente.

Trovi qui uno zip con il codice sorgente.

Prendendo spunto dal codice precedente:

1. Prova l'esempio su una tua pagina,
2. Fai sparare al dinosauro un proiettile quando si preme un tasto,
3. Fai in modi che con le frecce su e giù il proiettile possa alzarsi o abbassarsi,

Buon lavoro! Dopo di questo tocca a voi inventare un gioco! :)