आकार बदलने को नियंत्रित लेआउट परिवर्तन मानें

उस तत्व को देखें जिसे गेम वास्तव में इस्तेमाल करता है

जब canvas का कंटेनर विंडो से अलग आकार बदल सकता हो—जैसे विभाजित पैनल में या बदलते नियंत्रणों वाले पेज पर—तब ResizeObserver इस्तेमाल करें। सामग्री का आकार पढ़ें, canvas का आंतरिक ड्रॉइंग रिज़ॉल्यूशन केवल वास्तव में बदलने पर अपडेट करें, फिर CSS निर्देशांकों और गेम-वर्ल्ड निर्देशांकों के बीच का पैमाना दोबारा निकालें।

लेआउट को प्रभावित करने वाले आयामों को बिना शर्त उसी देखे जा रहे तत्व में वापस न लिखें। MDN बताता है कि observer callback के भीतर आकार बदलने से लूप बन सकता है; काम सावधानी से तय करें और अपेक्षित आकार न बदला हो तो लिखना छोड़ दें। यदि डिज़ाइन में चित्र को विकृत करने के बजाय उसके चारों ओर खाली पट्टियाँ होनी चाहिए, तो गेम viewport को स्थिर world-coordinate प्रणाली से अलग रखें।

लेआउट और इनपुट को एक साथ परखें

संकीर्ण, चौड़े और घुमाए हुए आकारों में canvas के हर किनारे के पास किसी लक्ष्य पर क्लिक या टैप करें और जाँचें कि गेम वही world position पहचानता है जो दिखाई देने वाला निशान बताता है। स्तर चलते समय आकार बदलें और पुष्टि करें कि कैमरा या खाली पट्टियों की नीति लागू होती है, लेकिन स्थितियाँ अनपेक्षित रूप से नहीं बदलतीं।

यह न मानें कि window.innerWidth हर लेआउट बदलाव पकड़ता है; कंटेनर को देखें। मोबाइल कीबोर्ड या ब्राउज़र इंटरफ़ेस उपलब्ध जगह बदलता हो तो तय करें कि खेल का क्षेत्र छोटा हो, स्थिर रहे या स्क्रॉल हो। नियंत्रण दिखाकर यह निर्णय परखें, क्योंकि वे गेम की ज़रूरी जगह घेर सकते हैं।

⁨ब्राउज़र गेम के आकार में बदलाव संभालना⁩ से जुड़े सवाल