# एक गेम लूप जो सभी डिस्प्ले पर पूर्वानुमानित रहता है

> किसी खिलाड़ी के डिस्प्ले रिफ्रेश रेट पर सिमुलेशन गति को बांधे बिना ब्राउज़र गेम अपडेट की संरचना करना और एनीमेशन फ्रेम के आसपास ड्राइंग करना।

- URL: https://oneshotgems.ai/hi/topics/browser-game-loop
- श्रेणी: गेम डेवलपर के लिए
- प्रकार: गाइड
- अपडेट किया गया: 5 अक्टूबर 2026

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

## स्थिति में बदलाव और ड्रॉइंग को अलग रखें

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

एक छोटे प्लेटफ़ॉर्म परीक्षण में मार्कर को चुनी हुई विश्व-इकाइयाँ प्रति सेकंड की गति से क्षैतिज रूप से चलाएँ। वही रास्ता 60 Hz और उच्च रिफ़्रेश-दर वाले डिस्प्ले पर चलाएँ। यदि समान वास्तविक समय में मार्कर एक डिस्प्ले पर अधिक दूरी तय करता है, तो गति का कुछ हिस्सा अभी भी हर कॉलबैक पर लागू हो रहा है, समय की हर इकाई पर नहीं।

## विलंबित फ़्रेमों के लिए पुनर्प्राप्ति नीति चुनें

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

दोहराए जा सकने वाले बाधा-कोर्स में कॉलबैक के बीच का सबसे लंबा अंतर रिकॉर्ड करें। फिर किसी दूसरे पेज पर जाकर लौटने के बाद गेम की जाँच करें। स्पष्ट रूप से तय करें कि गेम रुके, थोड़ा समय पूरा करे या पिछली स्थिति से जारी हो; एक देर से आए फ़्रेम को यह फैसला न करने दें।

## सवाल

**क्या ड्रॉइंग के लिए setInterval का उपयोग करना चाहिए?** विज़ुअल कार्य के लिए requestAnimationFrame का उपयोग करें क्योंकि इसे पुन: पेंट करने के लिए शेड्यूल किया गया है और आमतौर पर छिपे हुए दस्तावेज़ों के लिए इसे रोक दिया जाता है। एक टाइमर अभी भी गैर-दृश्य कार्यों को शेड्यूल कर सकता है, लेकिन इसे डिस्प्ले घड़ी के रूप में नहीं माना जाना चाहिए।

**फ़्रेम टाइमस्टैम्प कहाँ से आता है?** requestAnimationFrame कॉलबैक उच्च-रिज़ॉल्यूशन टाइमस्टैम्प देता है। MDN इसके समय-निर्धारण और एक बार चलने वाले व्यवहार का वर्णन करता है। कॉलबैक गिनने के बजाय प्रगति की गणना इस टाइमस्टैम्प से करें।

## अपनी जिज्ञासा के साथ आगे बढ़ें

- [डेल्टा टाइम से गति में उछाल रोकें](https://oneshotgems.ai/hi/topics/delta-time-in-games): खेल की गति के लिए बीता हुआ समय लागू करें, एक सुरक्षित कैच-अप नीति चुनें, और विभिन्न ताज़ा दरों पर और स्टालों के बाद गति का परीक्षण करें।
- [किसी गेम का टैब छिपा होने पर उसे रोकें](https://oneshotgems.ai/hi/topics/pausing-background-games): यह चुनने के लिए पृष्ठ दृश्यता परिवर्तनों का उपयोग करें कि क्या रुकता है, क्या सहेजा जाता है, और ब्राउज़र गेम बिना टाइम जंप के कैसे फिर से शुरू होता है।
- [ब्राउज़र गेम HUD को सिंक में रखें](https://oneshotgems.ai/hi/topics/synchronizing-game-hud): गेम स्थिति को सत्य का स्रोत मानकर और एक अद्यतन पथ से HUD मान प्रस्तुत करके स्कोर, जीवन और टाइमर को सुसंगत रखें।

## आगे पढ़ें

- [MDN: requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)

---
मूल पेज: https://oneshotgems.ai/hi/topics/browser-game-loop