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
- Indice
- Pagina 1: Introduzione
- Pagina 2: Caricare due o più immagini
- Pagina 3: Un Preload OOP per tutte le immagini
- Pagina 4: Utilizzare una Libreria di Terze Parti
- Pagina 5: Conclusioni e domande
