Premi “Invio” per saltare al contenuto

Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

App.update e App.draw

Questo articolo è parte della collana Realizzare Giochi in HTML5

Altri articoli in questa collana:

  1. Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi (Corrente)

 

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.

loading spinner

Continua a leggere questa collana:

Aggiungi il primo commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *