Einführung

In diesem neuen Teil der Serie werden wir sehen, wie man das Brett und die Figur, die gerade herunterfällt, auf dem Bildschirm anzeigt. Dazu müssen wir es im Browser zeichnen, und die Option, die wir dazu haben, ist das HTML-Element Canvas.

class Canvas {
    static SEPARATION = 2;
    #_painting = false;
    #_element = null;
    #_board = null;
    #_piece = null;

    constructor(element, board)
    {        
        element.width = 5   ( board.cols * Board.PIXEL_SIZE );
        element.height = 5   ( board.rows * Board.PIXEL_SIZE );

        this._board = board;
        this._element = element;
    }

    // más cosas...
}

Diese Klasse Canvas repräsentiert das gleichnamige HTML-Element, das als Parameter im Konstruktor übergeben wird. Da Sie das Brett zeichnen möchten, wird es auch als Parameter übergeben, um auf die zu zeichnenden Punkte zuzugreifen.

Das erste, was es tut, ist die Größe des Elements Canvas, um das Board aufzunehmen, entsprechend den Abmessungen, die das Board selbst über seine Eigenschaften cols und rows. Das Brett sagt uns auch über PIXEL_SIZE, wie viele Pixel ein Punkt jedes Teils oder jeder Zelle des Bretts ausmacht.

Das Spiel neu zeichnen

Lasst uns Umwege stoppen. Wir müssen das Brett und die Figur, die gerade herunterkommt, bemalen, oder? Nun, lasst uns loslegen.

class Canvas {
    // más cosas...

    paint()
    {
        if ( this._painting ) {
            return;
        }

        const ctx = this.element.getContext( "2d" );
        const SEP = Canvas.SEPARATION;

        this._painting = true;
        this.clear();

        this.paintBoard( ctx, SEP );
        this.paintPiece( ctx, SEP );

        this._painting = false;
    }

    clear()
    {
        const ctx = this.element.getContext( "2d" );

        ctx.clearRect( 0, 0, this.element.width, this.element.height );
    }
}

Zuerst nehmen wir den Kontext für 2D, der es uns ermöglicht, auf der Leinwand zu zeichnen. Aus Neugier gibt es auch einen Kontext für 3D, der auf WebGL basiert.

Wir haben einige Wachen (_painting), die verhindern, dass mehrere Threads die Methode gleichzeitig (an verschiedenen Punkten) zu einem bestimmten Zeitpunkt ausführen. Dies könnte passieren, wenn die Methode länger als die Zeit zwischen den Neuzeichnungen ausgeführt wurde. Obwohl gut, in diesem Fall hätten wir viele andere Probleme...

Der nächste Schritt besteht darin, zu löschen, was beim vorherigen Neuzeichnen auf dem Bildschirm war (Frame). Wir tun dies mit der Methode clear(), die clearRect() verwendet, um das Bild auf der Leinwand zu löschen.

Und dann bemalen wir das Brett und dann das Teil, das in diesem Moment herunterfällt. Nun, das wäre es. Ale, Lieferung abgeschlossen.

Ich sagte nein. Mal sehen, wie das Brett und das Stück bemalt sind. Als Erstes muss die Tafel bemalt werden. SEP ist der Abstand, den wir zwischen den Figuren und dem Brettfeld lassen. Dieses Feld ist das erste, was wir im Codeabsatz mit dem Titel Rahmen zeichnen zeichnen. Es handelt sich um ein einfaches Rechteck, das mit StrokeRect() gezeichnet werden kann und das vier Parameter mit der Position des oberen linken Scheitelpunkts und dann seiner Breite und Höhe akzeptiert.

Das Brett bemalen

class Canvas {
    // más cosas...

    paintBoard(ctx, SEP)
    {       
        // Draw frame
        ctx.strokeWidth = 1;
        ctx.strokeStyle = this.board.color;
        ctx.strokeRect( 1, 1,
                  this.element.width - 1,
                  this.element.height  -1 );

        // Draw board
        for(let numRow = 0; numRow 



Als nächstes kommt eine verschachtelte Schleife (Zeilen und Spalten), sodass wir sehen, welche der Zellen auf der Tafel Inhalt haben (eine Ganzzahl 1 gegenüber einer Ganzzahl 0), und dann ein kleines Quadrat mit der Seite PIXEL_SIZE zeichnen.

Die erste Schleife durchläuft also die Zeilen bis Board.rows. Die komplette Zeile erhalten wir dann mit der Methode getRow(), um sie mit der inneren Schleife zu durchlaufen, bis Board.cols.

Also, gegeben eine Zelle in Zeile/Spalte f/c, Board.getCell(f, c) und Unter Berücksichtigung der Tatsache, dass JavaScript einen Konstruktor für Boolean hat, der eine Ganzzahl akzeptiert, die mit jedem Wert außer 0 true bedeutet, zeichnen wir ein Quadrat mit der Seite PIXEL_SIZE. Um also zu wissen, wo die Zeile f eingefügt werden soll, müssen wir mit PIXEL_SIZE multiplizieren und den Abstand zwischen der Platinenbox und der ersten Zelle hinzufügen. Da sie quadratisch sind, finden wir die Spalte c auf die gleiche Weise: SEP (c * PIXEL_SIZE).


  
  
  Das Stück bemalen


Wir machen etwas Ähnliches mit den Stücken. Durch eine Form (shape), die nichts anderes als eine Matrix ist, haben wir wieder zwei Schleifen, die äußere für Zeilen und die innere für Spalten.



class Canvas {
    // más cosas...

    paintPiece(ctx, SEP)
    {
        const SHAPE = this.piece.shape;

        for(let numRow = 0; numRow 



Wenn wir wiederum eine 1 finden, malen wir ein Quadrat mit der Seite PIXEL_SIZE. Die Position zum Bemalen jedes Quadrats, aus dem das Teil besteht, ist durch die Zeilen-/Spaltenposition des Teils selbst gegeben (Stück.Reihe/Stück. Kohl). Sie müssen dies mit PIXEL_SIZE multiplizieren und den Abstand mit der Box addieren.



Im Moment ist das, was wir sehen können, ziemlich... langweilig. Das Spielbrett ist leer und wir haben keine Spielschleife, sodass die Figuren nicht einmal herunterfallen. Wir werden dieses Thema im nächsten Teil besprechen, damit wir etwas Ähnliches wie das obige Bild sehen können.