مقدمة

في هذا الإصدار الجديد من السلسلة سنرى كيفية عرض اللوحة والقطعة التي تنزل حاليًا على الشاشة. للقيام بذلك، سيتعين علينا رسمه في المتصفح، والخيار الذي يتعين علينا القيام به هو عنصر HTML 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 الذي يحمل نفس الاسم، والذي يتم تمريره كمعلمة في المُنشئ. نظرًا لأنك ستقوم برسم اللوحة، فسيتم تمريرها أيضًا كمعلمة، من أجل الوصول إلى النقاط المراد رسمها.

أول شيء يفعله هو تغيير حجم العنصر Canvas لاستيعاب اللوحة، وفقًا للأبعاد التي تبلغ عنها اللوحة نفسها من خلال خصائصها cols و rows. تخبرنا اللوحة أيضًا بعدد البكسل التي تشكل نقطة من كل قطعة أو كل خلية في اللوحة، من خلال PIXEL_SIZE.

إعادة رسم اللعبة

دعونا نتوقف عن الالتفافات. علينا أن نرسم اللوحة والقطعة التي تنزل في تلك اللحظة، أليس كذلك؟ حسنًا، دعنا نصل إلى ذلك.

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

أولاً نأخذ السياق ثنائي الأبعاد، والذي سيسمح لنا بالرسم على القماش. ومن باب الفضول، يوجد أيضًا سياق ثلاثي الأبعاد، يعتمد على WebGL.

لدينا بعض الحماية (_painting)، والتي تمنع عدة سلاسل من تنفيذ الطريقة في نفس الوقت (في نقاط مختلفة)، في وقت معين. يمكن أن يحدث هذا إذا تم تنفيذ الطريقة لفترة أطول من الوقت بين عمليات إعادة الرسم. على الرغم من ذلك، في هذه الحالة سيكون لدينا العديد من المشاكل الأخرى...

الخطوة التالية هي حذف ما كان على الشاشة في إعادة الرسم السابقة (الإطار). نقوم بذلك باستخدام طريقة clear()، والتي تستخدم clearRect() لحذف الصورة الموجودة على اللوحة القماشية.

وبعد ذلك نرسم اللوحة، ثم القطعة التي تنزل في تلك اللحظة. حسنا، هذا من شأنه أن يكون عليه. مزر، اكتمل التسليم.

قلت لا. دعونا نرى كيف يتم رسم اللوحة والقطعة. أول شيء هو طلاء اللوحة. SEP هو الفاصل الذي سنتركه بين القطع ومربع اللوحة. هذا المربع هو أول ما نرسمه في فقرة الكود بعنوان رسم الإطار. وهو مستطيل بسيط يمكن رسمه باستخدام strokeRect()، والذي يقبل أربعة معلمات مع موضع الرأس العلوي الأيسر، ثم عرضه وارتفاعه.

طلاء اللوحة

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 



بعد ذلك تأتي حلقة متداخلة (الصفوف والأعمدة)، لذلك سنرى أي من الخلايا الموجودة على اللوحة تحتوي على محتوى (عدد صحيح 1، مقابل عدد صحيح 0)، ثم نرسم مربعًا صغيرًا بضلع PIXEL_SIZE.

وبالتالي، فإن الحلقة الأولى تتكرر عبر الصفوف حتى Board.rows. نحصل بعد ذلك على الصف الكامل بالطريقة getRow()، لاجتيازه بالحلقة الداخلية، حتى Board.cols.

لذلك، بالنظر إلى خلية في صف/عمود f/c، Board.getCell(f, c)، و مع الأخذ في الاعتبار أن JavaScript لديها مُنشئ لـ Boolean الذي يقبل عددًا صحيحًا مع أي قيمة باستثناء 0، يعني true، فإننا نرسم مربعًا بضلع PIXEL_SIZE. لذا، لمعرفة مكان طلاء الصف f، علينا أن نضرب في PIXEL_SIZE ونضيف المسافة بين مربع اللوحة والخلية الأولى. وبما أنها مربعة، سنجد العمود c بنفس الطريقة: SEP (c * PIXEL_SIZE).


  
  
  طلاء القطعة


 نحن نفعل شيئًا مشابهًا مع القطع. من خلال الحصول على شكل (shape)، وهو ليس أكثر من مصفوفة، سيكون لدينا مرة أخرى حلقتين، الحلقة الخارجية للصفوف والحلقة الداخلية للأعمدة.


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

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

        for(let numRow = 0; numRow 



 مرة أخرى، إذا وجدنا 1، فسنرسم مربعًا بضلع PIXEL_SIZE. يتم تحديد موضع طلاء كل مربع يتكون من القطعة من خلال موضع الصف/العمود للقطعة نفسها (قطعة.صف/قطعة. كرنب). يجب عليك ضرب هذا في PIXEL_SIZE وإضافة الفاصل مع المربع.



 في الوقت الحالي، ما سنكون قادرين على رؤيته هو أمر جميل... لطيف. اللوحة فارغة، وليس لدينا حلقة لعب، لذلك لا تسقط القطع. سنناقش هذا الموضوع في الحلقة القادمة، حتى نتمكن من رؤية شيء مشابه للصورة أعلاه.