Erstellen eines Tetris mit JavaScript IV: Canvas

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 Canvas-Element von HTML.

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 stellt das gleichnamige HTML-Element dar, 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 Canvas-Elements, um das Board aufnehmen zu können, entsprechend den Abmessungen, die das Board selbst über seine Spalten und Zeilen meldet . Die Tafel sagt uns auch über PIXEL_SIZE, wie viele Pixel einen Punkt jedes Stücks oder jeder Zelle der Tafel ergeben.

Das Spiel neu zeichnen

Lasst uns Umwege stoppen. Wir müssen das Brett und die Figur, die gerade herunterkommt, bemalen, oder? Kommen wir nun zur Sache.

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 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, dann hätten wir viele andere Probleme...

Der nächste Schritt besteht darin, das zu löschen, was beim vorherigen Neuzeichnen auf dem Bildschirm war (

Rahmen). 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.

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 der Box auf dem Brett 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, 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 < this.board.rows; ++numRow)
        {
            const row = this.board.getRow( numRow );

            for(let numCol = 0; numCol < row.length; ++numCol) {
                if ( Boolean( row[ numCol ] ) ) {
                    ctx.strokeWidth = 1;
                    ctx.strokeStyle = this.board.color;
                    ctx.fillStyle = this.board.color;
                    ctx.fillRect(
                        SEP + ( Board.PIXEL_SIZE * numCol ),
                        SEP + ( Board.PIXEL_SIZE * numRow ),
                        Board.PIXEL_SIZE,
                        Board.PIXEL_SIZE );
                }
            }            
        }

        return;
    }
}

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 geht also durch die Zeilen bis

Board.rows. Anschließend erhalten wir die komplette Zeile mit der Methode getRow(), um sie mit der inneren Schleife zu durchlaufen, bis Board.cols.

Gegeben sei also 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 wahr bedeutet, zeichnen wir ein Quadrat mit der Seite PIXEL_SIZE. Um also zu wissen, wo die Zeile f zu malen ist, 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 < SHAPE.length; ++numRow) {
            const ROW = SHAPE[ numRow ];
            for(let numCol = 0; numCol < ROW.length; ++numCol) {
                if ( Boolean( ROW[ numCol ] ) ) {
                    ctx.strokeWidth = 1;
                    ctx.strokeStyle = this.piece.color;
                    ctx.fillStyle = this.piece.color;
                    ctx.fillRect(
                        SEP
                        + ( this.piece.col * Board.PIXEL_SIZE )
                        + ( numCol * Board.PIXEL_SIZE ),
                        SEP + 
                        + ( this.piece.row * Board.PIXEL_SIZE )
                        + ( numRow * Board.PIXEL_SIZE ),
                        Board.PIXEL_SIZE,
                        Board.PIXEL_SIZE );
                }
            }
        }

        return;
    }
}

Wenn wir wiederum eine 1 finden, malen wir ein Quadrat mit einer PIXEL_SIZE-Seite. Die Position zum Malen jedes Quadrats, aus dem das Stück besteht, wird durch die Position des Reihen-/Spaltenstücks selbst gegeben (

Stück.Reihe/Stück. Spalte). 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 Brett ist leer und wir haben keine Spielschleife, sodass die Figuren nicht einmal herunterfallen. Wir werden dieses Thema im nächsten Teil besprechen, damit wir beginnen können, etwas Ähnliches wie das Bild oben zu sehen.

Das obige ist der detaillierte Inhalt vonErstellen eines Tetris mit JavaScript IV: Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!