Il Loop del Gioco
Questo articolo è parte della collana Realizzare Giochi in HTML5
Altri articoli in questa collana:
- Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
- Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
- Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi (Corrente)
Affinché qualcosa si muova sullo schermo abbiamo bisogno di eseguire le operazioni di disegno a intervalli regolari.
(function () {
"use strict";
var App = {
canvasElement: undefined,
canvasContext: undefined
};
App.enterFrame = function () {
document.write('. ');
};
App.init = function () {
App.canvasElement = document.getElementById("gameCanvas");
App.canvasContext = App.canvasElement.getContext("2d");
setInterval(App.enterFrame, 1000 / 60);
};
document.addEventListener('DOMContentLoaded', App.init);
}());
Il Metodo setInterval richiama una determinata funzione a intervalli regolari. L’intervallo è definito in millesimi di secondo, il valore 1000 / 60 rappresenta un frameRate di 60 fotogrammi al secondo.
Il Metodo enterFrame al momento non farebbe nulla di interessante, ma per poter apprezzare il funzionamento ho aggiunto un comando che scrive un punto all’interno della pagina, così è possibile apprezzare un qualche movimento fino a che non avremo scritto una funzione migliore.
Continua a leggere questa collana:
Realizzare un Gioco in HTML5 Ep. IV: Assets e Preload
