Premi “Invio” per saltare al contenuto

Realizzare Giochi in HTML5 Ep. VII: Il classico Snake

Ereditarietà con CreateJS

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
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

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.

loading spinner

Aggiungi il primo commento

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.