Introduction

Dans ce nouvel épisode de la série, nous verrons comment afficher le plateau et la pièce qui est actuellement en train de défiler à 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 HTML 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...
}

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 s'adapter au tableau, en fonction des dimensions que le tableau lui-même indique via ses propriétés cols et lignes. Le tableau nous indique également combien de pixels constituent 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, allons-y.

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

Prenons d'abord le contexte pour la 2D, qui nous permettra 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 redessinage précédent (frame). Nous faisons cela avec la méthode clear(), qui utilise clearRect() pour supprimer l'image sur le canevas.

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

J'ai dit 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é Draw frame. Il s'agit d'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 



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.

Ainsi, la première boucle parcourt les lignes jusqu'à ce que 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 boîte 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, l'extérieure pour les lignes et l'intérieure pour les colonnes.


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

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

        for(let numRow = 0; numRow 



Encore une fois, si nous trouvons un 1, nous peindrons un carré de côté PIXEL_SIZE. La position pour peindre chaque carré qui compose la pièce est donnée par la position en ligne/colonne de la pièce elle-même (Pièce.ligne/Pièce. chou). Vous devez multiplier cela par PIXEL_SIZE et ajouter la séparation avec la case.



En ce moment, ce que nous allons pouvoir 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.