जदूं तुस कुसै नियंत्रक गी प्लग करदे ओ तां तुस बटन मैश करदे ओ, छड़ें गी हिलांदे ओ, ट्रिगर खींचदे ओ... ते इक डेवलपर दे तौर उप्पर, तुसें गी इस च कोई बी नेईं दिक्खदा। ब्राउज़र इसगी चुक्की लै करदा ऐ, पक्का, पर जदूं तगर तुस कंसोल च नंबर लॉग नेईं करदे ओ, तां एह् अदृश्य ऐ। गेमपैड एपीआई कन्नै एह् सिर दर्द ऐ। एह् बरें थमां ऐ, ते असल च एह् बड़ा शक्तिशाली ऐ। तुस बटन, छड़ें, ट्रिगर, कम्में गी पढ़ी सकदे ओ। पर मते सारे लोक इसगी नेईं छुंदे। की? कीजे कोई फीडबैक नेईं ऐ। डेवलपर टूल च कोई पैनल नेईं। कोई साफ तरीका नेईं जानने दा जे नियंत्रक’स बी करदा ऐ जेह्ड़ा तुस सोचदे ओ। अंधा उड़ने दा एहसास होंदा ऐ। उस ने मिगी इन्ना बग कीता जे मैं इक छोटा सा टूल बनाना: गेमपैड कैस्केड डिबगर। कंसोल आउटपुट गी टकटकी लाने दे बजाय, तुसेंगी नियंत्रक दा लाइव, इंटरएक्टिव दृश्य मिलदा ऐ। कुसै चीज़ गी दबाओ ते ओह् स्क्रीन पर रिएक्ट करदा ऐ। ते CSS Cascade Layers कन्नै, शैलियां संगठित रौंह्दियां न, इसलेई डिबग करना साफ ऐ। इस पोस्ट च, मैं तुसें गी दस्सना जे नियंत्रक गी डिबग करना इ’न्ना दर्द कीऽ ऐ, सीएसएस इसगी साफ करने च कि’यां मदद करदा ऐ, ते तुस अपने प्रोजेक्टें आस्तै इक दुबारा इस्तेमाल करने योग्य विजुअल डिबगर कि’यां बनाई सकदे ओ।
जेकर तुस उ’नेंगी सारें गी लॉग करने च समर्थ ओ तां बी तुस फौरन अपठनीय कंसोल स्पैम कन्नै खत्म होई जागे। उदाहरण दे तौर पर: [0,0,1,0,0,0.5,0,...] ऐ। [0,0,0,0,1,0,0,...] दा। [0,0,1,0,0,0,0,...] दा।
क्या तुस दस्सी सकदे ओ के किस बटन दबाया गेदा हा? शायद, पर अपनी अक्खीं गी तनाव देने ते किश इनपुट छूटने दे बाद गै। तो, नहीं, डिबगिंग आसानी कन्नै नेईं औंदी जदूं इनपुट पढ़ने दी गल्ल आवै करदी ऐ। समस्या 3: संरचना दी कमी भलेही तुस इक त्वरित विज़ुअलाइज़र गी इकट्ठा करो, शैलियां जल्दी गै गन्दा होई सकदियां न। डिफ़ॉल्ट, सक्रिय, ते डिबग स्थिति ओवरलैप होई सकदी ऐ, ते साफ संरचना दे बगैर, तुंदा CSS भंगुर ते विस्तार करना मुश्कल होई जंदा ऐ. सीएसएस कैस्केड लेयर मदद करी सकदे न। ओह् शैलियें गी "परतें" च समूहीकृत करदे न जेह् ड़ियां प्राथमिकता दे अनुसार क्रमबद्ध कीतियां जंदियां न, इसलेई तुस विशिष्टता कन्नै लड़ना ते अनुमान लाना बंद करी ओड़दे ओ, "मेरी डिबग शैली की नेईं दस्सदी ऐ?" इसदे बजाय, तुस बक्ख-बक्ख चिंताएं गी बरकरार रखदे ओ:
आधार: नियंत्रक दा मानक, शुरूआती रूप। सक्रिय: दबाए गेदे बटन ते लेई गेदे छड़ें आस्तै हाइलाइट। डिबग: डेवलपर्स आस्तै ओवरले (जियां, संख्यात्मक रीडआउट, गाइड, ते होर)।
जेकर अस इसदे मताबक सीएसएस च परतें गी परिभाशित करदे आं तां असें गी: /* निम्नतम ते उच्चतम प्राथमिकता */ @ परत आधार, सक्रिय, डीबग;
@ परत आधार { /* ... */ ऐ। } ऐ
@ परत सक्रिय ऐ { /* ... */ ऐ। } ऐ
@ परत डिबग { /* ... */ ऐ। } ऐ
क्योंकि हर परत पूर्वानुमानित रूप कन्नै ढेर होंदी ऐ, तुस हमेशा जानदे ओ जे कुन कुन नियम जीतदे न। ओह पूर्वानुमान डिबगिंग गी न सिर्फ आसान बनांदी ऐ, बल्के असल च प्रबंधनीय बनांदी ऐ। अस समस्या (अदृश्य, गन्दा इनपुट) ते दृष्टिकोण (कैस्केड लेयरें कन्नै बने दा इक विजुअल डिबगर) गी कवर कीता ऐ। हुण अस डिबगर बनाने लेई कदम-दर-कदम प्रक्रिया च चलगे। दी डिबगर अवधारणा छिपे दे इनपुट गी दिक्खने दा सबतूं आसान तरीका ऐ सिर्फ स्क्रीन पर इसगी खींचना। एह् डिबगर इ’यै करदा ऐ। बटन, ट्रिगर, ते जॉयस्टिक सारें गी इक विजुअल मिलदा ऐ।
ए दबाओ: इक घेरा रोशन होंदा ऐ। छड़ी गी धक्का देओ: घेरा चारों ओर सरकदा ऐ। आधे रास्ते एक ट्रिगर खींचना: एक बार आधे रास्ते भरता है।
हुण तुस 0 ते 1 गी टकटकी लांदे नेईं ओ, पर असल च नियंत्रक गी लाइव रिएक्ट करदे दिक्खा करदे ओ। बेशक, इक बारी जेकर तुस डिफ़ॉल्ट, दबाए गेदे, डिबग जानकारी, शायद रिकार्डिंग मोड बी जनेह् राज्यें पर ढेर करना शुरू करदे ओ तां सीएसएस बड्डा ते जटिल होना शुरू होई जंदा ऐ. उ’त्थें गै कैस्केड परतें कम्म औंदे न। इत्थै इक पट्टी-डाउन उदाहरण ऐ: @ परत आधार { .बटन { पृष्ठभूमि: # 222 ऐ; सीमा-त्रिज्या: 50% ऐ; चौड़ाई: 40px ऐ; ऊंचाई: 40px ऐ; } ऐ } ऐ
@ परत सक्रिय ऐ { .बटन।दबाया { पृष्ठभूमि: # 0f0; /* चमकदार हरे रंग दा */ } ऐ } ऐ
@ परत डिबग { .बटन::बाद { सामग्री: attr (डेटा-मूल्य); फॉन्ट-आकार: 12px ऐ; रंग: # एफएफएफ; } ऐ } ऐ
परत क्रम महत्व रखदा ऐ: आधार → सक्रिय → डिबग।
आधार नियंत्रक गी खींचदा ऐ। सक्रिय दबाए राज्यें गी संभालदा ऐ। डिबग ओवरले पर फेंकदा ऐ।
इसगी इस चाल्ली तोड़ने दा मतलब ऐ जे तुस अजीब विशिष्टता युद्ध नेईं लड़दे। हर परत दी अपनी जगह होंदी ऐ, ते तुस हमेशा जानदे ओ के की जीत होंदी ऐ। बिल्डिंग इट आउट आओ पैह्ले कुसै न कुसै चीजै गी स्क्रीन पर लाचै। इसगी अच्छा दिखने दी लोड़ नेईं ऐ — बस अस्तित्व दी लोड़ ऐ तां जे साढ़े कोल किश कम्म करने आस्तै होऐ।
गेमपैड झरना डिबगर
<स्क्रिप्ट एसआरसी="स्क्रिप्ट.जेएस">
कि’यां शाब्दिक तौर पर सिर्फ बक्से गै न। अजें तगर रोमांचक नेईं ऐ, पर एह् असेंगी CSS ते जावास्क्रिप्ट कन्नै बाद च हड़पने आस्तै हैंडल दिंदा ऐ। ठीक ऐ, मैं इत्थें कैस्केड परतें दा इस्तेमाल करा’रदा ऐ कीजे एह् इक बारी जेकर तुस होर राज्यें गी जोड़दे ओ तां सामान गी व्यवस्थित रक्खदा ऐ। इत्थै इक रफ पास ऐ:
/* ================================== CASCADE LAYERS सेटअप दा क्रम मामले: आधार → सक्रिय → डिबग ==================================== */
/* लेयर ऑर्डर अपफ्रंट परिभाषित करो */ @ परत आधार, सक्रिय, डीबग;
/* परत 1: आधार शैलियाँ - डिफ़ॉल्ट रूप */ @ परत आधार { .बटन { पृष्ठभूमि: # 333 ऐ; सीमा-त्रिज्या: 50% ऐ; चौड़ाई: 70px ऐ; ऊंचाई: 70px ऐ; प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; } ऐ
.विराम { चौड़ाई: 20px ऐ; ऊंचाई: 70px ऐ; पृष्ठभूमि: # 333 ऐ; प्रदर्शन: इनलाइन-ब्लॉक; } ऐ } ऐ
/* परत 2: सक्रिय राज्यें - दबाए गेदे बटनें गी संभालदा ऐ */ @ परत सक्रिय ऐ { .बटन.सक्रिय { पृष्ठभूमि: # 0f0; /* दबाने पर चमकदार हरे रंग दा */ रूपांतरण: पैमाने (1.1); /* बटन गी थोड़ा बड़ा करदा ऐ */ } ऐ
.विराम।सक्रिय { पृष्ठभूमि: # 0f0; रूपांतरण: पैमाने वाई (1.1); /* दबाने पर खड़ी खिंचाव होंदा ऐ */ } ऐ } ऐ
/* परत 3: डीबग ओवरले - डेवलपर जानकारी */ @ परत डिबग { .बटन::बाद { सामग्री: attr (डेटा-मूल्य); /* संख्यात्मक मान दस्सदा ऐ */ फॉन्ट-आकार: 12px ऐ; रंग: # एफएफएफ; } ऐ } ऐ
इस पद्धति दी खूबसूरती एह् ऐ जे हर परत दा इक साफ मकसद होंदा ऐ। बेस लेयर कदें बी सक्रिय गी ओवरराइड नेईं करी सकदी, ते सक्रिय कदें बी डिबग गी ओवरराइड नेईं करी सकदी, चाहे ओह् विशिष्टता दी परवाह नेईं करै. इस कन्नै CSS विशिष्टता युद्धें गी खत्म करी दित्ता जंदा ऐ जेह् ड़े आमतौर पर डिबगिंग उपकरणें गी परेशान करदे न. हुण लगदा है कि कुछ गुच्छे काले बैकग्राउंड ते बैठे हन। ईमानदारी कन्नै, कोई बुरा नेईं।
जावास्क्रिप्ट गी जोड़ना जावास्क्रिप्ट दा समां। इत्थें गै नियंत्रक असल च किश करदा ऐ। अस इसगी कदम दर कदम बनागे। चरण 1: राज्य प्रबंधन गी सेट करो पैह् ले, असेंगी डिबगर दी स्थिति गी ट्रैक करने लेई चर दी लोड़ ऐ: // ================================== // राज्य प्रबंधन // ==================================
चलने दे = झूठा; // ट्रैक करदा ऐ जे डिबगर सक्रिय ऐ जां नेईं रफइद दे; // रद्द करने लेई requestAnimationFrame आईडी संग्रहीत करदा ऐ
एह् चर एनीमेशन लूप गी नियंत्रत करदे न जेह् ड़ा लगातार गेमपैड इनपुट गी पढ़दा ऐ। चरण 2: डीओएम संदर्भें गी हड़पना अगले, असेंगी उनें सारे HTML तत्वें दे संदर्भ मिलदे न जि’नेंगी अस अपडेट करगे: // ================================== // डोम तत्व संदर्भ // ==================================
const btnA = दस्तावेज़.getElementById ("बीटीएन-ए"); const btnB = दस्तावेज़.getElementById ("बीटीएन-बी"); const btnX = दस्तावेज़.getElementById ("बीटीएन-एक्स"); const pause1 = दस्तावेज़.getElementById ("विराम 1"); const pause2 = दस्तावेज़.getElementById ("विराम 2"); const स्थिति = दस्तावेज़.getElementById ("स्थिति");
इनें संदर्भें गी पैह् ले थमां गै संग्रहीत करना डीओएम थमां बार-बार क्वेरी करने थमां मता कुशल ऐ। चरण 3: कीबोर्ड फॉलबैक जोड़ो भौतिक नियंत्रक दे बगैर परीक्षण लेई, अस कीबोर्ड कुंजी गी बटनें कन्नै मैप करगे: // ================================== // KEYBOARD FALLBACK (बिना नियंत्रक दे परीक्षण लेई) // ==================================
const कुंजी नक्शा = { "ए": बीटीएनए, "ख": बीटीएनबी, "एक्स": बीटीएनएक्स, "p": [pause1, pause2] // 'p' कुंजी दोनों विराम सलाखें गी नियंत्रित करदी ऐ };
इस कन्नै अस कीबोर्ड पर कुंजियें गी दबाइयै यूआई परीक्षण करने दी अनुमति दिंदे न। चरण 4: द मेन अपडेट लूप बनाओ इत्थें गै जादू होंदा ऐ। एह् फंक्शन लगातार चलदा ऐ ते गेमपैड स्थिति गी पढ़दा ऐ: // ================================== // मुख्य गेमपैड अपडेट लूप // ==================================
फ़ंक्शन अपडेटगेमपैड () { // सारे जुड़े गेमपैड्स पाओ const गेमपैड्स = नेविगेटर.गेटगेमपैड्स (); अगर (! गेमपैड्स) वापसी;
// पैह्ले जुड़े दे गेमपैड दा इस्तेमाल करो const जीपी = गेमपैड्स [0];
अगर (जीपी) { // "सक्रिय" वर्ग गी टॉगल करियै बटन राज्यें गी अपडेट करो btnA.classList.toggle ("सक्रिय", जीपी.बटन [0]. दबाया); btnB.classList.toggle ("सक्रिय", जीपी.बटन [1]. दबाया); btnX.classList.toggle ("सक्रिय", जीपी.बटन [2]. दबाया);
// विराम बटन संभालो (अधिकांश नियंत्रक पर बटन सूचकांक 9) const pausePressed = जीपी.बटन [9]।दबाया; pause1.classList.toggle ("सक्रिय", विरामदबाया); pause2.classList.toggle ("सक्रिय", विराम दबाया);
// स्थिति प्रदर्शन लेई वर्तमान च दबाए गेदे बटनें दी सूची बनाओ दबावे दे = []; जीपी.बटन.forEach ((बीटीएन, मैं) => { अगर (बीटीएन.दबाया)pressed.push ("बटन " + मैं); });
// स्थिति पाठ अपडेट करो जेकर कोई बटन दबाया गेदा ऐ अगर (दबाया।लंबाई > 0) { status.textContent = "दबाया गेआ: " + दबाया गेआ.जॉइन (", "); } ऐ } ऐ
// अगर डिबगर चलदा ऐ तां लूप जारी रक्खो अगर (चलदा) { rafId = अनुरोधएनीमेशनफ्रेम (अपडेटगेमपैड); } ऐ } ऐ
classList.toggle() विधि इस आधार उप्पर सक्रिय क्लास गी जोड़दी ऐ जां हटांदी ऐ जे बटन दबाया गेदा ऐ जां नेईं, जेह् ड़ी साढ़ी CSS लेयर शैलियें गी ट्रिगर करदी ऐ. चरण 5: कीबोर्ड घटनाएं गी संभालना एह् इवेंट श्रोता कीबोर्ड फॉलबैक गी कम्म करदे न: // ================================== // कीबोर्ड इवेंट हैंडलर // ==================================
document.addEventListener ("कीडाउन", (ई) => { अगर (कीमैप [ई. कुंजी]) { // एकल या कई तत्वों को संभालना अगर (सरणी.isArray (कीमैप [ई. कुंजी])) { keyMap [ई. कुंजी]. forEach (एल => एल.वर्ग सूची.जोड़ना ("सक्रिय")); } else { keyMap [e.key]. classList.add ("सक्रिय"); } ऐ status.textContent = "कुंजी दबाया: " + ई. कुंजी.toUpperCase (); } ऐ });
document.addEventListener ("कीअप", (ई) => { अगर (कीमैप [ई. कुंजी]) { // कुंजी जारी होने पर सक्रिय स्थिति हटाओ अगर (सरणी.isArray (कीमैप [ई. कुंजी])) { keyMap [ई. कुंजी]. forEach (एल => एल.वर्ग सूची. हटाओ ("सक्रिय")); } else { keyMap [e.key]. classList.remove ("सक्रिय"); } ऐ status.textContent = "कुंजी जारी कीती गेई: " + e.key.toUpperCase (); } ऐ });
चरण 6: शुरू/बंद नियंत्रण जोड़ो आखरी च, असेंगी डिबगर गी चालू ते बंद करने दा इक तरीका लोड़चदा ऐ: // ================================== // टॉगल डिबगर चालू / बंद // ==================================
document.getElementById ("टॉगल").addEventListener ("क्लिक", () => { चलना = !चलना; // चलने आली स्थिति गी फ्लिप करो
अगर (चलदा) { status.textContent = "डीबगर चला करदा ऐ ..."; अपडेटगेमपैड (); // अपडेट लूप शुरू करो } else { status.textContent = "डीबगर निष्क्रिय"; रद्द एनीमेशनफ्रेम (rafId); // लूप बंद करो } ऐ });
तो हां, इक बटन दबाओ ते ओह चमकदा ऐ। लाठी धकेल दे ते हिल जांदी है। इ’यां गै ऐ। इक गल्ल होर: कच्चे मूल्य। कदें-कदें तुस सिर्फ नंबर दिक्खना चांह्दे ओ, रोशनी नेईं।
इस स्तर पर, तुसें गी दिक्खना चाहिदा ऐ:
इक साधारण ऑन-स्क्रीन नियंत्रक, बटन जेह् ड़े प्रतिक्रिया करदे न जि’यां तुस उंदे कन्नै गल्लबात करदे ओ, ते... दबाए गेदे बटन सूचकांक गी दस्सने आह् ला इक वैकल्पिक डिबग रीडआउट।
इसगी कम अमूर्त बनाने लेई, इत्थै रियल टाइम च प्रतिक्रिया करने आह् ले ऑन-स्क्रीन नियंत्रक दा इक त्वरित डेमो ऐ:
हुण, रिकार्डिंग शुरू करो दबाने कन्नै सब किश लॉग होई जंदा ऐ, जदूं तकर तुस रिकार्डिंग बंद नेईं करो। 2. CSV/JSON च डेटा निर्यात करना इक बारी जेकर साढ़े कोल इक लॉग ऐ तां अस उसी सेव करना चांह्गे।
चरण 1: डाउनलोड हेल्पर बनाओ पैह् ले, असेंगी इक हेल्पर फंक्शन दी लोड़ ऐ जेह् ड़ा ब्राउज़र च फाइल डाउनलोड गी संभालदा ऐ: // ================================== // फ़ाइल डाउनलोड मददगार // ==================================
फ़ंक्शन डाउनलोडफाइल (फाइल नाम, सामग्री, प्रकार = "पाठ / सादा") { // सामग्री थमां इक ब्लॉब बनाओ const blob = नए Blob ([सामग्री], { प्रकार }); const url = URL.createObjectURL (ब्लॉब);
// इक अस्थायी डाउनलोड लिंक बनाओ ते उस पर क्लिक करो const ए = दस्तावेज़.createElement ("एक"); ए.एचरेफ = यूआरएल; ए.डाउनलोड = फ़ाइल दा नांऽ; ए.क्लिक ();
// डाउनलोड दे बाद वस्तु यूआरएल साफ करो setTimeout (() => URL.revokeObjectURL (url), 100); } ऐ
एह् फंक्शन तुंदे डेटा थमां इक ब्लॉब (बाइनरी बड्डी वस्तु) बनाइयै, इसदे आस्तै इक अस्थायी URL पैदा करियै, ते प्रोग्रामेटिक रूप कन्नै डाउनलोड लिंक पर क्लिक करियै कम्म करदा ऐ. सफाई इस गल्लै गी यकीनी बनांदी ऐ जे अस मेमोरी लीक नेईं करचे। चरण 2: जेएसओएन निर्यात गी संभालो JSON पूरी डेटा संरचना गी बचाने लेई बिल्कुल सही ऐ:
// ================================== // जेएसओएन दे रूप च निर्यात करो // ==================================
document.getElementById ("निर्यात-json").addEventListener ("क्लिक", () => { // जांच करो जे निर्यात करने आस्तै किश ऐ जां नेईं अगर (! फ्रेम्स.लंबाई) { console.warn("निर्यात करने लेई कोई रिकार्डिंग उपलब्ध नेईं ऐ।"); वापस आ जाओ; } ऐ
// मेटाडाटा ते फ्रेम कन्नै इक पेलोड बनाओ const पेलोड = { createdAt: नई तारीख ()।toISOString (), फ्रेम्स };
// स्वरूपित जेएसओएन दे रूप च डाउनलोड करो डाउनलोडफाइल( "गेमपैड-लॉग.जेएसओएन", JSON.stringify (पेलोड, शून्य, 2), ऐ। "एप्लीकेशन/जेएसओएन"। ); });
JSON प्रारूप हर इक चीज़ गी संरचित ते आसानी कन्नै पार्स करने योग्य रखदा ऐ, जिस कन्नै एह् देव उपकरणें च वापस लोड करने जां टीम दे साथियें कन्नै साझा करने आस्तै आदर्श बनांदा ऐ. चरण 3: सीएसवी निर्यात गी संभालो CSV निर्यातें लेई, असेंगी पदानुक्रमित डेटा गी पंक्तियें ते स्तंभें च समतल करने दी लोड़ ऐ:
//=================================== // सीएसवी दे रूप च निर्यात करो // ==================================
document.getElementById ("निर्यात-सीएसवी").addEventListener ("क्लिक", () => { // जांच करो जे निर्यात करने आस्तै किश ऐ जां नेईं अगर (! फ्रेम्स.लंबाई) { console.warn("निर्यात करने लेई कोई रिकार्डिंग उपलब्ध नेईं ऐ।"); वापस आ जाओ; } ऐ
// CSV हेडर पंक्ति (टाइमस्टैम्प, सारे बटन, सारे अक्षें लेई स्तंभ) बनाओ const headerButtons = फ्रेम [0]. बटन.मैप ((_, मैं) => बीटीएन $ {मैं}); const headerAxes = फ्रेम [0]. axes.map ((_, मैं) => अक्ष $ {मैं}); const हेडर = ["टी", ...हेडरबटन, ...हेडरएक्सेस].जॉइन (",") + "\ n";
// सीएसवी डेटा पंक्तियां बनाओ const पंक्तियां = फ्रेम.नक्शा (च => { const btnVals = च.बटन.नक्शा (बी => बी.मूल्य); वापसी [f.t, ...btnVals, ...f.xes].जॉइन (","); }).जॉइन ("\ एन");
// सीएसवी दे रूप च डाउनलोड करो downloadFile ("गेमपैड-लॉग.सीएसवी", हेडर + पंक्तियां, "पाठ / सीएसवी"); });
सीएसवी डेटा विश्लेषण आस्तै शानदार ऐ की जे एह् सीधे एक्सेल जां गूगल शीट च खुलदा ऐ, जिस कन्नै तुसेंगी चार्ट बनाने, डेटा गी फ़िल्टर करने, जां पैटर्न गी नेत्रहीन रूप कन्नै स्पॉट करने दी अनुमति दित्ती जंदी ऐ। हुण जेकर निर्यात बटन अंदर न तां तुसें गी पैनल पर दो नमें विकल्प दिक्खे जाङन: JSON निर्यात करो ते CSV निर्यात करो. जेकर तुस कच्चे लॉग गी वापस अपने देव उपकरणें च फेंकना चांह् दे ओ जां संरचना दे चारों-पार पोक करना चांह् दे ओ तां JSON अच्छा ऐ। दूई बक्खी, सीएसवी सीधे एक्सेल जां गूगल शीट च खुलदा ऐ तां जे तुस इनपुटें गी चार्ट, फ़िल्टर जां तुलना करी सकदे ओ। निम्नलिखित आकृति दस्सदी ऐ जे पैनल उनें अतिरिक्त नियंत्रणें कन्नै केह् दिखदा ऐ।
3. स्नैपशॉट सिस्टम दा कदें-कदें तुसेंगी पूरी रिकार्डिंग दी लोड़ नेईं होंदी, बस इनपुट स्टेटें दा इक त्वरित "स्क्रीनशॉट" दी लोड़ होंदी ऐ। एह् ओह् थाह् र ऐ जित्थें इक टेक स्नैपशॉट बटन मदद करदा ऐ।
ते जावास्क्रिप्ट:
// ================================== // स्नैपशॉट लेओ // ==================================
document.getElementById ("स्नैपशॉट").addEventListener ("क्लिक", () => { // सारे जुड़े गेमपैड्स पाओ const पैड्स = नेविगेटर.गेटगेमपैड्स (); const सक्रियपैड्स = [];
// हर जुड़े गेमपैड दी स्थिति गी लूप करो ते कैप्चर करो के लिए (पैड्स दी कंस्ट जीपी) { अगर (! जीपी) जारी रखो; // खाली स्लॉट छोड़ दे
सक्रियपैड्स.पुश ({ आईडी: gp.id, // नियंत्रक दा नाम / मॉडल टाइमस्टैम्प: प्रदर्शन.अब (), बटन: जीपी.बटन.नक्शा (बी => ({ दबाया: बी.दबाया, मूल्य: बी.मूल्य })), ऐ। कुल्हाड़ियां: [...जीपी.कुल्हाड़ियां]। }); } ऐ
// जांच करो कि कोई गेमपैड मिल गया अगर (! सक्रियपैड्स.लंबाई) { console.warn("स्नैपशॉट आस्तै कोई गेमपैड नेईं जुड़े दा ऐ।"); alert("कोई नियंत्रक दा पता नेईं लग्गा!"); वापस आ जाओ; } ऐ
// लॉग ते उपयोगकर्ता गी सूचित करो console.log ("स्नैपशॉट:", सक्रियपैड्स); alert (स्नैपशॉट लेया! कैप्चर कीता $ {activePads.length} नियंत्रक (s).); });
स्नैपशॉट समें च इक पल च तुंदे नियंत्रक दी सटीक स्थिति गी फ्रीज करदे न। 4. भूत इनपुट रिप्ले अब मजेदार इक के लिए: भूत इनपुट रिप्ले। एह् इक लॉग लैंदा ऐ ते इसगी नेत्रहीन रूप कन्नै वापस चलांदा ऐ जि’यां कोई फैंटम प्लेयर नियंत्रक दा इस्तेमाल करदा ऐ।
दोबारा चलाने लेई जावास्क्रिप्ट: // ================================== // भूत रिप्ले करना // ==================================
document.getElementById ("पुनः खेलो").addEventListener ("क्लिक", () => { // सुनिश्चत करो जे साढ़े कोल रिप्ले करने आस्तै इक रिकार्डिंग ऐ अगर (! फ्रेम्स.लंबाई) { alert("पुनः चलाने लेई कोई रिकार्डिंग नेईं ऐ!"); वापस आ जाओ; } ऐ
console.log ("भूत रिप्ले शुरू करना ...");
// सिंक प्लेबैक लेई ट्रैक टाइमिंग चलो startTime = प्रदर्शन.अब (); फ्रेमइंडैक्स = 0 चलो;
// एनीमेशन लूप गी दोबारा चलाओ फंक्शन कदम () { const अब = प्रदर्शन.अब (); const elapsed = हुण - शुरू होने दा समां;
// उनें सारे फ्रेमें गी प्रोसेस करो जेह् ड़े हून तगर होने चाहिदे हे जबकि (फ्रेमइंडैक्स < फ्रेम्स.लंबाई && फ्रेम्स [फ्रेमइंडैक्स]. टी <= बीत गया) { const फ्रेम = फ्रेम [फ्रेमसूचकांक];
// रिकार्ड कीते गेदे बटन राज्यें कन्नै यूआई अपडेट करो btnA.classList.toggle ("सक्रिय", फ्रेम.बटन [0]. दबाया); btnB.classList.toggle ("सक्रिय", फ्रेम.बटन [1]. दबाया); btnX.classList.toggle ("सक्रिय", फ्रेम.बटन [2]. दबाया);
// स्थिति प्रदर्शन अपडेट करो दबावे दे = []; फ्रेम.बटन.forEach ((बीटीएन, मैं) => { अगर (btn.pressed) pressed.push ("बटन " + मैं); }); अगर (दबाया।लंबाई > 0) { status.textContent = "भूत: " + दबाया।जॉइन (", "); } ऐ
फ्रेमइंडैक्स ++ ऐ; } ऐ
// लूप जारी रखो अगर होर फ्रेम होन अगर (फ्रेमइंडैक्स < फ्रेम्स.लंबाई) { requestAnimationFrame (कदम) दा अनुरोध; } else { console.log ("पुनः चलाओ।"समाप्त हो गया।"); status.textContent = "पुनर्प्ले पूरा"; } ऐ } ऐ
// रिप्ले शुरू करो कदम (); });
डिबगिंग गी थोड़ा होर हत्थ-पैर बनाने लेई, मैं इक भूत रिप्ले जोड़ेआ। इक बारी जेकर तुस इक सत्र रिकार्ड करी लैंदे ओ तां तुस रिप्ले गी हिट करी सकदे ओ ते यूआई गी इसगी अभिनय करदे होई दिक्खी सकदे ओ, लगभग जि’यां कोई फैंटम प्लेयर पैड चला करदा ऐ। इसदे लेई पैनल च इक नमां रिप्ले भूत बटन दिक्खने गी मिलदा ऐ।
रिकार्ड हिट करो, नियंत्रक कन्नै थोड़ा गंदगी करो, बंद करो, फिर रिप्ले करो। यूआई बस तुंदे द्वारा कीते गेदे हर इक चीज़ गी गूंजा करदा ऐ, जि'यां तुंदे इनपुटें दा पालन करने आह् ला भूत। इन एक्स्ट्रा दी परेशानी क्यों?
रिकार्डिंग/निर्यात करने कन्नै परीक्षक गी ठीक-ठीक दस्सने च सहूलियत होंदी ऐ जे केह् होआ ऐ। स्नैपशॉट समें च इक पल फ्रीज होंदे न, सुपर उपयोगी जदूं तुस अजीब बग दा पीछा करदे ओ। भूत रिप्ले ट्यूटोरियल, एक्सेसबिलिटी जांच, जां सिर्फ नियंत्रण सेटअप दी बक्ख-बक्ख तुलना करने आस्तै बड़ा शैल ऐ।
इस बिंदु पर, एह् हून सिर्फ इक साफ-सुथरा डेमो नेईं ऐ, बल्के एह् इक ऐसी चीज ऐ जेह्ड़ी तुस असल च कम्म च ला सकदे ओ। असली-दुनिया दे इस्तेमाल दे मामले हुण असेंगी एह् डिबगर हासल ऐ जेह् ड़ा मता किश करी सकदा ऐ। एह् लाइव इनपुट दस्सदा ऐ, लॉग रिकार्ड करदा ऐ, उनेंगी निर्यात करदा ऐ, ते इत्थूं तगर जे सामान गी दुबारा चलांदा ऐ। पर असली सवाल ए हे कि असल विच कुस कूं परवाह हे? एह् कुस आस्तै उपयोगी ऐ ? गेम डेवलपर्स नियंत्रक कम्म दा हिस्सा न, पर उनेंगी डिबग करना? आमतौर पर इक दर्द। कल्पना करो जे तुस इक लड़ाई गेम कॉम्बो दा परीक्षण करा दे ओ, जि’यां ↓ → + पंच। प्रार्थना करने दे बजाय, तुस उसी दो बारी इक गै चाल्लीं दबाया, तुस उसी इक बारी रिकार्ड करदे ओ, ते उसी दोबारा चलांदे ओ। हो गया। या तुस JSON लॉग गी इक टीम दे साथी कन्नै स्वैप करदे ओ तां जे एह् जांच कीती जाई सकै जे तुंदा मल्टीप्लेयर कोड उंदी मशीन पर इक गै प्रतिक्रिया करदा ऐ जां नेईं। कि’यां बड़ा बड्डा। सुलभता दे अभ्यासकर्ता इस इक’स मेरे दिल दे नेड़े। हर कोई “मानक” नियंत्रक कन्नै नेईं खेड्ढदा। अनुकूली नियंत्रक कदें-कदें अजीब संकेत बाहर फेंकदे न। इस टूल कन्नै तुस ठीक-ठीक दिक्खी सकदे ओ जे केह् होआ’रदा ऐ। अध्यापक, शोधकर्ता, जो भी। ओह् लॉग हड़प सकदे न, उंदी तुलना करी सकदे न, जां इनपुटें गी बक्ख-बक्ख करियै दुबारा चला सकदे न। अचानक अदृश्य सामान साफ हो जांदा ऐ। गुणवत्ता आश्वासन परीक्षण करना परीक्षक आमतौर उप्पर “मैं इत्थै बटन मैश कीते ते एह् टूटी गेआ” जनेह् नोट लिखदे न। बड़ी मददगार नहीं। हुण ? ओह् सटीक प्रेस गी कैप्चर करी सकदे न, लॉग निर्यात करी सकदे न, ते उसी भेजी सकदे न। कोई अंदाजा नहीं। शिक्षाविदों जेकर तुस ट्यूटोरियल जां यूट्यूब विड्स बना करदे ओ तां भूत रिप्ले सोना ऐ। तुस शाब्दिक रूप च आक्खी सकदे ओ जे "इत्थें मैं नियंत्रक कन्नै केह् कीता ऐ," जिसलै के यूआई इसगी होआ करदा दस्सदा ऐ। सफाई राह साफ करदा ऐ। गेम्स दे परे ते हां, एह् सिर्फ खेडें दा गै नेईं ऐ। लोकें रोबोट, कला परियोजनाएं, ते सुलभता इंटरफेस आस्तै नियंत्रक दा इस्तेमाल कीता ऐ। हर बारी इक गै मुद्दा: ब्राउज़र असल च केह् दिक्खा करदा ऐ? इस कन्नै तुसेंगी अंदाजा नेईं लाना पौग। निष्कर्ष निकालना नियंत्रक इनपुट गी डिबग करना हमेशा उड़ने आह् ला अंधा महसूस कीता ऐ। DOM जां CSS दे उल्ट, गेमपैड आस्तै कोई बी बिल्ट-इन इंस्पेक्टर नेईं ऐ; एह् सिर्फ कंसोल च कच्चे नंबर न, शोर-शराबे च आसानी कन्नै खोई जंदे न। एचटीएमएल, सीएसएस, ते जावास्क्रिप्ट दी किश सौ लाइनें कन्नै असें किश होर बनाया:
इक दृश्य डिबगर जेह् ड़ा अदृश्य इनपुट गी दिक्खने आह् ला बनांदा ऐ। इक लेयर सीएसएस सिस्टम जेह् ड़ा यूआई गी साफ ते डिबग करने योग्य बनांदा ऐ। संवर्धनें दा इक सेट (रिकार्डिंग, निर्यात, स्नैपशॉट, भूत रिप्ले) जेह् ड़ा इसगी डेमो थमां डेवलपर टूल तगर पुजांदा ऐ।
एह् प्रोजेक्ट दस्सदा ऐ जे तुस CSS कैस्केड लेयरें च थोह् ड़ी-मती रचनात्मकता कन्नै वेब प्लेटफार्म दी शक्ति गी मिलाइयै किन्नी दूर जाई सकदे ओ। जेह् ड़ा औजार मैं अज्जै कल्लै पूरी चाल्ली समझाया ऐ ओह् ओपन-सोर्स ऐ। तुस GitHub रेपो गी क्लोन करी सकदे ओ ते अपने आपै गी आज़माई सकदे ओ. पर इस थमां बी मती गल्ल एह् ऐ जे तुस इसगी अपना बनाई सकदे ओ। अपनी खुद दी परतें जोड़ो। अपना खुद दा रिप्ले लॉजिक बनाओ। इसगी अपने गेम प्रोटोटाइप कन्नै इकट्ठा करो। या इत्थूं तगर जे इसदा इस्तेमाल इस चाल्ली बी करो जे मैं कल्पना नेईं कीती ही। सिखलाई, सुलभता, जां डेटा विश्लेषण आस्तै। दिन दे अंत च, एह् सिर्फ गेमपैड्स गी डिबग करने दा गै नेईं ऐ। एह् छिपे दे इनपुटें पर इक रोशनी चमकाने दे बारे च ऐ, ते डेवलपर्स गी हार्डवेयर कन्नै कम्म करने दा भरोसा देना ऐ जेह् ड़ा वेब अजें बी पूरी चाल्ली कन्नै नेईं अपनांदा ऐ। तो, अपने नियंत्रक गी प्लग करो, अपने संपादक गी खोलो, ते प्रयोग शुरू करो। तुस इस गल्लै पर हैरान होई सकदे ओ जे तुंदा ब्राउज़र ते तुंदा सीएसएस सच्चें गै केह् पूरा करी सकदे न।
