Cosa si puo’ imparare da un giochino

Introduzione: Sin dal gioco “pong” apparso prima dei personal computers, i videogiochi con la loro continua evoluzione hanno fatto da apripista per nuovi sviluppi hardware e software dei pc. Qui vedremo un antichissimo videogioco riscritto per il Web con le ultime tecnologie disponibili.

Cose da fare: La pagina iniziale e’ una introduzione in inglese. A sinistra c’e’ il videogioco. Cliccate su run code e provate a giocare. Il resto delle pagine accessibili cliccando su next, cercano di farvi capire come si scrive il programma che realizza questo gioco. La cosa e’ divertente e potete seguire il tutorial anche se non siete interessati alla programmazione. Infatti per spiegare la cosa l’autore presenta una serie di prototipi sempre piu’ elaborati del gioco finale. Questi li potete eseguire cliccando su run sulla sinistra. Sulla destra c’e’ il codice del programma. Provate a cambiare qualcosa e cliccando su run a vedere cosa e’ successo.

Cosa succede:il motivo dell’importanza dei videogiochi per lo sviluppo del computer lo potete gia’ dedurre da questo piccolo esempio. Per fare rimbalzare e muovere la pallina o la paletta dovete conoscere innanzitutto la fisica. Piu’ la simulazione e’ accurata, meglio dovete conoscere il mondo fisico. Le simulazioni attuali 3D sono molto sofisticate e richiedono percio’potenze di calcolo spaventose. Ormai oltre alle consolles da gioco, la maggioranza dei pc  sono forniti di GPU (Graphics Processing Unit) che riescono a eseguire in parallelo centinaia di programmi. In confronto le CPU sugli stessi computer sono molto indietro.

La programmazione grafica e’ essenziale per queste applicazioni: in particolare questo demo e’ stato scritto per imparare ad usare una sofisticata libreria collegata all’elemento canvas aggiunto da poco alle pagine Web proprio per poter permettere lo sviluppo di applicazioni interattive su PC, iPad e smartphone.

Un altro punto altamente innovativo dei videogiochi e’ l’uso di un’interazione tra giocatore e computer il piu’ possibile fluida e veloce. Nelle applicazioni con canvas e’ un’altra libreria Javascript a occuparsi di questo (jQuery). Da notare che mentre canvas e’ automaticamente contenuto in tutti i browser di ultima generazione come parte del linguaggio Javascript , jQuery va scaricata dal Web (ma e’ gratis).

Infine questo materiale mostra in pratica l’ultima evoluzione dell’HTML detta HTML5 che oltre a contenere canvas, contiene tutta una serie di strumenti che permettono la scrittura di documenti web sempre piu’ interattivi e multimediali senza ricorrere ad aiuti esterni come flash e java. Il documento visto e’ puro HTML e voi potete scaricarlo sul vostro computer ed eseguirlo esattamente allo stesso modo in locale con Internet spenta.

Il tutorial mostra anche  il processo usuale di sviluppo di applicazioni complesse con prototipi sempre piu’ complessi e con la costruzione di librerie di funzioni.

Commenti: Per quanto sia possibile scaricare da Internet (ed esaminare) il codice completo del tutorial, la sua comprensione puo’ essere un po’ difficile anche se siete un esperto. Il motivo e’ dovuto al fatto che vengono usate (oltre a canvas) altre API (librerie) che permettono ad esempio di creare delle “linguette” (tab) che contengono del codice che potete modificare ed eseguire. Se siete interessato al codice completo del solo giochino, ho cercato di facilitarvi la vita descrivendo su come procedere.

Cominciamo dall’esempio piu’ semplice: il prototipo 1 “Draw a circle”
La pagina html piu’ semplice per inglobare il  codice e’ la seguente:

<html>
<head>
<title>Canvas tutorial</title>
<!-- richiamo libreria jquery -->
<script type="text/javascript" src="jquery-1.js"></script>  
<script type="text/javascript">    

 $(document).ready(function(){

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");

//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

});
 </script>
    <style type="text/css">
canvas { border: 1px solid black; }
    </style>
</head>

<body>

<canvas id="canvas" width="300" height="300"></canvas>

</body>
</html>

Qui potete provare a richiamarla.

Ora passiamo alla pagina che realizza il prototipo 6 (bounce): guardate il codice di questa pagina.

Infine ecco il codice del videogioco completo.

Per capire come si fa riporto di seguito lo schema da seguire:
Lo scheletro e’ il seguente:

<html>
 <head>
 <-- librerie Javascript usate-->
 <-- programma Javascript -->
<-- fogli di stile -->
 </head>
 <body>
 <-- definizione canvas e bottone di run -->
 </body>
 </html>

La parte piu’ complicata e’ il programma Javascript che deve avere una struttura ben precisa:

// Definizione variabili globali (cioe' usate da piu' funzioni)

 //Definizioni funzioni Javascript.
 //Tra queste ci deve essere una funzione init() da richiamare
 //all'inizio  una volta per tutte.

 //Definizione funzioni jquery per il trattamento di "eventi"
 //(operazioni fatte dall'utente come cliccare
 // o particolari momenti dell'esecuzione nel browser come
// fine caricamento pagina) 

 //La parte principale del codice da eseguire quando e' finito
 //il caricamento di cio' che serve racchiusa tra {} del seguente
 //comando per jquery
 $(document).ready(function(){});

 // Chiamata di inizializzazione (da eseguire prima del caricamento)
 init()

Altri applet di informatica

Il materiale ha come indirizzo http://billmill.org/static/canvastutorial/

Il suo autore e’ Bill Mill   bill.mill@gmail.com

Titolo in inglese: Canvas Tutorial  ; Make a Breakout clone with HTML5’s <canvas> element

Ricerca di pagine che hanno link a questo materiale .

Tweet

Leave a Reply

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