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

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.

0

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

Continua a leggere questa collana:

Potrebbero interessarti anche...

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.