Il Loop del Gioco
This post is part of the series Realizzare Giochi in HTML5
Other posts in this series:
- 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 (Current)
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.
Continue reading this series:
Realizzare un Gioco in HTML5 Ep. IV: Assets e Preload
