एक उछलता हुआ स्क्रीनसेवर टकराव की गणना कैसे करता है

एक विश्वस्त प्रकाश – गति पर यात्रा करना एक छोटी भौतिक समस्या है. वस्तु को एक लगातार गति में यात्रा करनी चाहिए, दृश्‍य सीमा को छूना चाहिए, एक जाम के बाद अनुचित गति बनाए रखना, नया आकार बदलने के लिए अनुकूलित, और केवल एक कोने की गिनती जब क्षैतिज और खड़ी दीवार साथ पहुँच रहे हों. “पिक्सेल्स प्रति फ्रेम” आंदोलन के रूप में असफल हो गया या ब्राउज़र में परिवर्तन.

न्यूनतम स्थिति

आयताकार वस्तु के लिए, स्टोर स्थान (x, y)गति (vx, vy), वस्तु चौड़ाई, और व्यूपोर्ट चौड़ाई, और ऊंचाई. यदि ऊपर बाएँ कोने का स्थान होता है, तो वैध सीमा हैं:

0 ≤ x ≤ viewportWidth  - objectWidth
0 ≤ y ≤ viewportHeight - objectHeight

जंग का मोल इसके दृश्य बक्से से लड़ा जाना चाहिए, न कि एकल केंद्र के द्वारा. बदला जाने वाला आकार अधिकतम x तथा y मान बदलता है.

बीता समय उपयोग में, एक माना गया फ्रेम दर नहीं

ब्राउज़र एक उच्च परिष्करण समय प्रदान करता है requestAnimationFrame कालबैक. पिछला समय बीताव प्राप्त करने के लिए छोड़ दें तथा इसे सेकण्ड में बदल दें:

dt = min((now - previous) / 1000, maximumStep)
x  = x + vx * dt
y  = y + vy * dt

एक 60 Hez प्रदर्शित और एक 144 हॉज़ प्रदर्शित करता है फिर उसी वास्तविक समय पर लगभग वही दूरी को ढक देता है । dt एक बड़ा कूदता नहीं जब डिबगिंग या एक कनेथ्य फ़रमा को फिर से चालू करता है. पृष्ठ अपने आप का लूप भी रद्द करता है जब छिपा हुआ हो सिर्फ ब्राउज़र को नियंत्रित करने के बजाय.

एक दीवार पर फूर्ट का प्रदर्शन

एक सरल कार्यान्वयन सेट x सीमा और द्वार vx.. कि दूरी दीवार के पार चला जाता है और छोटे से असमान चाल बनाता है. ऊपर की ओर ध्यान देने से यह सुरक्षित रहता है:

if (x < 0) {
  x = -x
  vx = abs(vx)
}
if (x > maxX) {
  x = maxX - (x - maxX)
  vx = -abs(vx)
}

समान तर्क को खड़े करें. एक समझदार समय अधिकतम चरण के साथ, एक प्रति अक्ष सामान्य रूप से पर्याप्त है. अधिक सामान्य रूप से एक सामान्य इंजन की लूप कर सकता है जब सीमा के बाहर बहुत बड़ा हो.

एक कोने हिट के रूप में क्या मायने रखता है?

एक सिमुलेशन चरण के दौरान, रिकार्ड बाँयें और खड़ा विभाजन के लिए अलग बुलियन भिन्न होता है. कोने का उलटा जब दोनों ही उस चरण में सच हो तो अंत में. वार्टर-बोर्ड की तुलना करें जैसे कि एक ही चरण में होता है. x === 0 && y === 0; रप कदम पहले से ही एक पार हो चुका है.

एक कोने पर किए गए हिट की संभावना इस पर निर्भर करती है कि स्थिति, वेग अनुपात, और आयामों को शुरू करने पर निर्भर है ।

विवरण जो कार्यान्वयन को तराशा हुआ महसूस करता है

• नया आकार लेने पर, बिना किसी विशेष मुद्दे के नई सीमाओं में प्रवेश करने की स्थिति में, पुनःसंत्रीय स्थिति ।
• सिर्फ एक वास्तविक दीवार घटना पर से टकराने के रंग बदलें, एक्स/y स्थिति से निरन्तर नहीं.
• मनपसंद इमेज इपॉस ऑस्पेक्ट रेशो बनाए रखें तथा प्रमाणित क़िस्म के आकार सीमा के बाहर फ़ाइलों को अस्वीकार करें.
• दृश्य ठहराव तथा रीसेट नियंत्रण मौजूदा स्थिति को बनाए रखें, और एस्केप पूर्ण स्क्रीन छोड़ दें.
• सम्मान कम गति और एक गुप्त टैब में अनुवाद करना बंद कर दें.
• के लिए कैप पिक्सेल अनुपात Canvas एक उच्च-स्थान फोन एक अत्यधिक सतह को प्रदान नहीं करता है।

व्यवहार को ध्यान में रखिए डीवीडी स्क्रीनसेवरName. इसकी डिफ़ॉल्ट निशान अनुकूलता रहता है जब स्थानीय छवियों को उपकरण कभी नहीं छोड़ता.

तकनीकी संदर्भ

• MDN: ब्लैम्पम निवेदन
• MDN: फुल स्क्रीन एपीआई
• MDN: स्क्रीन Wake Lock एपीआई

गति सदिश चुनें

गति स्लाइडर सामान्य रूप से परिमाण को दर्शाता है, जबकि दिशा सामान्य रूप से आता है. कोण के लिए कोण θ गति s:

vx = cos(θ) * s
vy = sin(θ) * s

एक दिशा जो वास्तव में क्षैतिज है या खड़ा है कभी भी पूरी सतह का पता लगाने से पहले, तो प्रारंभिक कोण को 90 डिग्री के बहुत करीब से से से होना चाहिए. बेतरतीब रूप से एक्स और y गति से एक लगभग एक छोटा सा रास्ता भी बना सकता है. एक कोण को अनुमति दी गई सीमा से फिर दोनों घटकों को प्राप्त करता है.

क्षैतिज और खड़ा गति प्रभाव के बीच अनुपात कि पथ बार बार उत्पन्न होता है. आदर्श निरंतर ज्यामिति में, एक कोने आता है जब यात्रा का समय एक x सीमा और y सीमा के लिए होता है. सीमित आयाम और दिशा- बिन्दु चक्र सही स्तर, जो क्यों समानता, नहीं स्थिति, खेल स्तर ड्राइव.

बड़ा समय कदमों तथा मल्टीपल परावर्तनों को हैंडल करें

काल का समय साधारण चलता है, लेकिन एक रीफेबल इंजन भी एक वस्तु को एक बड़े कदम के दौरान पार कर सकता है. आगे बढ़ने के बाद, बार- बार किसी भी बाहर की दूरी का उल्लेख करें जब तक कि यह सीमा के भीतर झूठ. लूप की सीमा एक सख़्त sing सीमा की जरूरत है एक असंभव सीमा उत्पन्न करता है.

function reflect(position, velocity, maximum) {
  let hits = 0
  while ((position < 0 || position > maximum) && hits < 8) {
    if (position < 0) {
      position = -position
      velocity = Math.abs(velocity)
    } else {
      position = maximum - (position - maximum)
      velocity = -Math.abs(velocity)
    }
    hits++
  }
  return { position: clamp(position, 0, maximum), velocity, hits }
}

उत्पादन स्क्रीन एक अधिकतम समय कदम और ठहराव का प्रयोग करता है जब छिपा है, तो बहु-पिंजा कूद असाधारण होते हैं. डेडेंचर हैंडल अब भी रीसेट करता है, संचालन, और असाधारण ब्राउज़र सुरक्षित सुरक्षित.

कॉलर घटनाएँ दिशा से अधिक बिजली

इंजन की रिपोर्ट क्षैतिज और अनुलंब हिट, जो किर ब्व्वेशन रंग बदल सकता है, वृद्धि कुल विभाजन, एक वैकल्पिक उपयोगकर्ता को आवश्यक आवाज़, या अद्यतन अद्यतन स्थान गिनती. इन दोनों प्रभावों को एक बार बार घटना में होना चाहिए. जब भी संकेतक स्थिति से निरंतर गति परिवर्तन बनाता है और कोई बातचीत नहीं.

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

पुछल्ले में जानबूझकर साफ़ मॉडल चाहिए

एक प्रघी फ्रेम पूरी तरह साफ करता है Canvas एक ट्रेड को आकर्षित करता है. एक ट्रे के बदले एक एक्स-रेव पृष्ठभूमि अगले एजरल के चित्र बनाने से पहले एक पारा के साथ बतौर पारदर्शी फ्रेम कवर. निचला अल्फा निशान लंबे समय तक रहता है. क्योंकि समझ गया है कि निशान लंबाई गति और फ्रेम दर पर भी निर्भर करता है, इसे एक तरह से परिभाषित करता है कि स्थिर रहता है और इसे कम गति में अक्षम होता है यदि प्रभाव का ध्यान केंद्रित होता है.

डोम आधारित एनिमेशन पर, एक निशान नलव के एक बाध्यन हो सकता है. एक नया नोड हमेशा के लिए जोड़ नहीं है, कि छेद स्मृति और अंत में बातचीत प्रदर्शन.

मनपसंद पाठ तथा छवियों को भागने की सीमा में बदलता है

पाठ चौड़ाई फ़ॉन्ट, सामग्री, वजन, तथा उपकरण रेंडरिंग पर निर्भर करता है. फ़ॉन्ट उपलब्ध होने के बाद मापन, मूल्य स्वरूपन व अधिकतम एक्स/y पर गणना. सीमा सीमा सीमा पार करने पर यह व्यूपोर्ट से बड़ा नहीं हो सकता. यदि यह कवरा है, तो यह नीचे या स्थान के बजाय नकारात्मक सीमा को सीमित कर सकता है.

स्थानीय छवि को इसके आयामों पर भरोसा करने से पहले डिकोड किया जाना चाहिए. ScreenOrbit सिर्फ स्वीकार्य PNG, JPEG, और WebP 5 MB और 4096 पिक्सेल प्रति तरफ, जांच करता है कि फलता हुआ आयाम कितना रखा है, आस्पेक्ट अनुपात बनाए रखता है, और अस्थायी वस्तु यूआरएल को छोड़ें. यह गलत है. SVG और HTML सक्रिय या अनपेक्षित स्थानीय सामग्री को लगाने के बजाय ।

वस्तु को खोने के बाद नया आकार दें

जब व्यूपोर्ट परिवर्तन करता है, नए सीमाएँ व सापेक्ष स्थान की गणना करें जहाँ संभव हो:

ratioX = oldMaxX > 0 ? x / oldMaxX : 0.5
ratioY = oldMaxY > 0 ? y / oldMaxY : 0.5
x = clamp(ratioX * newMaxX, 0, newMaxX)
y = clamp(ratioY * newMaxY, 0, newMaxY)

यह प्रत्येक मोबाइल पता पट्टी या दिशा घटना के परिवर्तन के बाद बेतरतीब स्थिति चुनने से चिकनी है. इसका आकार एक विभाजन नहीं है और न ही विपरीत दिशाओं में वृद्धि होनी चाहिए.

Canvas पिक्सेल्स और CSS ज्यामिति

CSS आकार पारिभाषित गति सीमा. Canvas समर्थन बफर एक उच्च-drodirs के लिए बड़ा हो सकता है: एक हवा का पिक्सेल अनुपात तथा ड्राइंग संदर्भ को स्केल करें तो निर्देशांकों में रह जाता है CSS इकाइयों. पैमाने के बगैर, भौतिक और अनुवाद अलग – अलग इकाइयों का प्रयोग करें; कैप के बिना, एक 4× फोन 16 बार पिक्सेल क्षेत्र को निर्धारित कर सकता है.

किसी छवि या पाठ वस्तु के लिए जिसे बतौर प्रतिनिधित्व किया जा सकता है HTML, रूपांतरण आधारित डोम प्रक्रिया भी संभव है. Canvas मौजूदा समय के आंदोलन तथा जीवन-प्रयोग साफ-रूप की आवश्यकता नहीं है.

ठहराव, व पूर्ण जीवन – अवधि

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

पूर्ण स्क्रीन प्रस्तुति की स्थिति है, कोई चल छवि जरूरी नहीं है. एक अस्वीकृत या असमर्थित पूर्ण पूर्ण पूर्ण स्क्रीन निवेदन एम्बेड किए जाने चाहिए. बाहर होने पर, व्यूपोर्ट निवास के बाद सीमा गणना करें. Wake Lock निवेदित है कि जब पृष्ठ छिपा है तो अलग से छोड़ा गया है; एनीमेशन बदलने में असफल.

इंजिन को जांचो, सिर्फ एक आकर्षक रन नहीं

• बाएँ, दाहिने, ऊपर, और नीचे दीवार पर सीधे हिट
• एक्स/y की टकरा तथा एक कोने वृद्धि
• पास- कोर्न-कोर प्रभाव जो पास चरणों में होता है और गिनती नहीं करता
• ओवरक्वेंट दूरी तथा चिह्न बनाए रखें
• 60, 120, और 144 अनुक्रम जो बराबर यात्रा करते हैं
• एक लंबा इंतजार अंतराल के बाद फिर से चालू करें
• वर्तमान स्थिति से छोटे को तथा चुने गए वस्तु से छोटे को छोटे में नया आकार दें
• स्थानीय छवि को क़िस्म से अस्वीकार किया गया, बाइट आकार, डिकोड्ड आयामों के अनुसार, और डिकोड विफल
• दोहराएँ/ प्रारंभ चक्र एक सक्रिय कॉलबैक के साथ दोहराएँ और कोई वस्तु यूआरएल नहीं दिया गया
• सीमित- पन, कुंजीपट ठहराव, पूर्ण स्क्रीन अस्वीकृत, तथा छुपे मेन्यू बर्ताव

स्वतः जाँच अंकगणित और राज्य संक्रमणों को कवर करती है; खेलरल ब्राउज़र कवरिंग और प्रतिक्रियाओं को दबाता है. एक तीस ‘पुनिटेशन’ जाँच करता है कि यह किस प्रकार का कार्य करता है. Canvas आकार, मेमोरी, और लूप गिनती स्थिर रहती है.

गति कम करने से बाहर पहुँच

ठहराव, रीसेट, तथा फुलस्क्रीन को सामान्य पृष्ठ दृश्य में दिखाई देने की जरूरत है. कोडिंग गणना स्क्रीन रीडर पर हर हिट पर घोषणा नहीं की जानी चाहिए. स्थिति घोषणाओं को अर्थपूर्ण नियंत्रण बदलने के लिए रखा जाता है. स्थिति घोषणाएँ अर्थपूर्ण नियंत्रण के लिए सुरक्षित हैं कम से कम 44 द्वारा बनाए गए लक्ष्य रखे हैं. CSS पिक्सेल, तथा अंतर्निर्मित पूर्वावलोकन आस- पास के नियंत्रण से कुंजीपट ऑपरेशन चोरी नहीं करता.

एक कोने इतने लंबे समय तक क्यों ले जा सकता है

एक पूर्ण रूप से निर्धारित आयत में स्थिति, स्थिति और वेग एक दोहराव उत्पन्‍न कर सकते हैं ।

यह एक ईमानदार घटना रिकॉर्ड है, एक टाइमर नहीं जो एक कोने बनाने के लिए बनाया गया है ।

एक स्पष्ट कार्य के लिए इस पृष्ठ का प्रयोग करें

फ्रेम समय बताएँ, दीवार का आकार, नया आकार, और कोने-रात नियम बंत्र दृश्य के पीछे. वेब विकासकर्ता, धाराएँ, और उत्सुक उपयोक्ता इस मार्गदर्शक का उपयोग दृश्‍य बर्ताव की जाँच करने के लिए करते हैं. इसके परिणाम लिखें आप पहले एक लिंक या एक सेटिंग का पालन करें. एक छोटे लक्ष्य बचाने के लिए और अंतिम निर्णय जारी रखता है सबूत के लिए.

कार्य के लिए एक बार पूरी पृष्ठ को पढ़ें जब कार्य एक प्रदर्शन, चरण साफ करने, दिशा निर्देशित करने, दिशा निर्देशित करने, फाइल, या समर्थन रिपोर्ट करने से पहले. फिर काम के लिए सटीक भाग में वापस जाओ. अगले कदम का निर्णय करते समय विरवण, दीवार को पलटते हुए स्थिति के बारे में बताते हुए. यह मार्ग बताता है: फ्रेम के बारे में बताते हुए, नया नियम बनाने, और कोने के पीछे नियम.

स्थिर शुरूआती मुद्दे तैयार करें

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

एक मुद्दा प्रति सत्र या संदेश रखें. एक दृश्य लक्षण को एक हार्डवेयर का दावा से अलग रखें. एक ब्राउज़र सिमुलेशन फ़ाइल के अंदर दिए गए तीसरे-संत्र के अलग करे. ये सीमाएँ सबूत बनाने में आसान बना देती हैं. मुख्य मार्ग है: फ्रेम- दर 60z और 120 के बीच की गति पर अलग गति.

एक व्यावहारिक चार- भाग प्रक्रिया का अनुसरण करें

1. लक्ष्य की परिभाषा दीजिए । फ्रेम समय व्याख्या करें, दीवार का उल्लंघन, नया आकार, और कोने-हंत्र के नियम बंत्र दृश्य के पीछे. बंद करो अगर कार्य एक अलग समस्या में परिवर्तन करे.
2. बेसलाइन कैप्चर करें. व्यूपोर्ट आकार, युक्ति पिक्सेल अनुपात, समय, स्थिति, दिशा- निर्धारण, और घटना का आकार बदलें. सटीक मान व नाम प्रयोग करें जहाँ वे रहते हैं.
3. मुख्य जोखिम जाँचें. फ्रेम- दरें 60 Hz और 120 Hz प्रदर्शन पर अलग गति से चलती हैं. कदम को दोहराने से पहले सेटअप को ठीक करें.
4. अगला क्रिया चुनें. डीवीडी स्क्रीनसेवर खोलें, एक नियंत्रण बदल कर, और उस पर के अनुसार जीने का अंतराल, गाइड में सूत्रों के साथ तुलना करें. मूल अभिलेख तुलना के लिए रखें.

किसी दूसरे व्यक्‍ति को सबूत दीजिए

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

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

कमज़ोर सबूतों और सबूतों से दूर रहिए

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

अगले उपयोगी क्रिया पर जाएँ

डीवीडी स्क्रीनसेवर खोलें, एक नियंत्रण बदल कर, और गाइड में सूत्र के साथ जीवित के विपरीत. बेस लाइन और परिणाम के अलावा पृष्ठ सीमा रखें. अत्यंत अत्यंत उपयोगी कारीगर, मंच, विशेषज्ञ, अधिकारी, या अधिकारी ScreenOrbit संपादक जब निर्णय पृष्ठ स्कोप के बाहर हो तो.