Categorie
Giochi Giochi HTML5 Tutorial Tutorial JavaScript

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

Nel quarto articolo della serie si parla di Preload, di OOP e di Librerie scaricabili.

Loading spinner

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 = [
  '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.

0

Continua a leggere questa collana:

Loading spinner

Lascia un commento