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

Introduzione

Da un po’ di tempo ho voglia di tornare a occuparmi di giochi. Scriverò una serie di tutorial per permettere a chiunque di iniziare a programmare giochi in HTML5 per browser e per smartphone. Se questa serie di articoli avrà successogli aggiornamenti saranno frequenti. Se vi fa piacere leggere e volete che il corso vada avanti fatemelo sapere nei commenti, a me farà piacere.

HTML è l’acronimo di HyperText Markup Language, un linguaggio a marcatori che ha caratterizzato il World Wide Web fin dalla sua nascita. HTML è riconoscibile dai tag, ovvero i marcatori, racchiusi tra parentesi angolari < e >.

HTML5 è la quinta versione di questo linguaggio. Spesso si utilizza il termine HTML5 per indicare un insieme di tecnologie un po’ più vasto di quanto non sia realmente il solo HTML.

Canvas è un elemento in una pagina HTML, è descritto dal tag <canvas>. La particolarità del Canvas è che i pixel al suo interno possono essere modificati attraverso semplici script.

L’acronimo API sta per Application Programming Interface, in italiano Interfaccia per la Programmazione di un’Applicazione, e rappresenta l’insieme delle procedure disponibili al programmatore per far compiere una determinata operazione a un determinato programma.

L’API del Canvas in HTML5 espone tutti i metodi che servono a leggere e scrivere i pixel all’interno del rettangolo dell’elemento Canvas.

Un Canvas da solo, nonostante l’API, non è sufficiente a realizzare ciò che questo corso si propone, utilizzando altre caratteristiche di HTML5, del linguaggio JavaScript e alcune specificità dei dispositivi saremo in grado di aggiungere animazioni, effetti, suoni e interattività; è così che saremo in grado di creare dei giochi.

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

Continua a leggere questa collana:

Potrebbero interessarti anche...

4 Risposte

  1. darioamato ha detto:

    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.

    • Daniele Alessandra ha detto:

      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 ;)

      • darioamato ha detto:

        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)

        • Daniele Alessandra ha detto:

          Ottimo suggerimento, già dal prossimo articolo creerò un Repository per chi volesse seguirmi e così gli utenti più intraprendenti potranno partecipare direttamente alla stesure del codice ;)

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.