जब तपाइँ एक नियन्त्रक प्लग इन गर्नुहुन्छ, तपाइँ बटनहरू मास गर्नुहुन्छ, स्टिकहरू सार्नुहोस्, ट्रिगरहरू तान्नुहोस् ... र विकासकर्ताको रूपमा, तपाइँ यसमा कुनै पनि देख्नुहुन्छ। ब्राउजरले यसलाई उठाउँदैछ, निश्चित छ, तर जबसम्म तपाइँ कन्सोलमा नम्बरहरू लगिङ गर्नुहुन्न, यो अदृश्य छ। त्यो Gamepad API को साथ टाउको दुखाइ हो। यो वर्षौं को लागी भएको छ, र यो वास्तव मा धेरै शक्तिशाली छ। तपाईं बटनहरू, स्टिकहरू, ट्रिगरहरू, कार्यहरू पढ्न सक्नुहुन्छ। तर धेरैजसो मानिसहरूले यसलाई छुँदैनन्। किन? किनभने त्यहाँ कुनै प्रतिक्रिया छैन। विकासकर्ता उपकरणहरूमा कुनै प्यानल छैन। यदि नियन्त्रकले तपाइँले सोचेको कुरा गरिरहेको छ भने थाहा पाउने कुनै स्पष्ट तरिका छैन। अन्धो उडेको जस्तो लाग्छ। यसले मलाई सानो उपकरण निर्माण गर्न पर्याप्त बग गर्यो: गेमप्याड क्यास्केड डिबगर। कन्सोल आउटपुटमा हेर्नुको सट्टा, तपाइँ नियन्त्रकको प्रत्यक्ष, अन्तरक्रियात्मक दृश्य प्राप्त गर्नुहुन्छ। केहि थिच्नुहोस् र यसले स्क्रिनमा प्रतिक्रिया गर्दछ। र CSS क्यास्केड तहहरूसँग, शैलीहरू व्यवस्थित रहन्छन्, त्यसैले यो डिबग गर्न सफा हुन्छ। यस पोष्टमा, म तपाइँलाई देखाउनेछु किन डिबगिङ नियन्त्रकहरू यस्तो पीडा हो, कसरी CSS ले यसलाई सफा गर्न मद्दत गर्दछ, र तपाइँ तपाइँको आफ्नै परियोजनाहरूको लागि पुन: प्रयोज्य भिजुअल डिबगर कसरी निर्माण गर्न सक्नुहुन्छ।
यदि तपाइँ ती सबै लग गर्न सक्षम हुनुहुन्छ भने, तपाइँ तुरुन्तै पढ्न नसकिने कन्सोल स्प्यामको साथ समाप्त हुनुहुनेछ। उदाहरणका लागि: [०,०,१,०,०,०,५,०,...] [०,०,०,०,१,०,०,...] [०,०,१,०,०,०,०,...]
के तपाइँ भन्न सक्नुहुन्छ कुन बटन थिचियो? हुनसक्छ, तर केवल आफ्नो आँखा तनाव र केहि इनपुटहरू हराइरहेको पछि। त्यसोभए, होइन, डिबगिङ सजिलै आउँदैन जब यो इनपुटहरू पढ्नको लागि आउँछ। समस्या ३: संरचनाको अभाव तपाईंले द्रुत भिजुअलाइजर सँगै फाल्नुभयो भने पनि, शैलीहरू चाँडै गडबड हुन सक्छ। पूर्वनिर्धारित, सक्रिय र डिबग अवस्थाहरू ओभरल्याप हुन सक्छन्, र स्पष्ट संरचना बिना, तपाईंको CSS भंगुर र विस्तार गर्न गाह्रो हुन्छ। CSS क्यास्केड तहहरूले मद्दत गर्न सक्छ। तिनीहरूले प्राथमिकताद्वारा क्रमबद्ध गरिएका "तहहरू" मा शैलीहरू समूहबद्ध गर्छन्, त्यसैले तपाईंले विशिष्टतासँग लड्न र अनुमान गर्न छोड्नुहुन्छ, "किन मेरो डिबग शैली देखाउँदैन?" यसको सट्टा, तपाइँ अलग चिन्ताहरू राख्नुहुन्छ:
आधार: नियन्त्रकको मानक, प्रारम्भिक उपस्थिति। सक्रिय: थिचिएका बटनहरू र सारियो स्टिकहरूका लागि हाइलाइटहरू। डिबग: विकासकर्ताहरूका लागि ओभरलेहरू (जस्तै, संख्यात्मक रिडआउटहरू, गाइडहरू, र यस्तै अन्य)।
यदि हामीले यस अनुसार CSS मा तहहरू परिभाषित गर्ने हो भने, हामीसँग: /* न्यूनतम देखि उच्चतम प्राथमिकता */ @layer आधार, सक्रिय, डिबग;
@layer आधार { /*...*/ }
@layer सक्रिय { /*...*/ }
@layer डिबग { /*...*/ }
किनभने प्रत्येक तह अनुमानित रूपमा स्ट्याक हुन्छ, तपाईलाई सधैं थाहा हुन्छ कुन नियमहरू जित्छन्। त्यो भविष्यवाणीले डिबगिङलाई सजिलो बनाउँदैन, तर वास्तवमा व्यवस्थित बनाउँछ। हामीले समस्या (अदृश्य, गडबड इनपुट) र दृष्टिकोण (क्यास्केड तहहरूसँग निर्मित भिजुअल डिबगर) कभर गरेका छौं। अब हामी डिबगर निर्माण गर्न चरण-दर-चरण प्रक्रिया मार्फत हिंड्नेछौं। डिबगर अवधारणा लुकेको इनपुट दृश्यात्मक बनाउनको लागि सबैभन्दा सजिलो तरीका भनेको यसलाई स्क्रिनमा कोर्नु हो। यो डिबगरले के गर्छ। बटनहरू, ट्रिगरहरू, र जोइस्टिकहरू सबैले दृश्य प्राप्त गर्छन्।
A थिच्नुहोस्: एउटा सर्कल उज्यालो हुन्छ। छडी नज गर्नुहोस्: सर्कल वरिपरि स्लाइड गर्दछ। ट्रिगर आधा बाटोमा तान्नुहोस्: बार आधा बाटो भरिन्छ।
अब तपाइँ 0s र 1s मा हेरिरहनु भएको छैन, तर वास्तवमा नियन्त्रक प्रत्यक्ष प्रतिक्रिया हेर्दै हुनुहुन्छ। निस्सन्देह, एकपटक तपाईंले पूर्वनिर्धारित, थिचिएको, डिबग जानकारी, हुनसक्छ रेकर्डिङ मोड जस्ता राज्यहरूमा पाइलिङ गर्न थाल्नुभयो भने, CSS ठूलो र जटिल हुन थाल्छ। त्यहाँ क्यास्केड तहहरू काममा आउँछन्। यहाँ एक स्ट्रिप-डाउन उदाहरण हो: @layer आधार { बटन { पृष्ठभूमि: #222; सीमा त्रिज्या: 50%; चौडाइ: 40px; उचाइ: 40px; } }
@layer सक्रिय { .button.pressed { पृष्ठभूमि: #0f0; /* उज्यालो हरियो */ } }
@layer डिबग { बटन:: पछि { सामग्री: attr (डेटा-मान); फन्ट साइज: 12px; रंग: #fff; } }
तह क्रम मापदण्ड: आधार → सक्रिय → डिबग।
आधार नियन्त्रक कोर्छ। सक्रिय ह्यान्डल प्रेस राज्यहरू। ओभरलेहरूमा डिबग थ्रोहरू।
यसलाई यसरी तोड्नुको मतलब तपाईं अनौठो विशिष्टता युद्धहरू लड्नुहुन्न। प्रत्येक तहको आफ्नो ठाउँ हुन्छ, र तपाईलाई सधैं थाहा हुन्छ के जित्छ। यसलाई निर्माण गर्दै पहिले स्क्रिनमा केहि प्राप्त गरौं। यो राम्रो देखिन आवश्यक छैन - केवल अवस्थित हुन आवश्यक छ त्यसैले हामीसँग काम गर्न केहि छ।
गेमप्याड क्यास्केड डिबगर
त्यो शाब्दिक रूपमा बक्सहरू मात्र हो। अझै रोमाञ्चक छैन, तर यसले हामीलाई CSS र जाभास्क्रिप्टको साथ पछि समात्न ह्यान्डलहरू दिन्छ। ठिक छ, म यहाँ क्यास्केड तहहरू प्रयोग गर्दैछु किनभने तपाईंले थप राज्यहरू थपेपछि यसले सामानहरूलाई व्यवस्थित राख्छ। यहाँ एक नराम्रो पास छ:
/* ================================== क्यास्केड तहहरू सेटअप अर्डर मामिलाहरू: आधार → सक्रिय → डिबग ====================================*/
/* लेयर अर्डर अग्रिम परिभाषित गर्नुहोस् */ @layer आधार, सक्रिय, डिबग;
/* तह १: आधार शैलीहरू - पूर्वनिर्धारित उपस्थिति */ @layer आधार { बटन { पृष्ठभूमि: #333; सीमा त्रिज्या: 50%; चौडाइ: 70px; उचाइ: 70px; प्रदर्शन: फ्लेक्स; justify-content: केन्द्र; align-items: केन्द्र; }
पज { चौडाइ: 20px; उचाइ: 70px; पृष्ठभूमि: #333; प्रदर्शन: इनलाइन-ब्लक; } }
/* तह २: सक्रिय अवस्थाहरू - थिचिएका बटनहरू ह्यान्डल गर्दछ */ @layer सक्रिय { .button.active { पृष्ठभूमि: #0f0; /* थिच्दा उज्यालो हरियो */ रूपान्तरण: स्केल (१.१); /* बटन थोरै बढाउँछ */ }
.pause.active { पृष्ठभूमि: #0f0; रूपान्तरण: स्केलवाई(१.१); /* थिच्दा ठाडो रूपमा फैलिन्छ */ } }
/* तह ३: डिबग ओभरले - विकासकर्ता जानकारी */ @layer डिबग { बटन:: पछि { सामग्री: attr (डेटा-मान); /* संख्यात्मक मान देखाउँछ */ फन्ट साइज: 12px; रंग: #fff; } }
यस दृष्टिकोणको सुन्दरता यो हो कि प्रत्येक तहको स्पष्ट उद्देश्य छ। आधार तहले कहिले पनि सक्रियलाई ओभरराइड गर्न सक्दैन, र सक्रियले कहिले पनि डिबगलाई ओभरराइड गर्न सक्दैन, विशिष्टताको पर्वाह नगरी। यसले CSS विशिष्टता युद्धहरू हटाउँछ जुन सामान्यतया डिबगिङ उपकरणहरू प्लेग गर्दछ। अब यस्तो देखिन्छ कि केहि क्लस्टरहरू अँध्यारो पृष्ठभूमिमा बसिरहेका छन्। इमानदारीपूर्वक, धेरै खराब छैन।
जाभास्क्रिप्ट थप्दै जाभास्क्रिप्ट समय। यो जहाँ नियन्त्रक वास्तवमा केहि गर्छ। हामी यो चरणबद्ध रूपमा निर्माण गर्नेछौं। चरण 1: राज्य व्यवस्थापन सेट अप गर्नुहोस् पहिले, हामीलाई डिबगरको अवस्था ट्र्याक गर्न चरहरू चाहिन्छ: // ================================= // राज्य व्यवस्थापन // =================================
चल्न दिनुहोस् = गलत; // डिबगर सक्रिय छ कि छैन ट्र्याक गर्दछ rafId दिनुहोस्; // रद्दको लागि अनुरोध एनिमेशनफ्रेम आईडी भण्डार गर्दछ
यी चरहरूले एनिमेसन लूपलाई नियन्त्रण गर्दछ जुन लगातार गेमप्याड इनपुट पढ्छ। चरण २: DOM सन्दर्भहरू लिनुहोस् अर्को, हामीले अपडेट गर्ने सबै HTML तत्वहरूको सन्दर्भहरू पाउँछौं: // ================================= // डोम तत्व सन्दर्भहरू // =================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pause1"); const pause2 = document.getElementById("pause2"); const स्थिति = document.getElementById("स्थिति");
यी सन्दर्भहरूलाई अगाडि भण्डारण गर्नु DOM लाई बारम्बार सोध्नु भन्दा बढी प्रभावकारी हुन्छ। चरण 3: किबोर्ड फलब्याक थप्नुहोस् भौतिक नियन्त्रक बिना परीक्षणको लागि, हामी बटनहरूमा किबोर्ड कुञ्जीहरू नक्सा गर्नेछौं: // ================================= // किबोर्ड फलब्याक (नियन्त्रक बिना परीक्षणको लागि) // =================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' कुञ्जीले दुबै पज बारहरू नियन्त्रण गर्छ };
यसले हामीलाई किबोर्डमा कुञ्जीहरू थिचेर UI परीक्षण गर्न दिन्छ। चरण 4: मुख्य अपडेट लूप सिर्जना गर्नुहोस् यहाँ छ जहाँ जादू हुन्छ। यो प्रकार्य निरन्तर चल्छ र गेमप्याड अवस्था पढ्छ: // ================================= // मुख्य गेमप्याड अपडेट लूप // =================================
प्रकार्य अपडेट गेमप्याड() { // सबै जडान भएका गेमप्याडहरू प्राप्त गर्नुहोस् const gamepads = navigator.getGamepads(); यदि (!gamepads) फर्काउँछ;
// पहिलो जडान गरिएको गेमप्याड प्रयोग गर्नुहोस् const gp = gamepads [0];
यदि (gp) { // "सक्रिय" वर्ग टगल गरेर बटन अवस्थाहरू अपडेट गर्नुहोस् btnA.classList.toggle("active", gp.buttons[0].pressed); btnB.classList.toggle("active", gp.buttons[1].pressed); btnX.classList.toggle("active", gp.buttons[2].pressed);
// ह्यान्डल पज बटन (अधिकांश नियन्त्रकहरूमा बटन अनुक्रमणिका 9) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("active", pausepressed); pause2.classList.toggle("active", pausepressed);
// स्थिति प्रदर्शनको लागि हालै थिचिएका बटनहरूको सूची बनाउनुहोस् थिच्नुहोस् = []; gp.buttons.forEach((btn, i) => { यदि (btn.pressed)pressed.push("बटन" + i); });
// कुनै बटन थिचेमा स्थिति पाठ अपडेट गर्नुहोस् यदि (थिचिएको. लम्बाइ > ०) { status.textContent = "थिचिएको: " + pressed.join(", "); } }
// यदि डिबगर चलिरहेको छ भने लूप जारी राख्नुहोस् यदि (चलिरहेको) { rafId = अनुरोध एनिमेशन फ्रेम (अपडेट गेमप्याड); } }
classList.toggle() विधिले बटन थिचेको छ कि छैन भन्ने आधारमा सक्रिय वर्ग थप्छ वा हटाउँछ, जसले हाम्रो CSS तह शैलीहरूलाई ट्रिगर गर्छ। चरण 5: किबोर्ड घटनाहरू ह्यान्डल गर्नुहोस् यी घटना श्रोताहरूले किबोर्ड फलब्याक काम गर्दछ: // ================================= // किबोर्ड घटना ह्यान्डलरहरू // =================================
document.addEventListener("keydown", (e) => { यदि (keyMap[e.key]) { // एकल वा बहु तत्वहरू ह्यान्डल गर्नुहोस् यदि (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } अरु { keyMap[e.key].classList.add("active"); } status.textContent = "कुञ्जी थिचिएको: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { यदि (keyMap[e.key]) { // कुञ्जी जारी हुँदा सक्रिय स्थिति हटाउनुहोस् यदि (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } अरु { keyMap[e.key].classList.remove("active"); } status.textContent = "कुञ्जी जारी: " + e.key.toUpperCase(); } });
चरण 6: स्टार्ट/स्टप कन्ट्रोल थप्नुहोस् अन्तमा, हामीलाई डिबगर अन र अफ टगल गर्ने तरिका चाहिन्छ: // ================================= // टगल डिबगर अन/अफ // =================================
document.getElementById("toggle").addEventListener("क्लिक", () => { दौड = ! दौड ; // चलिरहेको अवस्था फ्लिप गर्नुहोस्
यदि (चलिरहेको) { status.textContent = "डिबगर चलिरहेको..."; अपडेट गेमप्याड(); // अपडेट लूप सुरु गर्नुहोस् } अरु { status.textContent = "डिबगर निष्क्रिय"; animationFrame (rafId) रद्द गर्नुहोस्; // लूप रोक्नुहोस् } });
त्यसोभए, एउटा बटन थिच्नुहोस् र यो चम्किन्छ। स्टिकलाई धक्का दिनुहोस् र यो सर्छ। त्यो हो। अर्को कुरा: कच्चा मानहरू। कहिलेकाहीँ तपाईं संख्याहरू मात्र हेर्न चाहनुहुन्छ, बत्ती होइन।
यस चरणमा, तपाईंले हेर्नुपर्छ:
एक साधारण अन-स्क्रिन नियन्त्रक, तपाईंले तिनीहरूसँग अन्तरक्रिया गर्दा प्रतिक्रिया गर्ने बटनहरू, र थिचिएको बटन सूचकांकहरू देखाउँदै वैकल्पिक डिबग रिडआउट।
यसलाई कम सार बनाउनको लागि, यहाँ वास्तविक समयमा प्रतिक्रिया गर्ने अन-स्क्रिन नियन्त्रकको द्रुत डेमो छ:
अब, स्टार्ट रेकर्डिङ थिच्दा तपाईंले रेकर्डिङ बन्द नगरेसम्म सबै कुरा लगिन्छ। 2. CSV/JSON मा डाटा निर्यात गर्दै एक पटक हामीसँग लग छ, हामी यसलाई बचत गर्न चाहन्छौं।
चरण 1: डाउनलोड हेल्पर सिर्जना गर्नुहोस् पहिले, हामीलाई ब्राउजरमा फाइल डाउनलोडहरू ह्यान्डल गर्ने सहायक प्रकार्य चाहिन्छ: // ================================= // फाइल डाउनलोड हेल्पर // =================================
प्रकार्य डाउनलोडफाइल(फाइलनाम, सामग्री, प्रकार = "पाठ/सादा") { // सामग्रीबाट ब्लब सिर्जना गर्नुहोस् const blob = नयाँ ब्लब ([सामग्री], { प्रकार}); const url = URL.createObjectURL(blob);
// अस्थायी डाउनलोड लिङ्क सिर्जना गर्नुहोस् र यसलाई क्लिक गर्नुहोस् const a = document.createElement("a"); a.href = url; a.download = फाइलनाम; a.click();
// डाउनलोड पछि वस्तु URL सफा गर्नुहोस् setTimeout(() => URL.revokeObjectURL(url), 100); }
यो प्रकार्यले तपाइँको डेटाबाट ब्लब (बाइनरी ठूलो वस्तु) सिर्जना गरेर, यसको लागि अस्थायी URL उत्पन्न गरेर, र प्रोग्रामेटिक रूपमा डाउनलोड लिङ्क क्लिक गरेर काम गर्दछ। सफाईले हामीले मेमोरी लीक नगर्ने सुनिश्चित गर्दछ। चरण 2: JSON निर्यात ह्यान्डल गर्नुहोस् JSON पूर्ण डाटा संरचना संरक्षणको लागि उपयुक्त छ:
// ================================= // JSON को रूपमा निर्यात गर्नुहोस् // =================================
document.getElementById("export-json").addEventListener("क्लिक", () => { // निर्यात गर्न केहि छ भने जाँच गर्नुहोस् यदि (!frames.length) { console.warn("निर्यात गर्नको लागि कुनै रेकर्डिङ उपलब्ध छैन।"); फिर्ता; }
// मेटाडेटा र फ्रेमहरूको साथ पेलोड सिर्जना गर्नुहोस् const payload = { मा सिर्जना गरिएको: नयाँ मिति().toISOSstring(), फ्रेमहरू };
// ढाँचा JSON को रूपमा डाउनलोड गर्नुहोस् डाउनलोड फाइल( "gamepad-log.json", JSON.stringify(payload, null, 2), "application/json" ); });
JSON ढाँचाले सबै कुरालाई संरचित र सजिलै पार्सयोग्य राख्छ, यसलाई dev उपकरणहरूमा लोड गर्न वा टोलीका साथीहरूसँग साझेदारी गर्नको लागि आदर्श बनाउँछ। चरण 3: CSV निर्यात ह्यान्डल गर्नुहोस् CSV निर्यातका लागि, हामीले पङ्क्ति र स्तम्भहरूमा श्रेणीबद्ध डेटालाई समतल गर्नुपर्छ:
//================================= // CSV को रूपमा निर्यात गर्नुहोस् // =================================
document.getElementById("export-csv").addEventListener("क्लिक", () => { // निर्यात गर्न केहि छ भने जाँच गर्नुहोस् यदि (!frames.length) { console.warn("निर्यात गर्नको लागि कुनै रेकर्डिङ उपलब्ध छैन।"); फिर्ता; }
// CSV हेडर पङ्क्ति बनाउनुहोस् (टाइमस्ट्याम्पका लागि स्तम्भहरू, सबै बटनहरू, सबै अक्षहरू) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV डेटा पङ्क्तिहरू बनाउनुहोस् const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); फिर्ता [f.t, ...btnVals, ...f.axes]।join(","); }) सामेल हुनुहोस्("\n");
// CSV को रूपमा डाउनलोड गर्नुहोस् डाउनलोड फाइल ("gamepad-log.csv", हेडर + पङ्क्तिहरू, "text/csv"); });
CSV डेटा विश्लेषणको लागि उत्कृष्ट छ किनभने यो सीधा एक्सेल वा Google पानाहरूमा खुल्छ, तपाईंलाई चार्टहरू, फिल्टर डेटा, वा स्पट ढाँचाहरू दृश्यात्मक रूपमा सिर्जना गर्न दिन्छ। अब जब निर्यात बटनहरू छन्, तपाईंले प्यानलमा दुई नयाँ विकल्पहरू देख्नुहुनेछ: JSON र निर्यात CSV। JSON राम्रो छ यदि तपाइँ कच्चा लग लाई तपाइँको dev उपकरणहरूमा फिर्ता फ्याँक्न वा संरचना वरिपरि पोक गर्न चाहनुहुन्छ भने। CSV, अर्कोतर्फ, सीधा एक्सेल वा Google पानाहरूमा खुल्छ ताकि तपाईं चार्ट, फिल्टर, वा इनपुटहरू तुलना गर्न सक्नुहुन्छ। निम्न चित्रले ती अतिरिक्त नियन्त्रणहरूसँग प्यानल कस्तो देखिन्छ भनेर देखाउँछ।
3. स्न्यापसट प्रणाली कहिलेकाहीँ तपाईंलाई पूर्ण रेकर्डिङको आवश्यकता पर्दैन, केवल इनपुट अवस्थाहरूको द्रुत "स्क्रिनसट"। त्यो जहाँ स्न्यापशट लिनुहोस् बटनले मद्दत गर्दछ।
र जाभास्क्रिप्ट:
// ================================= // स्न्यापसट लिनुहोस् // =================================
document.getElementById("snapshot").addEventListener("क्लिक", () => { // सबै जडान भएका गेमप्याडहरू प्राप्त गर्नुहोस् const pads = navigator.getGamepads(); const activePads = [];
// लुप मार्फत र प्रत्येक जडान गेमप्याड को स्थिति कब्जा (प्याडको जीपी const) को लागि यदि (!gp) जारी राख्नुहोस्; // खाली स्लटहरू छोड्नुहोस्
ActivePads.push({ आईडी: gp.id, // नियन्त्रक नाम/मोडेल टाइमस्ट्याम्प: performance.now(), बटनहरू: gp.buttons.map(b => ({ थिचिएको: b.pressed, मान: b.value })), अक्षहरू: [...gp.axes] }); }
// कुनै गेमप्याड फेला पर्यो भने जाँच गर्नुहोस् यदि (!activePads.length) { console.warn("स्न्यापसटको लागि कुनै गेमप्याड जडान गरिएको छैन।"); चेतावनी ("कुनै नियन्त्रक पत्ता लागेन!"); फिर्ता; }
// लग र प्रयोगकर्तालाई सूचित गर्नुहोस् console.log("स्न्यापसट:", सक्रियप्याड); अलर्ट (स्न्यापसट लिइयो! क्याप्चर गरिएको ${activePads.length} नियन्त्रक(हरू)); });
स्न्यापशटहरूले समयको एक पलमा तपाईंको नियन्त्रकको सही अवस्था स्थिर गर्दछ। 4. भूत इनपुट रिप्ले अब रमाईलोको लागि: भूत इनपुट रिप्ले। यसले लग लिन्छ र प्रेत खेलाडीले नियन्त्रक प्रयोग गरिरहेको जस्तै दृश्यात्मक रूपमा खेल्छ।
रिप्लेको लागि जाभास्क्रिप्ट: // ================================= // भूत रिप्ले // =================================
document.getElementById("रिप्ले")।addEventListener("क्लिक", () => { // सुनिश्चित गर्नुहोस् कि हामीसँग पुन: प्ले गर्न रेकर्डिङ छ यदि (!frames.length) { चेतावनी ("रिप्ले गर्न कुनै रेकर्डिङ छैन!"); फिर्ता; }
console.log("भूत रिप्ले सुरु गर्दै...");
// सिंक गरिएको प्लेब्याकको लागि ट्र्याक समय startTime = performance.now(); चलो frameIndex = 0;
// एनिमेसन लूप रिप्ले गर्नुहोस् कार्य चरण() { const now = performance.now(); const elapsed = now - starttime;
// सबै फ्रेमहरू प्रशोधन गर्नुहोस् जुन अहिले सम्म हुनुपर्दछ जबकि (frameIndex < frames.length && frames[frameIndex].t <= बितेको) { const फ्रेम = फ्रेमहरू [frameIndex];
// रेकर्ड गरिएको बटन अवस्थाहरूसँग UI अद्यावधिक गर्नुहोस् btnA.classList.toggle("active", frame.buttons[0].pressed); btnB.classList.toggle("active", frame.buttons[1].pressed); btnX.classList.toggle("active", frame.buttons[2].pressed);
// स्थिति प्रदर्शन अद्यावधिक गर्नुहोस् थिच्नुहोस् = []; frame.buttons.forEach((btn, i) => { यदि (btn.pressed) pressed.push("बटन" + i); }); यदि (थिचिएको. लम्बाइ > ०) { status.textContent = "भूत: " + pressed.join(", "); }
frameIndex++; }
// लूप जारी राख्नुहोस् यदि त्यहाँ धेरै फ्रेमहरू छन् यदि (frameIndex < frames.length) { अनुरोध एनिमेसनफ्रेम(चरण); } अरु { console.log("रिप्लेसमाप्त।"); status.textContent = "रिप्ले पूरा"; } }
// रिप्ले सुरु गर्नुहोस् कदम(); });
डिबगिङलाई अलि बढी ह्यान्ड्स-अन बनाउन, मैले भूत रिप्ले थपें। एकचोटि तपाईंले सत्र रेकर्ड गरिसकेपछि, तपाईं रिप्ले हिट गर्न सक्नुहुन्छ र UI ले यसलाई कार्य गरेको हेर्न सक्नुहुन्छ, लगभग एक प्रेत खेलाडीले प्याड चलाउँदैछ। एउटा नयाँ रिप्ले भूत बटन यसको लागि प्यानलमा देखा पर्दछ।
रेकर्ड हिट गर्नुहोस्, नियन्त्रकसँग अलिकति गडबड गर्नुहोस्, रोक्नुहोस्, त्यसपछि पुन: प्ले गर्नुहोस्। UI ले तपाईंले गर्नुभएका सबै कुराहरू प्रतिध्वनि गर्दछ, जस्तै तपाईंको इनपुटहरू पछ्याउने भूत। यी अतिरिक्तहरूसँग किन चिन्ता गर्ने?
रेकर्डिङ/निर्यातले परीक्षकहरूलाई ठ्याक्कै के भयो भनेर देखाउन सजिलो बनाउँछ। स्न्यापशटहरू समयमै एक पल स्थिर हुन्छन्, जब तपाईं अनौठो बगहरू पछ्याउँदै हुनुहुन्छ भने अति उपयोगी हुन्छ। घोस्ट रिप्ले ट्यूटोरियलहरू, पहुँच जाँचहरू, वा केवल नियन्त्रण सेटअपहरू सँगसँगै तुलना गर्नका लागि उत्कृष्ट छ।
यस बिन्दुमा, यो अब एक सफा डेमो मात्र होइन, तर तपाईले वास्तवमा काम गर्न सक्नुहुनेछ। वास्तविक-विश्व प्रयोग केसहरू अब हामीले यो डिबगर पाएका छौं जसले धेरै गर्न सक्छ। यसले प्रत्यक्ष इनपुट देखाउँछ, लगहरू रेकर्ड गर्दछ, तिनीहरूलाई निर्यात गर्दछ, र सामानहरू पुन: प्ले गर्दछ। तर वास्तविक प्रश्न यो हो: कसले वास्तवमा ख्याल राख्छ? यो कसको लागि उपयोगी छ? खेल विकासकर्ताहरू नियन्त्रकहरू कामको अंश हुन्, तर तिनीहरूलाई डिबग गर्दै? सामान्यतया दुखाइ हुन्छ। कल्पना गर्नुहोस् कि तपाइँ ↓ → + punch जस्ता फाइटिंग गेम कम्बो परीक्षण गर्दै हुनुहुन्छ। प्रार्थना गर्नुको सट्टा, तपाईंले यसलाई दुई पटक थिच्नुभयो, तपाईंले यसलाई एक पटक रेकर्ड गर्नुभयो, र यसलाई पुन: प्ले गर्नुहोस्। सकियो। वा तपाईँको मल्टिप्लेयर कोड तिनीहरूको मेसिनमा उस्तै प्रतिक्रिया दिन्छ कि भनेर जाँच गर्नको लागि तपाइँ JSON लगहरू एक टोली साथीसँग स्व्याप गर्नुहुन्छ। त्यो ठूलो छ। पहुँच अभ्यासकर्ताहरू यो मेरो मुटुको नजिक छ। सबैले "मानक" नियन्त्रकसँग खेल्दैनन्। अनुकूली नियन्त्रकहरूले कहिलेकाहीं अनौठो संकेतहरू फ्याँक्छन्। यस उपकरणको साथ, तपाइँ वास्तवमा के भइरहेको छ हेर्न सक्नुहुन्छ। शिक्षक, अनुसन्धानकर्ता, जो कोही। तिनीहरूले लगहरू समात्न सक्छन्, तिनीहरूलाई तुलना गर्न सक्छन्, वा साथ-साथ इनपुटहरू पुन: प्ले गर्न सक्छन्। अचानक, अदृश्य सामानहरू स्पष्ट हुन्छन्। गुणस्तर आश्वासन परीक्षण परीक्षकहरूले सामान्यतया नोटहरू लेख्छन् "मैले यहाँ बटनहरू म्यास गरें र यो भाँचियो।" धेरै उपयोगी छैन। अब? तिनीहरूले सही प्रेसहरू कब्जा गर्न सक्छन्, लग निर्यात, र यसलाई पठाउन। कुनै अनुमान छैन। शिक्षकहरू यदि तपाइँ ट्यूटोरियल वा YouTube vids बनाउँदै हुनुहुन्छ भने, भूत रिप्ले सुन हो। तपाईले शाब्दिक रूपमा भन्न सक्नुहुन्छ, "यहाँ मैले नियन्त्रकसँग के गरेँ," जबकि UI ले यो भइरहेको देखाउँछ। स्पष्टीकरणहरूलाई अझ स्पष्ट बनाउँछ। खेल भन्दा बाहिर र हो, यो खेलको बारेमा मात्र होइन। मानिसहरूले रोबोटहरू, कला परियोजनाहरू, र पहुँच इन्टरफेसहरूको लागि नियन्त्रकहरू प्रयोग गरेका छन्। हरेक पटक एउटै मुद्दा: ब्राउजरले वास्तवमा के हेरिरहेको छ? यससँग, तपाईंले अनुमान गर्नुपर्दैन। निष्कर्ष नियन्त्रक इनपुट डिबग गर्दा सधैँ अन्धा उडेको जस्तो महसुस भएको छ। DOM वा CSS को विपरीत, गेमप्याडहरूको लागि कुनै निर्मित इन्सपेक्टर छैन; यो कन्सोलमा कच्चा नम्बरहरू मात्र हो, आवाजमा सजिलै हरायो। HTML, CSS, र JavaScript को केहि सय लाइनहरु संग, हामीले केहि फरक बनायौं:
एक दृश्य डिबगर जसले अदृश्य इनपुटहरू दृश्यात्मक बनाउँछ। एउटा स्तरित CSS प्रणाली जसले UI लाई सफा र डिबग गर्न मिल्छ। संवर्द्धनहरूको सेट (रेकर्डिङ, निर्यात, स्न्यापसट, भूत रिप्ले) जसले यसलाई डेमोबाट विकासकर्ता उपकरणमा उचाल्छ।
यो परियोजनाले वेब प्लेटफर्मको शक्तिलाई CSS क्यास्केड तहहरूमा थोरै रचनात्मकतासँग मिलाएर तपाईं कति टाढा जान सक्नुहुन्छ भनेर देखाउँछ। मैले भर्खरै वर्णन गरेको उपकरण खुला स्रोत हो। तपाईं GitHub रेपो क्लोन गर्न सक्नुहुन्छ र यसलाई आफ्नै लागि प्रयास गर्नुहोस्। तर अझ महत्त्वपूर्ण कुरा, तपाईं यसलाई आफ्नै बनाउन सक्नुहुन्छ। तपाईंको आफ्नै तहहरू थप्नुहोस्। तपाईंको आफ्नै रिप्ले तर्क बनाउनुहोस्। यसलाई तपाइँको खेल प्रोटोटाइप संग एकीकृत गर्नुहोस्। वा मैले कल्पना नगरेको तरिकामा पनि प्रयोग गर्नुहोस्। शिक्षण, पहुँच, वा डेटा विश्लेषणको लागि। दिनको अन्त्यमा, यो केवल गेमप्याडहरू डिबग गर्ने बारे होइन। यो लुकेका इनपुटहरूमा उज्यालो चम्काउने, र वेबले अझै पूर्ण रूपमा अँगालेको छैन भन्ने हार्डवेयरसँग काम गर्न विकासकर्ताहरूलाई आत्मविश्वास दिने बारे हो। त्यसोभए, तपाइँको नियन्त्रक प्लग इन गर्नुहोस्, तपाइँको सम्पादक खोल्नुहोस्, र प्रयोग सुरु गर्नुहोस्। तपाइँको ब्राउजर र तपाइँको CSS ले साँच्चै के गर्न सक्छ भनेर तपाइँ छक्क पर्न सक्नुहुन्छ।
