Categorie
ECMAscript Giochi Giochi HTML5 Risorse Tutorial Tutorial JavaScript

Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I

È giunto il momento per me di ritornare nel mondo dei giochi, e questa volta non può che essere in compagnia di HTML5, spero che mi seguirete anche in questo viaggio.

loading spinner

Il DOM e il Canvas

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 (Corrente)
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

Prima dell’arrivo dell’oggetto <canvas> tutte le animazioni all’interno di una pagina HTML venivano fatte manipolando il DOM. L’acronimo DOM sta per Document Object Model, letteralmente Modello a Oggetti del Documento, e rappresenta tutti gli oggetti presenti all’interno di una pagina HTML.

Esistono numerosi esempi di giochi realizzati in JavaScript modificando gli attributi di stile degli oggetti sul DOM, ad esempio cliccando qui troverete una versione del vecchio Pong in cui le racchette, la pallina e il campo da gioco sono <div> che si muovono seguendo uno script (apre in una nuova scheda).

Possiamo realizzare anche noi un piccolo esperimento aggiungendo un po’ di JavaScript alla pagina precedentemente creata:

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Una pagina HTML</title>
  </head>
  <body>
    <div style="color: red; text-align: center; transform: rotate(12deg); position: absolute; top: 50%; left: 50%;">
      Ciao Mondo!
    </div>
    <script type="text/javascript">
      var gradi = 0;
      var div = document.getElementsByTagName('div')[0];
      function ruotaDiv() {
        gradi++;
        div.style.transform = 'rotate('+gradi+'deg)';
      }
      setInterval(ruotaDiv, 100);
    </script>
  </body>
</html>

Se tutto è andato per il verso giusto il testo dovrebbe ruotare.

Il tag <script> è il contenitore per qualsiasi istruzione JavaScript nella pagina. Tutto ciò che si trova all’interno del tag <script> è scritto con sintassi JavaScript.

var gradi = 0;

Definisce una variabile che si chiama gradi e ha valore zero.

var div = document.getElementsByTagName('div')[0];

Utilizza il DOM per ottenere un riferimento al tag <div>. La parola document indica il nodo principale del documento, è l’oggetto DOM di gerarchia più alta. Il metodo getElementsByTagName seleziona tutti i nodi del documento che hanno lo stesso tag, nel nostro caso tutti i <div>, anche se ne abbiamo uno solo. Il numero zero tra parentesi è l’indice, visto che il metodo getElementsByTagName seleziona una lista in questo modo selezioniamo il primo (e casualmente unico) <div> della lista.

function ruotaDiv() { ... }

Definisce una Funzione, ovvero un gruppo di istruzioni che può essere richiamato più di una volta.

gradi++;

Aumenta di una unità il valore della variabile gradi, che ad ogni iterazione diventerà uno, poi due, poi tre, eccetera.

setInterval(ruotaDiv, 100);

Il Metodo setInterval fa in modo che venga eseguita la stessa istruzione più volte, in base a quanto definito tra parentesi. La funzione ruotaDiv verrà eseguita ogni 100 millisecondi, ovvero dieci volte al secondo.

Come risultato il testo in rosso ruota di un grado ogni decimo di secondo.

loading spinner

Continua a leggere questa collana:

4 risposte su “Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I”

tutorial carino ed efficace. E’ logico che hai appena buttato giù il prologo di un vero e proprio “romanzo” noto come developing di un videogame. Stima per il risultato.

loading spinner

Grazie Dario, l’idea è proprio quella di realizzare una guida completa a partire praticamente da zero. Se questa serie di articoli avrà successo pensavo di inserire successivamente strumenti sempre più completi: da CreateJS a Unity3D. Vedremo come si evolverà, tu torna spesso a trovarmi ;)

loading spinner

inoltre ho notato con mio grande poiacere che hai una Repository molto interessante su GitHub, sarebbe molto interessante un post su come creare un componente per github e le linee guida per pubblicare correttamente (tipo plugin js o wordpress)

loading spinner

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *