Salta gli ostacoli in DHTML

Un pomeriggio di novembre: niente da fare, poca voglia di imparare cose nuove.. 'sicchè passo le mie 6 ore rimanenti nel fare un piccolo giochino stupido e insignificante in javascript :)

Descrizione del progetto:
Un personaggio stilizzato che cammina in un mondo a scorrimento orizzontale e che deve saltare delle buche che appaiono randomicamente sullo schermo.

N.B.
Come il 99% delle cose che posterò, non è niente di nuovo. Ma ai fini del blog, mi pare utile.

Ecco come si presenta all'inizio:

Primo approccio con i canvas

Quanti anni è che esiste HTML5? 2 anni?

Io che ho cominciato a lavorare giusto 2 anni fa non sono mai riuscito a farne un uso intelligente a lavoro...

Ed è per questo motivo che ho cominciato a scoprirlo... in un modo non troppo intelligente :)

Tra i numerosi tag che l'HTML5 porta, mi ha sempre affascinato il tag <canvas>. Ma cos'è? 

Navigando un po' sulla rete ho visto che questo canvas non serve ad altro che a manipolare delle immagini bitmap dinamicamente da javascript. 

Wow! Posso creare un immagine da codice e farla muovere, roteare, animare... Non che la parte grafica sia il mio contesto preferito, ma per bagaglio personale, ho voluto provarlo questo canvas. 

Ho pensato di utilizzare la famosa trollface. 

Per chi non la conoscesse è un MEME utilizzato dopo una frase provocatoria o offesa per far alterare ancora di più l'interlocutore offeso. La frase che spesso la accompagna è "Problems?" . 

In questa mia "animazione" tirerò fuori la trollface dall'area del canvas e farò uno scherzo all'utente che naviga la pagina in pieno stile del MEME.