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