Créer un Tetris avec JavaScript IV : canevas

Introduction

Dans ce nouvel opus de la série, nous verrons comment afficher le plateau et la pièce qui s'affiche actuellement à l'écran. Pour ce faire, nous devrons le dessiner dans le navigateur, et l'option dont nous disposons pour le faire est l'élément Canvas du 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...
}

Cette classe Canvas représente l'élément HTML du même nom, qui est passé en paramètre dans le constructeur. Puisque vous allez dessiner le plateau, il est également passé en paramètre, afin d'accéder aux points à dessiner.

La première chose qu'il fait est de dimensionner l'élément Canvas pour pouvoir accueillir le tableau, en fonction des dimensions que le tableau lui-même rapporte à travers ses cols et lignes . Le tableau nous indique également combien de pixels font un point de chaque pièce ou de chaque cellule du tableau, via PIXEL_SIZE.

Redessiner le jeu

Arrêtons les détours. Il faut peindre le plateau et la pièce qui descend à ce moment-là, non ? Eh bien, passons aux choses sérieuses.

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 );
    }
}

On prend d'abord le contexte pour la 2D, ce qui va nous permettre de dessiner sur la toile. Par curiosité, il existe également un contexte pour la 3D, basé sur WebGL.

Nous avons des gardes (

_painting), qui empêchent plusieurs threads d'exécuter la méthode en même temps (à des moments différents), à un instant donné. Cela pourrait se produire si la méthode était exécutée plus longtemps que le temps entre les redessins. Mais bon, dans ce cas, nous aurions bien d'autres problèmes...

L'étape suivante consiste à supprimer ce qui était à l'écran lors du redessin précédent (

cadre). Nous faisons cela avec la méthode clear(), qui utilise clearRect() pour supprimer l'image sur le canevas.

Et puis on peint la planche, et puis la pièce qui descend à ce moment-là. Eh bien, ce serait tout. Ale, livraison terminée.

Non. Voyons comment la planche et la pièce sont peintes. La première chose à faire est de peindre le tableau. SEP est la séparation que nous laisserons entre les pièces et le carré du plateau. Cette boîte est la première chose que nous dessinons dans le paragraphe de code intitulé

Dessiner le cadre. C'est un simple rectangle qui peut être dessiné avec StrokeRect(), qui accepte quatre paramètres avec la position du sommet supérieur gauche, puis sa largeur et sa hauteur.

Peindre le tableau

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;
    }
}

Vient ensuite une boucle imbriquée (lignes et colonnes), nous verrons donc quelles cellules du tableau ont du contenu (un entier 1, contre un entier 0), puis dessinerons un petit carré de côté PIXEL_SIZE.

Donc, la première boucle parcourt les lignes jusqu'à

Board.lignes. On obtient ensuite la ligne complète avec la méthode getRow(), pour la parcourir avec la boucle interne, jusqu'à Board.cols.

Donc, étant donné une cellule en ligne/colonne

f/c, Board.getCell(f, c), et en tenant compte du fait que JavaScript a un constructeur pour Boolean qui accepte un entier qui, avec n'importe quelle valeur sauf 0, signifie true, nous peignons un carré de côté PIXEL_SIZE. Donc, pour savoir où peindre la ligne f, il faut multiplier par PIXEL_SIZE et ajouter la séparation entre la case du tableau et la première cellule. Puisqu'elles sont carrées, on retrouvera la colonne c de la même manière : SEP + (c * PIXEL_SIZE).

Peindre la pièce

Nous faisons quelque chose de similaire avec les pièces. En ayant une forme (

forme), qui n'est rien de plus qu'une matrice, nous aurons à nouveau deux boucles, celle extérieure pour les lignes et celle intérieure pour les colonnes.

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;
    }
}

Encore une fois, si nous trouvons un 1, nous peindrons un carré avec un côté PIXEL_SIZE. La position pour peindre chaque carré qui compose la pièce est donnée par la position de la pièce ligne/colonne (

Pièce.ligne/Pièce. col). Vous devez multiplier cela par PIXEL_SIZE et ajouter la séparation avec la case.

En ce moment, ce que l'on peut voir est assez... fade. Le plateau est vide et nous n'avons pas de boucle de jeu, donc les pièces ne descendent même pas. Nous discuterons de ce sujet dans le prochain épisode, afin que nous puissions commencer à voir quelque chose de similaire à l'image ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!