Categories
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

Altri tag HTML

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

I tag disponibili nel linguaggio HTML sono numerosi. Molti tag che in passato hanno goduto di grande successo sono stati vietati nell’ultima versione, anche se la maggior parte dei browser continua a mostrare correttamente il contenuto dei tag obsoleti come <font>, <b>, <marquee>, <center>, il loro uso è vietato dalle specifiche HTML5 che indicano chiaramente che il contenuto deve essere nettamente separato dalla presentazione.

Nel moderno web utilizziamo i tag come contenitori e definiamo il loro aspetto utilizzando il linguaggio CSS.

Il tag più comune è <div>, che rappresenta un blocco di contenuto senza nessuna caratteristica grafica predefinita.

Tutti i tag supportano un attributo style=”” che permette di definirne l’aspetto grafico e di presentazione.

Modifichiamo l’esempio precedente e aggiungiamo un contenitore <div> attorno al testo, la pagina rimarrà visivamente identica.

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

Aggiungendo qualche regola CSS al <div> appena creato ecco che tutto cambia:

<!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>
  </body>
</html>

Il contenuto dell’attributo style=”” è chiamato stile in linea, non è molto elegante ma al momento ci è stato utile per osservare gli effetti del CSS su un elemento qualsiasi.

Il risultato dovrebbe assomigliare a questo:

ciaomondo-css.html

Continue reading this series:

Loading spinner

4 replies on “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

Leave a Reply

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