Premi “Invio” per saltare al contenuto

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

La variabile App

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)

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!

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 *