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

La variabile App

Dovendo realizzare un’unica applicazione è opportuno inserire tutte le variabili in un unico contenitore, questo contenitore sarà una variabile JavaScript e avrà nome App.

(function () {
  "use strict";
 
  var App = {
    canvasElement: undefined,
    canvasContext: undefined
  };
 
}());

Per il momento la variabile App è un Oggetto con due sole Proprietà. Le Proprietà canvasElement e canvasContext non hanno ancora un valore definito, sono undefined.

(function () {
  "use strict";
 
  var App = {
    canvasElement: undefined,
    canvasContext: undefined
  };
 
  App.init = function () {
    App.canvasElement = document.getElementById("gameCanvas");
    App.canvasContext = App.canvasElement.getContext("2d");
  };
 
}());

L’aggiunta di un Metodo init ci consentirà di attivare l’applicazione. I Metodi sono Funzioni che appartengono a un Oggetto. Avremmo potuto aggiungere il Metodo init nel blocco precedente, all’interno delle parentesi graffe. È sempre possibile aggiungere Metodi e Proprietà a un Oggetto in JavaScript utilizzando la sintassi a punto:

[Oggetto].[Proprietà o Metodo] = [Valore o Funzione];

Anche se abbiamo scritto il Metodo init questo non viene eseguito perché non esiste nessuno script che lo richiami.

Per richiamare il Metodo init nel momento in cui tutta la pagina è stata caricata in memoria possiamo utilizzare un Evento dell’Oggetto Document.

(function () {
  "use strict";
 
  var App = {
    canvasElement: undefined,
    canvasContext: undefined
  };
 
  App.init = function () {
    App.canvasElement = document.getElementById("gameCanvas");
    App.canvasContext = App.canvasElement.getContext("2d");
  };
 
  document.addEventListener('DOMContentLoaded', App.init);
 
}());

Adesso il Metodo init viene eseguito nel momento in cui la pagina è stata completamente caricata, ma ancora non succede nulla!