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

Caricare due o più immagini

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 = [
  'https://www.danielealessandra.com/wp-content/uploads/2015/09/pig.jpg',
  'https://www.danielealessandra.com/wp-content/uploads/2016/11/dog.jpg',
  'https://www.danielealessandra.com/wp-content/uploads/2016/11/bird.jpg',
  'https://www.danielealessandra.com/wp-content/uploads/2016/11/owl.jpg',
  'https://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.