Categories
ECMAscript Giochi HTML5 Tutorial Tutorial JavaScript

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

Il secondo articolo di una serie che ci porterà alla realizzazione di giochi completi in HTML5. Oggi disegniamo su un Canvas!

Loading spinner

Intro

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

Continue reading this series:

Loading spinner

2 replies on “Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas”

Leave a Reply

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