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

La minima pagina HTML5

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

Non ci soffermeremo sullo studio del linguaggio HTML se non per lo stretto necessario a comprendere l’oggetto del corso, ma una struttura minima è necessaria. Ecco il minimo codice indispensabile per definire una pagina HTML:

<!doctype html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Una pagina HTML</title>
  </head>
  <body>
    Ciao Mondo!
  </body>
</html>

Ed ecco una descrizione di ogni riga:

<!doctype html>

Questo tag indica il tipo di documento e istruisce il browser su cosa mostrare. In passato si sono avvicendate decine di descrizioni e definizioni per i vari tipi di documenti HTML nelle varie versioni e in base ai vari browser. Con HTML5 la codifica è diventata semplice e breve, e ci auguriamo che rimanga tale. Questa dovrebbe essere la prima riga in ogni pagina HTML.

<html lang="it"> ... </html>

Il tag <html> indica l’inizio della pagina vera e propria. All’interno delle parentesi angolari, oltre al nome del tag troviamo un attributo lang, facoltativo, con un valore dichiarato che dice al browser che la pagina in questione è scritta in lingua italiana. Tutto ciò che viene dopo è contenuto all’interno del tag <html> fino alla sua chiusura </html> nell’ultima riga.

<head> ... </head>

Ogni pagina HTML contiene una sezione di intestazione <head> che ospita stili, script, meta-informazioni e altro. Tutto ciò che si trova all’interno di <head> … </head> viene letto e interpretato dal browser ma non viene visualizzato direttamente.

<meta charset="UTF-8">

Il set di caratteri che il browser utilizzerà per visualizzare questa pagina è chiamato UTF-8 ed è il formato consigliato per la maggior parte delle pagine HTML, soprattutto per noi che scriviamo in italiano è importante utilizzare un set di caratteri in grado di visualizzare correttamente tutti i glifi, comprese le lettere accentate.

<title>Una pagina HTML</title>

Il tag <title> rappresenta il titolo del documento, anche se questo non viene visualizzato se non nel tab in alto.

Il tag <title> rappresenta il titolo del documento, anche se questo non viene visualizzato se non nel tab in alto.

<body> ... </body>

Il corpo della pagina, tutto quello che si trova al suo interno, salvo errori, viene stampato all’interno della finestra del browser.

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 *