Premi “Invio” per saltare al contenuto

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

Caricare due o più immagini

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

Con una piccola modifica al precedente esempio vediamo come è possibile caricare più di una immagine.

Utilizzeremo un Array, in informatica un Array è un insieme organizzato di elementi omogenei, i nostri elementi omogenei saranno URL di immagini, il nostro Array sarà il seguente:

var images = [
  'http://www.danielealessandra.com/wp-content/uploads/2015/09/pig.jpg',
  'http://www.danielealessandra.com/wp-content/uploads/2016/11/dog.jpg',
  'http://www.danielealessandra.com/wp-content/uploads/2016/11/bird.jpg',
  'http://www.danielealessandra.com/wp-content/uploads/2016/11/owl.jpg',
  'http://www.danielealessandra.com/wp-content/uploads/2016/11/squirrell.jpg'
];

Possiamo eseguire la stessa funzione su tutti gli elementi di un Array utilizzando il metodo forEach dell’Array, in questo modo non dovremo ripetere le stesse righe per ognuna delle immagini.

images.forEach(function(url) {
  var image = new Image();
  image.src = url + '?_=' + Math.random();
  /// Aggungo un listener per eseguire una funzione appena l’immagine è stata caricata
  image.addEventListener('load', drawLoadedImageInCanvas);
});

La parte colorata in blu non serve realmente, l’ho aggiunta per forzare un nuovo caricamento ogni volta, altrimenti ci ritroveremo le immagini nella cache del browser e non avrebbe senso parlare di Preload.

0

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 *

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