App.update e App.draw
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)
L’operazione di disegno sul Canvas avviene in un’unica soluzione, questo è il comportamento dell’immediate mode rendering già citato nei precedenti articoli.
Per tenere traccia del movimento abbiamo bisogno di due fasi, che scriveremo sotto forma di due metodi.
(function () {
"use strict";
var App = {
canvasElement: undefined,
canvasContext: undefined
};
App.draw = function () {
document.write('Draw ');
};
App.enterFrame = function () {
App.update();
App.draw();
};
App.init = function () {
App.canvasElement = document.getElementById("gameCanvas");
App.canvasContext = App.canvasElement.getContext("2d");
setInterval(App.enterFrame, 1000 / 60);
};
App.update = function () {
document.write('Update ');
};
document.addEventListener('DOMContentLoaded', App.init);
}());
I Metodi update e draw non contengono ancora nulla, per apprezzarne l’alternanza ho aggiunto delle istruzioni che scrivono in pagina le parole Update e Draw.
Continue reading this series:
Realizzare un Gioco in HTML5 Ep. IV: Assets e Preload
