Realizzare Giochi in HTML5 Ep. VII: Il classico Snake

CreateJS è stato scritto pensando a chi già programmava in ActionScript, per questo la sintassi è quanto più simile era possibile a quella già utilizzata dagli sviluppatori Flash. Per verificare questa caratteristica ho provato a realizzare uno dei vecchi tutorial per giochi in Flash pubblicati tanto tempo fa su questo stesso blog.

Introduzione

Qui sotto dovreste vedere uno schema 30×30 identico a quello realizzato anni fa per quest’altro tutorial, ma stavolta gira tutto grazie a JavaScript e HTML5.

Per iniziare una partita premete il tasto P, per muovere il serpente utilizzate i tasti freccia o le lettere W, A, S e D.

Passatevi un po’ di tempo, se avete ancora il plugin Flash Player confrontate questa versione con l’originale in Flash, quando volete sapere come realizzarlo andiamo avanti.

Ereditarietà con CreateJS

Una delle caratteristiche più interessanti della programmazione ad oggetti è la cosiddetta ereditarietà, vale a dire la possibilità di creare un oggetto utilizzandone un altro già esistente come modello, ed ereditando tutti i Metodi e le Proprietà dall’Oggetto genitore.

Il gioco che stiamo realizzando fa un utilizzo considerevole della forma quadrata, è tutto composto da quadratini, e sarà quindi comodo avere una Classe che generi un quadrato ogni volta che ci serve.

Sarebbe comodo se questo quadrato possedesse già tutte le Proprietà di un qualsiasi altro Display Object, in modo da poterlo posizionare alle coordinate [x, y] che ci serviranno. È comodo in efftti, ed ecco come si fa:

    function Square(color, size) {
        this.Shape_constructor();
        this.color = color;
        size = isNaN(size) ? 10 : Math.floor(size);
        if (size < 10) {
            size = 10;
        }
        this.width = size;
        this.height = size;
        this.drawSquare();
    }
    var prototype = createjs.extend(Square, createjs.Shape);
    
    prototype.drawSquare = function () {
        this.graphics.beginFill(this.color);
        this.graphics.drawRect(1, 1, this.width - 2, this.height - 2);
        this.graphics.endFill();
    };

Cosa vuol dire tutto questo codice? La Funzione Square rappresenta il Costruttore per la nostra Classe, da adesso in poi ci baserà chiamare new Square() per generare un’istanza di quadrato.

La parte evidenziata in rosso richiama un Metodo Shape_Constructor che però non vediamo da nessuna parte, ma servirà ad inizializzare questa nostra Classe come se fosse un’istanza di createjs.Shape, una Classe del Framework che stiamo usando e che abbiamo già incontrato.

L’ereditarietà è completata dalla parte scritta in verde, il metodo createjs.extend assegna a un Oggetto Figlio tutti i Metodi e le Proprietà di un Oggetto Padre, in questo caso il Figlio è Square e il Padre è createjs.Shape, da questo momento Square possiede tutte le caratteristiche di Shape, più tutto quello che aggiungiamo adesso: una Proprietà width, una Proprietà height, una Proprietà color e un Metodo drawSquare.

Le Proprietà sono definite direttamente all’interno del Costruttore, il Metodo drawSquare è definito dalla porzione di codice scritta in blu.

Come si usa questa Classe? Un esempio potrebbe essere questo:

var square = new Square('#FF3333');
this.addChild(square);

Ed è proprio così che viene utilizzato all’interno di altre due Classi del package: Wall che serve a disegnare il “muro” e Cherry che serve a disegnare la ciliegia di cui il serpente è tanto ghiotto.

Il trascorrere del tempo

Una delle classi più utili di CreateJS è il Ticker.

Il Ticker tiene il ritmo dell’esecuzione, se vogliamo che qualcosa si muova spesso ci affidiamo a lui.

Un ticker non può essere instanziato, e non ha bisogno di essere inizializzato, è già lì, pronto ad eseguire i nostri ordini tante volte al secondo. Quante volte al secondo? Lo definiamo con la Proprietà framerate:

createjs.Ticker.framerate = 12;

Il comando qui sopra imposta la frequenza del Ticker a 12 volte al secondo, significa che quando gli avremo assegnato un compito da fare, nello specifico muovere il serpente, questo sarà fatto 12 volte al secondo.

Per assegnare un compito al Ticker basta agganciarsi al suo Evento “tick”, i questo modo:

createjs.Ticker.addEventListener(“tick”, <inserire Funzione o Riferimento>);

Perché funzioni è necessario inserire una Funzione o il riferimento a una Funzione al posto del testo dentro le parentesi angolari.

Una cosa divertente e utile del Ticker è che possiamo modificare il valore di framerate anche durante l’animazione, questo può tornarci utile qualora volessimo rendere più difficile il gioco accelerandone l’azione.

Download e Conclusioni

Questa settimana poche chiacchiere e un esempio completo, sono convinto che le cose convenga vederle funzionare per capire come funzionano.

Tutti i file del gioco sono liberamente scaricabili dal repository pubblico su GitHub cliccando qui.

Se vi piace giocate un altro po’, ricordate che si inizia a giocare premendo il tasto P sulla tastiera e per muovere il serpente si utilizzano i tasti freccia o le lettere W, A, S e D.

Commenti, insulti e suggerimenti, come sempre, qui sotto nei messaggi. Commentate che è gratis.