Realizzare un Gioco in HTML5 Ep. IV: Assets e Preload

di Daniele Alessandra · Pubblicato 24 novembre 2016 · Aggiornato 12 dicembre 2016

Introduzione

Negli articoli precedenti ci è già capitato di disegnare un’immagine all’interno di un Canvas, ma si trattava di una singola immagine e la avevamo presa dalla stessa pagina in cui si trovava il Canvas.

All’interno del codice HTML l’immagine era definita in questo modo:

<img src="http://www.danielealessandra.com/wp-content/uploads/2015/09/pig.jpg" />

Per ottenere un riferimento in JavaScript all’immagine qui sopra avevamo utilizzato questo comando:

var image = document.getElementsByTagName('img')[0];

Dal momento che ci siamo messi in testa di realizzare un’applicazione complessa come un gioco avremo bisogno di caricare molte immagini, ma anche altri tipi di file, ed è opportuno farlo nel modo giusto.

In JavaScript possiamo creare un oggetto del tutto simile a quello definito qui sopra senza la necessità di scriverlo prima in HTML:

var image = new Image();
image.src = "http://www.danielealessandra.com/wp-content/uploads/2015/09/pig.jpg";

In questo modo avremo a nostra disposizione un’immagine da utilizzare come abbiamo fatto già con la precedente, senza riempire la pagina HTML di codice inutile.

Continua: Caricare due o più immagini