Premi “Invio” per saltare al contenuto

Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas

Introduzione

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

Questo articolo segue il tutorial di una settimana fa, in cui ho provato a descrivere alcuni concetti base di HTML5, di JavaScript e dell’elemento Canvas. Sono convinto che è più facile imparare facendo qualcosa piuttosto che leggendolo e basta, per questo motivo oggi non andremo via di qua senza aver realizzato qualcosa di divertente ;)

Un Canvas è un elemento rettangolare che possiamo inserire in una pagina HTML e ci permette di leggere e scrivere pixel al suo interno, si dice che espone delle API di disegno. Quindi un Canvas non contiene inizialmente alcun elemento, è necessario utilizzare uno script per disegnare qualcosa al suo interno. Anche se un Canvas non è l’unica maniera di disegnare forme in movimento all’interno di un browser è probabilmente il più comodo.

Nel 2003 si poteva già giocare una versione completa e funzionante del classico Lemmings, tutto in JavaScript e compatibile con i vecchi browser, che è ancora online. A quell’epoca si utilizzava il termine DHTML per indicare le animazioni realizzate con HTML + CSS + JavaScript e realizzare giochi che funzionassero dentro a un browser sembrava un’impresa titanica. Quel tipo di animazioni venivano realizzate manipolando il DOM hanno problemi di prestazioni sui moderni smartphone.

Quindi diamoci da fare e impariamo a conoscere il…

loading spinner

Continua a leggere questa collana:

2 Commenti

  1. Giuseppe Gambino 11 Novembre 2016

    Fantastico, attendiamo il prossimo ;)

    loading spinner
    • Daniele Alessandra 11 Novembre 2016

      Grazie! È sempre bello ricevere commenti come questo. Il prossimo articolo è pronto per essere pubblicato giovedì 24.

      loading spinner

Lascia un commento

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