गेम रोटेशन

लाल चतुर्भुज घुमाव ले सकता है:

घुमाव वाला कंपोनेंट

इस ट्यूटोरियल के पहले हिस्से में, लाल चतुर्भुज खेल क्षेत्र पर गतिशील हो सकता है, लेकिन घुमाव लेने या घुमाव देने में सक्षम नहीं है।

कंपोनेंट को घुमाने के लिए, हमें कंपोनेंट को चित्रित करने के तरीके को बदलना होगा。

कैनवस तत्व का एकमात्र उपलब्ध घुमाव देने वाला विधा पूरे कैनवस को घुमाता है:

कैनवस पर आपके द्वारा चित्रित सभी अन्य सामग्री भी घुमाव लेंगी, न केवल विशेष कंपोनेंट ही।

यही कारण है कि हमें update() विधा में कुछ बदलाव करें:

पहले, हम वर्तमान कैनवस कार्यक्रम वस्तु को सहेजेंगे:

ctx.save();

फिर हम translate विधा का उपयोग करके पूरे कैनवस को विशेष कंपोनेंट के केंद्र पर ले जाएंगे:

ctx.translate(x, y);

फिर हम rotate() विधा का उपयोग करके चाहते घुमाव को करेंगे:

ctx.rotate(angle);

अब हम कंपोनेंट को कैनवस पर चित्रित करने के लिए तैयार हैं, लेकिन अब हम ट्रांसलेट (और घुमाव) किए गए कैनवस पर इसके केंद्रीय स्थान को स्थान 0,0 पर चित्रित करेंगे:

ctx.fillRect(width / -2, height / -2, width, height);

काम के बाद, हमें restore विधा का उपयोग करके इस कार्यक्रम वस्तु को उसके सहेजे गए स्थान पर वापस लाना होगा:

ctx.restore();

यह कंपोनेंट एकमात्र घुमाव लेने वाली चीज है:

कंपोनेंट कन्स्ट्रक्टर

component कन्स्ट्रक्टर में एक नाम है angle के नए गुण, यह कंपोनेंट के कोण के देशांतर को प्रतिनिधित्व करता है।

component कन्स्ट्रक्टर के update विधा हमें कंपोनेंट के स्थान को दिखाती है, यहाँ आपको कंपोनेंट के घुमाव के बदलाव को देखा जा सकता है:

उदाहरण

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.angle += 1 * Math.PI / 180;
  myGamePiece.update();
}

खुद से प्रयास करें