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

Ciao Mondo! Sono in un 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

Anche l’elemento <canvas> è accessibile in JavaScript attraverso il DOM, ma non è così per il suo contenuto. Il <canvas> funziona in un modo che si chiama immediate mode rendering, questo significa che possiamo colorare direttamente i pixel al suo interno, ma non ci viene fornito un elenco di elementi in esso contenuti.

Per lavorare con i Canvas è necessario utilizzare il DOM una volta sola, per localizzare il tag <canvas>, e successivamente utilizzare l’API di disegno proprie di questo elemento.

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Una pagina HTML con un Canvas</title>
  </head>
  <body>
    <canvas width="800" height="600"></canvas>
    <script type="text/javascript">
      var canvas = document.getElementsByTagName("canvas")[0];
      var ctx = canvas.getContext("2d");
      ctx.font = "30px Arial";
      ctx.strokeText("Ciao Mondo!", 10, 50);
    </script>
  </body>
</html>

Finalmente vediamo il tag <canvas> in azione. Gli attributi width e height definiscono rispettivamente l’altezza e la larghezza del rettangolo che è il Canvas.

Tutto il codice JavaScript è contenuto all’interno del tag <script> … </script>.

var canvas = document.getElementsByTagName("canvas")[0];

Seleziona l’elemento <canvas> nel DOM utilizzando lo stesso sistema dell’esempio precedente.

var ctx = canvas.getContext("2d");

Accede al Contesto 2D del Canvas, questo contesto non fa parte del DOM ma rappresenta tutti i pixel al suo interno e dispone di diversi metodi per scrivere e leggere i pixel al suo interno.

ctx.font = "30px Arial";

Definisce una Proprietà font nel Contesto 2D, questa Proprietà descrive la dimensione e il tipo di carattere da utilizzare in caso di scrittura.

ctx.strokeText("Ciao Mondo!", 10, 50);

Scrive un testo in stile outline, con la frase «Ciao Mondo!», il testo è posizionato a 10 pixel di distanza dal bordo sinistro e a 50 pixel di distanza dal bordo superiore.

Se tutto è andato bene dovremmo avere una pagina HTML con un Canvas al suo interno, e questo Canvas dovrebbe avere questo aspetto:

Ciao Mondo in un Canvas
Il Canvas HTML5 con la scritta “Ciao Mondo!”

Continua a leggere questa collana:

Loading spinner

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 *