Categories
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

Intro

This post is part of the series Realizzare Giochi in HTML5

Other posts in this series:

  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

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="https://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 = "https://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

Continue reading this series:

Loading spinner

Leave a Reply

Your email address will not be published. Required fields are marked *