導入

シリーズの今回は、盤面と現在進行中の駒を画面上に表示する方法を見ていきます。これを行うには、ブラウザで描画する必要があります。そのためのオプションは Canvas 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...
}

このクラス Canvas は、コンストラクターのパラメーターとして渡される、同じ名前の HTML 要素を表します。ボードを描画するので、描画するポイントにアクセスするために、ボードもパラメーターとして渡されます。

最初に行うことは、ボード自体がプロパティ cols および rows。また、ボードは、PIXEL_SIZE. を通じて、ボードの各ピースまたは各セルのポイントを構成する ピクセル の数も示します。 ゲームの描き直し

寄り道はやめよう。その瞬間に降っている盤面と駒を塗らなければなりませんよね？さて、それでは、始めましょう。

クラス キャンバス { // より多くの事... ペイント（） { if (this._painting) { 戻る; } 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; } クリア（） { const ctx = this.element.getContext( "2d" ); ctx.clearRect( 0, 0, this.element.width, this.element.height ); } }

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

いくつかのガード (

) があり、特定の時点で複数のスレッドが同時に (異なるポイントで) メソッドを実行するのを防ぎます。これは、メソッドが再描画間の時間よりも長く実行された場合に発生する可能性があります。まぁ、その場合は他にも色々問題が起きるだろうけど… 次のステップでは、前回の再描画で画面上にあったもの (

) を削除します。これは clear() メソッドで行います。このメソッドは clearRect() を使用してキャンバス上の画像を削除します。 そしてボードをペイントし、その瞬間に落ちてくるピースをペイントします。まあ、それはそれでしょう。エール、配達完了しました。

私はノーと言った。ボードと駒がどのようにペイントされるかを見てみましょう。まずは基板の塗装です。 SEP は、駒とボードの正方形の間に残す分離です。このボックスは、

というタイトルのコード段落で最初に描画するものです。 これは ストロークRect() で描画できる単純な長方形で、左上の頂点の位置、その幅と高さの 4 つのパラメーターを受け取ります。 ボードの塗装

クラス キャンバス { // より多くの事... ペイントボード(ctx、SEP) { //フレームを描画する ctx.ストローク幅 = 1; ctx.ストロークスタイル = this.board.color; ctx.ストロークRect( 1, 1, this.element.width - 1、 this.element.height -1 ); //ボードを描く for(let numRow = 0; numRow

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 

したがって、最初のループは 
Board
.rows まで行をループします。次に、メソッド getRow() を使用して完全な行を取得し、Board.cols. まで内部ループでそれを走査します。

つまり、行/列 
f
/c、Board.getCell(f, c) のセルがあるとします。 JavaScript には、0 を除く任意の値を持つ整数を受け入れる Boolean のコンストラクターがあることを考慮して、true を意味する、辺が PIXEL_SIZE の正方形をペイントします。したがって、行 f をどこにペイントするかを知るには、PIXEL_SIZE を乗算し、ボード ボックスと最初のセルの間の間隔を追加する必要があります。これらは正方形であるため、同じ方法で列 c を見つけます: SEP (c * PIXEL_SIZE).


  
  
  作品をペイントする


ピースでも同様のことを行います。単なる行列であるシェイプ (
shape
) を使用すると、再び 2 つのループができます。外側のループは行用で、内側のループは列用です。



クラス キャンバス {
    // より多くの事...

    ペイントピース(ctx、SEP)
    {
        const SHAPE = this.piece.shape;

        for(let numRow = 0; numRow 



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

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

        for(let numRow = 0; numRow Piece
.row/Piece. ] キャベツ）。これに PIXEL_SIZE を掛けて、ボックスによる区切りを追加する必要があります。



今のところ、私たちが見ることができるものはかなり...当たり障りのないものです。ボードは空で、ゲームループがないので、駒も落ちません。このトピックについては次回の記事で説明し、上の画像のようなものを確認できるようにします。