गेम मॉडल को बनाए रखते हुए प्रस्तुति अनुकूलित करें

कंटेनर को मापें और एक पैमाना चुनें

यह मानने के बजाय कि विंडो खेलने योग्य क्षेत्र है, गेम कंटेनर के आयामों का उपयोग करें। एक ResizeObserver रिपोर्ट कर सकता है जब वह तत्व बदलता है, जिसमें व्यूपोर्ट आकार बदलने के बजाय आसपास के लेआउट के कारण होने वाले परिवर्तन भी शामिल हैं। तय करें कि गेम को संकीर्ण पहलू अनुपात में लेटरबॉक्स, क्रॉप या रीफ्लो करना चाहिए या नहीं, और सर्कल को अंडाकार में खींचने के बजाय विकल्प को दृश्यमान बनाएं।

एक निश्चित आभासी खेल के मैदान के लिए, एक पैमाने कारक की गणना करें जो इसकी चौड़ाई और ऊंचाई में फिट बैठता है, फिर शेष स्थान को केंद्र में रखें। हिट परीक्षण से पहले उसी परिवर्तन के व्युत्क्रम के माध्यम से सूचक निर्देशांक को परिवर्तित करें। रीफ़्लोइंग गेम के लिए, लेआउट एंकर और टकराव आकृतियों को एक साथ अपडेट करें ताकि नियंत्रण पिछले आकार से स्थितियों का उपयोग जारी न रखें।

सिमुलेशन लूप से आकार बदलना जारी रखें

खेल की दुनिया को स्थिर इकाइयों में संग्रहीत करें और कैनवास बैकिंग रिज़ॉल्यूशन, सीएसएस आकार और डिवाइस पिक्सेल अनुपात को रेंडरिंग चिंताओं के रूप में मानें। जब आकार बदलता है, तो ड्राइंग सतह को अपडेट करें और दोबारा बनाएं; जब तक खेल के नियमों की आवश्यकता न हो, स्तर को रीसेट न करें या ऑब्जेक्ट स्थिति की पुनः गणना न करें। यह पृथक्करण टूलबार के आकार को पुनरारंभ जैसा दिखने से रोकता है।

गेम सक्रिय होने के दौरान एक संकीर्ण और विस्तृत व्यूपोर्ट, डेस्कटॉप का आकार और ओरिएंटेशन परिवर्तन का परीक्षण करें। टेक्स्ट रैपिंग की जांच करें, लक्ष्य स्थिति को स्पर्श करें और रूपांतरण का समन्वय करें। MDN का ResizeObserver गाइड तत्व आयामों का अवलोकन करने की व्याख्या करता है और चेतावनी देता है कि कॉलबैक के अंदर देखे गए आकार को बदलने से लूप बन सकते हैं।

⁨ब्राउज़र गेम का रिस्पॉन्सिव लेआउट⁩ से जुड़े सवाल