खेल रोटेशन
लाल वर्ग घूम सकता है:
घूर्णन अवयव
इससे पहले इस ट्यूटोरियल में, लाल वर्ग खेल क्षेत्र पर घूमने में सक्षम था, लेकिन यह मुड़ या घुमा नहीं सकता था।
घटकों को घुमाने के लिए, हमें घटकों को खींचने के तरीके को बदलना होगा।
कैनवास तत्व के लिए उपलब्ध एकमात्र रोटेशन विधि पूरे कैनवास को घुमाएगी:
कैनवास पर आपके द्वारा खींची गई अन्य सभी चीज़ों को भी घुमाया जाएगा, न कि केवल विशिष्ट घटक को।
इसलिए हमें इस update()तरीके में कुछ बदलाव करने होंगे:
सबसे पहले, हम वर्तमान कैनवास संदर्भ वस्तु को सहेजते हैं:
ctx.save();
फिर हम अनुवाद विधि का उपयोग करके पूरे कैनवास को विशिष्ट घटक के केंद्र में ले जाते हैं:
ctx.translate(x, y);
फिर हम रोटेट () विधि का उपयोग करके वांछित रोटेशन करते हैं:
ctx.rotate(angle);
अब हम घटक को कैनवास पर खींचने के लिए तैयार हैं, लेकिन अब हम अनुवादित (और घुमाए गए) कैनवास पर स्थिति 0,0 पर इसकी केंद्र स्थिति के साथ इसे आकर्षित करेंगे:
ctx.fillRect(width / -2, height / -2, width, height);
जब हम समाप्त कर लें, तो हमें पुनर्स्थापना विधि का उपयोग करके संदर्भ वस्तु को उसकी सहेजी गई स्थिति में वापस लाना होगा:
ctx.restore();
घटक केवल एक चीज है जिसे घुमाया जाता है:
घटक निर्माता
componentकंस्ट्रक्टर के पास एक नई संपत्ति है जिसे कहा जाता है angle, जो रेडियन संख्या है जो घटक के कोण का प्रतिनिधित्व करती है।
कंस्ट्रक्टर की updateविधि यह componentहै कि क्या हम घटक खींचते हैं, और यहां आप उन परिवर्तनों को देख सकते हैं जो घटक को घुमाने की अनुमति देंगे:
उदाहरण
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();
}