परिचय

श्रृंखला की इस नई किस्त में, हम देखेंगे कि बोर्ड और उस टुकड़े को कैसे प्रदर्शित किया जाए जो वर्तमान में स्क्रीन पर नीचे जा रहा है। ऐसा करने के लिए, हमें इसे ब्राउज़र में बनाना होगा, और ऐसा करने के लिए हमें जो विकल्प चुनना है वह है 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...
}

यह वर्ग कैनवस उसी नाम के HTML तत्व का प्रतिनिधित्व करता है, जिसे कंस्ट्रक्टर में एक पैरामीटर के रूप में पारित किया जाता है। चूंकि आप बोर्ड बनाने जा रहे हैं, इसलिए इसे खींचने के लिए बिंदुओं तक पहुंचने के लिए इसे एक पैरामीटर के रूप में भी पारित किया जाता है।

पहली चीज़ जो यह करती है वह बोर्ड को समायोजित करने के लिए तत्व कैनवास को आकार देती है, उन आयामों के अनुसार जो बोर्ड स्वयं अपनी संपत्तियों 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 );
    }
}

सबसे पहले हम 2डी के लिए संदर्भ लेते हैं, जो हमें कैनवास पर चित्र बनाने की अनुमति देगा। जिज्ञासावश, 3D का एक संदर्भ भी है, जो WebGL पर आधारित है।

हमारे पास कुछ गार्ड (_पेंटिंग) हैं, जो एक निश्चित समय पर कई थ्रेड्स को एक ही समय में (अलग-अलग बिंदुओं पर) विधि को निष्पादित करने से रोकते हैं। ऐसा तब हो सकता है यदि विधि को दोबारा बनाने के बीच के समय से अधिक समय तक निष्पादित किया गया हो। हालाँकि ठीक है, उस स्थिति में हमें कई अन्य समस्याएँ होंगी...

अगला चरण पिछले रीड्रा (frame) में स्क्रीन पर जो था उसे हटाना है। हम इसे clear() विधि से करते हैं, जो कैनवास पर छवि को हटाने के लिए clearRect() का उपयोग करता है।

और फिर हम बोर्ड को पेंट करते हैं, और फिर उस पल में जो टुकड़ा नीचे आता है। खैर, यही होगा. अले, डिलीवरी पूरी हो गई।

मैंने कहा नहीं। आइए देखें कि बोर्ड और टुकड़े को कैसे रंगा जाता है। सबसे पहले बोर्ड को पेंट करना है। एसईपी वह पृथक्करण है जिसे हम टुकड़ों और बोर्ड वर्ग के बीच छोड़ देंगे। यह बॉक्स पहली चीज़ है जिसे हम ड्रा फ्रेम शीर्षक वाले कोड पैराग्राफ में बनाते हैं। यह एक साधारण आयत है जिसे 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 भुजा वाला एक छोटा वर्ग बनाएं।

इस प्रकार, पहला लूप पंक्तियों के माध्यम से बोर्ड तक घूमता है।पंक्तियों तक। फिर हम विधि के साथ पूरी पंक्ति प्राप्त करते हैं getRow(), इसे आंतरिक लूप के साथ पार करने के लिए, Board तक।cols.

तो, पंक्ति/कॉलम में एक सेल दिया गया है f/c, Board.getCell(f, c), और इस बात को ध्यान में रखते हुए कि जावास्क्रिप्ट में बूलियन के लिए एक कंस्ट्रक्टर है जो एक पूर्णांक को स्वीकार करता है जिसका 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 से गुणा करना होगा और बॉक्स के साथ पृथक्करण जोड़ना होगा।



अभी, हम जो देख पाएंगे वह सुंदर है... नीरस। बोर्ड खाली है, और हमारे पास गेम लूप नहीं है, इसलिए मोहरे नीचे भी नहीं जातीं। हम अगली किस्त में उस विषय पर चर्चा करेंगे, ताकि हम ऊपर की छवि के समान कुछ देखना शुरू कर सकें।