మీరు కంట్రోలర్ను ప్లగ్ చేసినప్పుడు, మీరు బటన్లను మాష్ చేస్తారు, స్టిక్లను కదిలిస్తారు, ట్రిగ్గర్లను లాగండి... మరియు డెవలపర్గా, మీకు ఏదీ కనిపించదు. బ్రౌజర్ దీన్ని ఎంచుకుంటుంది, ఖచ్చితంగా, కానీ మీరు కన్సోల్లో నంబర్లను లాగిన్ చేయకపోతే, అది కనిపించదు. గేమ్ప్యాడ్ APIతో ఇది తలనొప్పి. ఇది చాలా సంవత్సరాలుగా ఉంది మరియు ఇది చాలా శక్తివంతమైనది. మీరు బటన్లు, కర్రలు, ట్రిగ్గర్లు, రచనలను చదవగలరు. కానీ చాలా మంది దీనిని ముట్టుకోరు. ఎందుకు? ఎందుకంటే ఫీడ్బ్యాక్ లేదు. డెవలపర్ సాధనాల్లో ప్యానెల్ లేదు. కంట్రోలర్ మీరు అనుకున్నది కూడా చేస్తుందో లేదో తెలుసుకోవడానికి స్పష్టమైన మార్గం లేదు. గుడ్డిగా ఎగిరిపోతున్నట్లు అనిపిస్తుంది. గేమ్ప్యాడ్ క్యాస్కేడ్ డీబగ్గర్ అనే చిన్న సాధనాన్ని రూపొందించడానికి అది నాకు తగినంతగా బగ్ చేసింది. కన్సోల్ అవుట్పుట్ని చూసే బదులు, మీరు కంట్రోలర్ యొక్క ప్రత్యక్ష, ఇంటరాక్టివ్ వీక్షణను పొందుతారు. ఏదైనా నొక్కండి మరియు అది స్క్రీన్పై ప్రతిస్పందిస్తుంది. మరియు CSS క్యాస్కేడ్ లేయర్లతో, స్టైల్లు క్రమబద్ధంగా ఉంటాయి, కాబట్టి డీబగ్ చేయడం క్లీనర్గా ఉంటుంది. ఈ పోస్ట్లో, డీబగ్గింగ్ కంట్రోలర్లు ఎందుకు బాధాకరంగా ఉన్నాయో, CSS దాన్ని ఎలా శుభ్రం చేయడంలో సహాయపడుతుంది మరియు మీ స్వంత ప్రాజెక్ట్ల కోసం మీరు పునర్వినియోగ దృశ్య డీబగ్గర్ను ఎలా రూపొందించవచ్చో నేను మీకు చూపుతాను.
మీరు వాటన్నింటినీ లాగ్ చేయగలిగినప్పటికీ, మీరు త్వరగా చదవలేని కన్సోల్ స్పామ్తో ముగుస్తుంది. ఉదాహరణకు: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
ఏ బటన్ నొక్కారో చెప్పగలరా? బహుశా, కానీ మీ కళ్ళు వడకట్టిన తర్వాత మరియు కొన్ని ఇన్పుట్లను కోల్పోయిన తర్వాత మాత్రమే. కాబట్టి, లేదు, ఇన్పుట్లను చదవడానికి వచ్చినప్పుడు డీబగ్గింగ్ సులభంగా రాదు. సమస్య 3: నిర్మాణం లేకపోవడం మీరు శీఘ్ర విజువలైజర్ని కలిపి ఉంచినప్పటికీ, స్టైల్స్ త్వరగా గజిబిజిగా మారతాయి. డిఫాల్ట్, యాక్టివ్ మరియు డీబగ్ స్టేట్లు అతివ్యాప్తి చెందుతాయి మరియు స్పష్టమైన నిర్మాణం లేకుండా, మీ CSS పెళుసుగా మారుతుంది మరియు పొడిగించడం కష్టం అవుతుంది. CSS క్యాస్కేడ్ లేయర్లు సహాయపడతాయి. వారు ప్రాధాన్యత ప్రకారం క్రమబద్ధీకరించబడిన "లేయర్లు"గా శైలులను సమూహపరుస్తారు, కాబట్టి మీరు నిర్దిష్టతతో పోరాడటం మానేసి, "నా డీబగ్ శైలి ఎందుకు కనిపించడం లేదు?" బదులుగా, మీరు ప్రత్యేక ఆందోళనలను నిర్వహిస్తారు:
బేస్: కంట్రోలర్ యొక్క ప్రమాణం, ప్రారంభ ప్రదర్శన. సక్రియం: నొక్కిన బటన్లు మరియు కదిలిన స్టిక్ల కోసం ముఖ్యాంశాలు. డీబగ్: డెవలపర్ల కోసం అతివ్యాప్తులు (ఉదా., సంఖ్యా రీడౌట్లు, గైడ్లు మరియు మొదలైనవి).
మేము దీని ప్రకారం CSSలో లేయర్లను నిర్వచించినట్లయితే, మనకు ఇవి ఉంటాయి: /* తక్కువ నుండి అత్యధిక ప్రాధాన్యత */ @లేయర్ బేస్, యాక్టివ్, డీబగ్;
@లేయర్ బేస్ { /* ... */ }
@లేయర్ యాక్టివ్ { /* ... */ }
@లేయర్ డీబగ్ { /* ... */ }
ప్రతి లేయర్ ఊహాజనితంగా పేర్చబడినందున, ఏ నియమాలు గెలుస్తాయో మీకు ఎల్లప్పుడూ తెలుసు. ఆ ఊహాజనిత డీబగ్గింగ్ను సులభతరం చేస్తుంది, కానీ వాస్తవానికి నిర్వహించదగినది. మేము సమస్య (అదృశ్య, గజిబిజి ఇన్పుట్) మరియు విధానాన్ని (క్యాస్కేడ్ లేయర్లతో రూపొందించిన విజువల్ డీబగ్గర్) కవర్ చేసాము. ఇప్పుడు మేము డీబగ్గర్ను రూపొందించడానికి దశల వారీ ప్రక్రియ ద్వారా నడుస్తాము. డీబగ్గర్ కాన్సెప్ట్ దాచిన ఇన్పుట్ను కనిపించేలా చేయడానికి సులభమైన మార్గం దానిని స్క్రీన్పై గీయడం. ఈ డీబగ్గర్ అదే చేస్తుంది. బటన్లు, ట్రిగ్గర్లు మరియు జాయ్స్టిక్లు అన్నీ దృశ్యమానాన్ని పొందుతాయి.
A నొక్కండి: ఒక వృత్తం వెలిగిపోతుంది. కర్రను నొక్కండి: సర్కిల్ చుట్టూ జారిపోతుంది. ట్రిగ్గర్ను సగానికి లాగండి: ఒక బార్ సగానికి నిండిపోతుంది.
ఇప్పుడు మీరు 0సె మరియు 1సెల వైపు చూడడం లేదు, కానీ వాస్తవానికి నియంత్రిక ప్రత్యక్షంగా ప్రతిస్పందించడం చూస్తున్నారు. వాస్తవానికి, మీరు డిఫాల్ట్, నొక్కిన, డీబగ్ సమాచారం, బహుశా రికార్డింగ్ మోడ్ వంటి స్టేట్లను సేకరించడం ప్రారంభించిన తర్వాత, CSS పెద్దదిగా మరియు సంక్లిష్టంగా మారడం ప్రారంభమవుతుంది. అక్కడ క్యాస్కేడ్ పొరలు ఉపయోగపడతాయి. ఇక్కడ తొలగించబడిన ఉదాహరణ: @లేయర్ బేస్ { .బటన్ { నేపథ్యం: #222; సరిహద్దు-వ్యాసార్థం: 50%; వెడల్పు: 40px; ఎత్తు: 40px; } }
@లేయర్ యాక్టివ్ { .button.pressed { నేపథ్యం: #0f0; /* ప్రకాశవంతమైన ఆకుపచ్చ */ } }
@లేయర్ డీబగ్ { .బటన్::తరువాత { కంటెంట్: attr(డేటా-విలువ); ఫాంట్ పరిమాణం: 12px; రంగు: #fff; } }
లేయర్ ఆర్డర్ ముఖ్యమైనది: బేస్ → యాక్టివ్ → డీబగ్.
బేస్ కంట్రోలర్ను గీస్తుంది. యాక్టివ్ని నొక్కిన స్థితులను నిర్వహిస్తుంది. డీబగ్ ఓవర్లేస్పై విసురుతుంది.
దీన్ని ఇలా విచ్ఛిన్నం చేయడం అంటే మీరు విచిత్రమైన నిర్దిష్టత యుద్ధాలతో పోరాడటం లేదని అర్థం. ప్రతి పొర దాని స్థానాన్ని కలిగి ఉంటుంది మరియు ఏది గెలుస్తుందో మీకు ఎల్లప్పుడూ తెలుసు. బిల్డింగ్ ఇట్ అవుట్ ముందుగా ఏదో ఒకటి తెరపైకి తెచ్చుకుందాం. ఇది అందంగా కనిపించాల్సిన అవసరం లేదు - ఉనికిలో ఉండాలి కాబట్టి మనం పని చేయడానికి ఏదైనా ఉంది.
గేమ్ప్యాడ్ క్యాస్కేడ్ డీబగ్గర్
ఇది అక్షరాలా పెట్టెలు. ఇంకా ఉత్తేజకరమైనది కాదు, కానీ ఇది CSS మరియు JavaScriptతో తర్వాత పట్టుకోవడానికి మాకు హ్యాండిల్లను అందిస్తుంది. సరే, నేను ఇక్కడ క్యాస్కేడ్ లేయర్లను ఉపయోగిస్తున్నాను ఎందుకంటే మీరు మరిన్ని రాష్ట్రాలను జోడించిన తర్వాత ఇది అంశాలను క్రమబద్ధంగా ఉంచుతుంది. ఇక్కడ కఠినమైన పాస్ ఉంది:
/* ===================================== క్యాస్కేడ్ లేయర్ల సెటప్ ఆర్డర్ విషయాలు: బేస్ → యాక్టివ్ → డీబగ్ =====================================*/
/* ముందుగా లేయర్ క్రమాన్ని నిర్వచించండి */ @లేయర్ బేస్, యాక్టివ్, డీబగ్;
/* లేయర్ 1: బేస్ స్టైల్స్ - డిఫాల్ట్ ప్రదర్శన */ @లేయర్ బేస్ { .బటన్ { నేపథ్యం: #333; సరిహద్దు-వ్యాసార్థం: 50%; వెడల్పు: 70px; ఎత్తు: 70px; ప్రదర్శన: ఫ్లెక్స్; జస్టిఫై-కంటెంట్: సెంటర్; సమలేఖనం-అంశాలు: కేంద్రం; }
.పాజ్ { వెడల్పు: 20px; ఎత్తు: 70px; నేపథ్యం: #333; ప్రదర్శన: ఇన్లైన్-బ్లాక్; } }
/* లేయర్ 2: యాక్టివ్ స్టేట్స్ - నొక్కిన బటన్లను నిర్వహిస్తుంది */ @లేయర్ యాక్టివ్ { .button.active { నేపథ్యం: #0f0; /* నొక్కినప్పుడు ప్రకాశవంతమైన ఆకుపచ్చ */ రూపాంతరం: స్థాయి (1.1); /* బటన్ను కొద్దిగా విస్తరిస్తుంది */ }
.pause.active { నేపథ్యం: #0f0; రూపాంతరం: scaleY(1.1); /* నొక్కినప్పుడు నిలువుగా సాగుతుంది */ } }
/* లేయర్ 3: డీబగ్ ఓవర్లేలు - డెవలపర్ సమాచారం */ @లేయర్ డీబగ్ { .బటన్::తరువాత { కంటెంట్: attr(డేటా-విలువ); /* సంఖ్యా విలువను చూపుతుంది */ ఫాంట్ పరిమాణం: 12px; రంగు: #fff; } }
ఈ విధానం యొక్క అందం ఏమిటంటే ప్రతి పొరకు స్పష్టమైన ప్రయోజనం ఉంటుంది. బేస్ లేయర్ ఎప్పటికీ యాక్టివ్ని ఓవర్రైడ్ చేయదు మరియు నిర్దిష్టతతో సంబంధం లేకుండా యాక్టివ్ డీబగ్ని ఎప్పటికీ భర్తీ చేయదు. ఇది సాధారణంగా డీబగ్గింగ్ సాధనాలను ప్రభావితం చేసే CSS నిర్దిష్టత యుద్ధాలను తొలగిస్తుంది. ఇప్పుడు కొన్ని సమూహాలు చీకటి నేపథ్యంలో కూర్చున్నట్లు కనిపిస్తోంది. నిజాయితీగా, చాలా చెడ్డది కాదు.
జావాస్క్రిప్ట్ జోడించడం జావాస్క్రిప్ట్ సమయం. ఇక్కడే కంట్రోలర్ నిజానికి ఏదో చేస్తుంది. మేము దీన్ని దశలవారీగా నిర్మిస్తాము. దశ 1: రాష్ట్ర నిర్వహణను సెటప్ చేయండి ముందుగా, డీబగ్గర్ స్థితిని ట్రాక్ చేయడానికి మనకు వేరియబుల్స్ అవసరం: // ====================================== // స్టేట్ మేనేజ్మెంట్ // ======================================
రన్నింగ్ = తప్పుడు; // డీబగ్గర్ సక్రియంగా ఉందో లేదో ట్రాక్ చేస్తుంది rafIdని అనుమతించండి; // రద్దు కోసం అభ్యర్థన యానిమేషన్ ఫ్రేమ్ IDని నిల్వ చేస్తుంది
గేమ్ప్యాడ్ ఇన్పుట్ను నిరంతరం చదివే యానిమేషన్ లూప్ను ఈ వేరియబుల్స్ నియంత్రిస్తాయి. దశ 2: 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 status = document.getElementById("స్టేటస్");
DOMని పదే పదే ప్రశ్నించడం కంటే ముందు ఈ సూచనలను నిల్వ చేయడం మరింత ప్రభావవంతంగా ఉంటుంది. దశ 3: కీబోర్డ్ ఫాల్బ్యాక్ని జోడించండి ఫిజికల్ కంట్రోలర్ లేకుండా పరీక్షించడం కోసం, మేము కీబోర్డ్ కీలను బటన్లకు మ్యాప్ చేస్తాము: // ====================================== // కీబోర్డ్ ఫాల్బ్యాక్ (కంట్రోలర్ లేకుండా పరీక్షించడం కోసం) // ======================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' కీ రెండు పాజ్ బార్లను నియంత్రిస్తుంది };
ఇది కీబోర్డ్లోని కీలను నొక్కడం ద్వారా UIని పరీక్షించడానికి అనుమతిస్తుంది. దశ 4: ప్రధాన నవీకరణ లూప్ను సృష్టించండి ఇక్కడ మ్యాజిక్ జరుగుతుంది. ఈ ఫంక్షన్ నిరంతరం నడుస్తుంది మరియు గేమ్ప్యాడ్ స్థితిని చదువుతుంది: // ====================================== // ప్రధాన గేమ్ప్యాడ్ అప్డేట్ లూప్ // ======================================
ఫంక్షన్ నవీకరణగేమ్ప్యాడ్() { // కనెక్ట్ చేయబడిన అన్ని గేమ్ప్యాడ్లను పొందండి const gamepads = navigator.getGamepads(); ఉంటే (!గేమ్ప్యాడ్లు) తిరిగి;
// మొదటి కనెక్ట్ చేయబడిన గేమ్ప్యాడ్ని ఉపయోగించండి const gp = గేమ్ప్యాడ్లు[0];
ఉంటే (gp) { // "యాక్టివ్" క్లాస్ని టోగుల్ చేయడం ద్వారా అప్డేట్ బటన్ స్టేట్స్ btnA.classList.toggle("యాక్టివ్", gp.buttons[0].pressed); btnB.classList.toggle("యాక్టివ్", gp.buttons[1].pressed); btnX.classList.toggle("యాక్టివ్", gp.buttons[2].pressed);
// హ్యాండిల్ పాజ్ బటన్ (చాలా కంట్రోలర్లలో బటన్ ఇండెక్స్ 9) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("యాక్టివ్", pausePressed); pause2.classList.toggle("యాక్టివ్", pausePressed);
// స్థితి ప్రదర్శన కోసం ప్రస్తుతం నొక్కిన బటన్ల జాబితాను రూపొందించండి లెట్ ప్రెస్డ్ = []; gp.buttons.forEach((btn, i) => { ఒకవేళ (btn.ప్రెస్డ్)pressed.push("బటన్ " + i); });
// ఏదైనా బటన్లు నొక్కితే స్థితి వచనాన్ని నవీకరించండి ఉంటే (pressed.length > 0) { status.textContent = "నొక్కబడింది: " + pressed.join(", "); } }
// డీబగ్గర్ నడుస్తున్నట్లయితే లూప్ను కొనసాగించండి (పరుగు) { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() మెథడ్ బటన్ను నొక్కినదా అనే దాని ఆధారంగా సక్రియ తరగతిని జోడిస్తుంది లేదా తీసివేస్తుంది, ఇది మా CSS లేయర్ స్టైల్లను ట్రిగ్గర్ చేస్తుంది. దశ 5: కీబోర్డ్ ఈవెంట్లను నిర్వహించండి ఈ ఈవెంట్ శ్రోతలు కీబోర్డ్ ఫాల్బ్యాక్ పనిని చేస్తాయి: // ====================================== // కీబోర్డ్ ఈవెంట్ హ్యాండ్లర్స్ // ======================================
document.addEventListener("కీడౌన్", (ఇ) => { అయితే (కీమ్యాప్[ఇ.కీ]) { // ఒకే లేదా బహుళ మూలకాలను నిర్వహించండి ఒకవేళ (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } వేరే { కీమ్యాప్[e.key].classList.add("యాక్టివ్"); } status.textContent = "కీ నొక్కినది: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { అయితే (కీమ్యాప్[ఇ.కీ]) { // కీ విడుదలైనప్పుడు క్రియాశీల స్థితిని తీసివేయండి ఒకవేళ (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } వేరే { కీమ్యాప్[e.key].classList.remove("యాక్టివ్"); } status.textContent = "కీ విడుదల చేయబడింది: " + e.key.toUpperCase(); } });
దశ 6: ప్రారంభం/ఆపు నియంత్రణను జోడించండి చివరగా, డీబగ్గర్ను ఆన్ మరియు ఆఫ్ చేయడానికి టోగుల్ చేయడానికి మాకు ఒక మార్గం అవసరం: // ====================================== // డీబగ్గర్ను ఆన్/ఆఫ్ చేయడాన్ని టోగుల్ చేయండి // ======================================
document.getElementById("toggle").addEventListener("క్లిక్", () => { నడుస్తున్న = !పరుగు; // నడుస్తున్న స్థితిని తిప్పండి
ఉంటే (పరుగు) { status.textContent = "డీబగ్గర్ రన్ అవుతోంది..."; గేమ్ప్యాడ్ (); // నవీకరణ లూప్ను ప్రారంభించండి } వేరే { status.textContent = "డీబగ్గర్ నిష్క్రియం"; రద్దు యానిమేషన్ ఫ్రేమ్(rafId); // లూప్ను ఆపు } });
కాబట్టి అవును, ఒక బటన్ను నొక్కండి మరియు అది మెరుస్తుంది. కర్రను నెట్టండి మరియు అది కదులుతుంది. అంతే. మరో విషయం: ముడి విలువలు. కొన్నిసార్లు మీరు కేవలం సంఖ్యలను చూడాలనుకుంటున్నారు, లైట్లు కాదు.
ఈ దశలో, మీరు చూడాలి:
ఒక సాధారణ ఆన్-స్క్రీన్ కంట్రోలర్, మీరు వారితో పరస్పర చర్య చేస్తున్నప్పుడు ప్రతిస్పందించే బటన్లు మరియు నొక్కిన బటన్ సూచికలను చూపే ఐచ్ఛిక డీబగ్ రీడౌట్.
దీన్ని తక్కువ సారాంశం చేయడానికి, ఆన్-స్క్రీన్ కంట్రోలర్ నిజ సమయంలో ప్రతిస్పందించే శీఘ్ర డెమో ఇక్కడ ఉంది:
ఇప్పుడు, స్టార్ట్ రికార్డింగ్ నొక్కడం వలన మీరు రికార్డింగ్ని ఆపివేసే వరకు ప్రతిదీ లాగ్ అవుతుంది. 2. CSV/JSONకి డేటాను ఎగుమతి చేస్తోంది మేము లాగ్ను కలిగి ఉన్న తర్వాత, మేము దానిని సేవ్ చేయాలనుకుంటున్నాము.
దశ 1: డౌన్లోడ్ సహాయాన్ని సృష్టించండి ముందుగా, మనకు బ్రౌజర్లో ఫైల్ డౌన్లోడ్లను నిర్వహించే సహాయక ఫంక్షన్ అవసరం: // ====================================== // ఫైల్ డౌన్లోడ్ హెల్పర్ // ======================================
ఫంక్షన్ డౌన్లోడ్ ఫైల్ (ఫైల్ పేరు, కంటెంట్, రకం = "టెక్స్ట్/ప్లెయిన్") { // కంటెంట్ నుండి బొట్టుని సృష్టించండి కాన్స్ట్ బొట్టు = కొత్త బొట్టు([కంటెంట్], {టైప్}); const url = URL.createObjectURL(బొట్టు);
// తాత్కాలిక డౌన్లోడ్ లింక్ను సృష్టించండి మరియు దాన్ని క్లిక్ చేయండి const a = document.createElement("a"); a.href = url; a.download = ఫైల్ పేరు; a.click();
// డౌన్లోడ్ చేసిన తర్వాత ఆబ్జెక్ట్ URLని క్లీన్ అప్ చేయండి setTimeout(() => URL.revokeObjectURL(url), 100); }
ఈ ఫంక్షన్ మీ డేటా నుండి ఒక Blob (బైనరీ పెద్ద వస్తువు)ని సృష్టించడం, దాని కోసం తాత్కాలిక URLని రూపొందించడం మరియు ప్రోగ్రామ్పరంగా డౌన్లోడ్ లింక్ను క్లిక్ చేయడం ద్వారా పని చేస్తుంది. క్లీనప్ మేము మెమరీని లీక్ చేయకుండా నిర్ధారిస్తుంది. దశ 2: JSON ఎగుమతిని నిర్వహించండి పూర్తి డేటా నిర్మాణాన్ని సంరక్షించడానికి JSON సరైనది:
// ====================================== // JSON వలె ఎగుమతి చేయండి // ======================================
document.getElementById("export-json").addEventListener("క్లిక్", () => { // ఎగుమతి చేయడానికి ఏదైనా ఉందా అని తనిఖీ చేయండి అయితే (!frames.length) { console.warn("ఎగుమతి చేయడానికి రికార్డింగ్ అందుబాటులో లేదు."); తిరిగి; }
// మెటాడేటా మరియు ఫ్రేమ్లతో పేలోడ్ను సృష్టించండి కాన్స్ట్ పేలోడ్ = { సృష్టించబడినది: కొత్త తేదీ().toISOSstring(), ఫ్రేములు };
// ఫార్మాట్ చేయబడిన JSON వలె డౌన్లోడ్ చేయండి డౌన్లోడ్ ఫైల్( "gamepad-log.json", JSON.stringify(పేలోడ్, శూన్యం, 2), "అప్లికేషన్/json" ); });
JSON ఫార్మాట్ ప్రతిదీ నిర్మాణాత్మకంగా మరియు సులభంగా అన్వయించదగినదిగా ఉంచుతుంది, ఇది దేవ్ సాధనాల్లోకి తిరిగి లోడ్ చేయడానికి లేదా సహచరులతో భాగస్వామ్యం చేయడానికి ఇది అనువైనదిగా చేస్తుంది. దశ 3: CSV ఎగుమతిని నిర్వహించండి CSV ఎగుమతుల కోసం, మేము క్రమానుగత డేటాను అడ్డు వరుసలు మరియు నిలువు వరుసలుగా చదును చేయాలి:
//====================================== // CSV వలె ఎగుమతి చేయండి // ======================================
document.getElementById("export-csv").addEventListener("క్లిక్", () => { // ఎగుమతి చేయడానికి ఏదైనా ఉందా అని తనిఖీ చేయండి అయితే (!frames.length) { console.warn("ఎగుమతి చేయడానికి రికార్డింగ్ అందుబాటులో లేదు."); తిరిగి; }
// CSV హెడర్ అడ్డు వరుసను రూపొందించండి (టైమ్స్టాంప్ కోసం నిలువు వరుసలు, అన్ని బటన్లు, అన్ని అక్షాలు) const headerButtons = ఫ్రేమ్లు[0].buttons.map((_, i) => btn${i}); const headerAxes = ఫ్రేమ్లు[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].చేరండి(","); }).చేరండి("\n");
// CSV వలె డౌన్లోడ్ చేయండి downloadFile("gamepad-log.csv", హెడర్ + అడ్డు వరుసలు, "టెక్స్ట్/csv"); });
CSV డేటా విశ్లేషణకు అద్భుతమైనది ఎందుకంటే ఇది నేరుగా Excel లేదా Google షీట్లలో తెరవబడుతుంది, చార్ట్లను సృష్టించడానికి, డేటాను ఫిల్టర్ చేయడానికి లేదా దృశ్యమానంగా నమూనాలను గుర్తించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇప్పుడు ఎగుమతి బటన్లు ఉన్నాయి, మీరు ప్యానెల్లో రెండు కొత్త ఎంపికలను చూస్తారు: JSONని ఎగుమతి చేయండి మరియు CSVని ఎగుమతి చేయండి. మీరు రా లాగ్ను తిరిగి మీ డెవలప్మెంట్ టూల్స్లోకి విసిరేయాలనుకుంటే లేదా స్ట్రక్చర్ చుట్టూ పోక్ చేయాలనుకుంటే JSON బాగుంది. మరోవైపు, CSV నేరుగా Excel లేదా Google షీట్లలో తెరవబడుతుంది కాబట్టి మీరు ఇన్పుట్లను చార్ట్ చేయవచ్చు, ఫిల్టర్ చేయవచ్చు లేదా సరిపోల్చవచ్చు. ఆ అదనపు నియంత్రణలతో ప్యానెల్ ఎలా ఉంటుందో క్రింది బొమ్మ చూపుతుంది.
3. స్నాప్షాట్ సిస్టమ్ కొన్నిసార్లు మీకు పూర్తి రికార్డింగ్ అవసరం లేదు, ఇన్పుట్ స్టేట్ల యొక్క శీఘ్ర “స్క్రీన్షాట్” మాత్రమే. ఇక్కడే టేక్ స్నాప్షాట్ బటన్ సహాయపడుతుంది.
మరియు జావాస్క్రిప్ట్:
// ====================================== // స్నాప్షాట్ తీసుకోండి // ======================================
document.getElementById("snapshot").addEventListener("క్లిక్", () => { // కనెక్ట్ చేయబడిన అన్ని గేమ్ప్యాడ్లను పొందండి const మెత్తలు = navigator.getGamepads(); const activePads = [];
// కనెక్ట్ చేయబడిన ప్రతి గేమ్ప్యాడ్ స్థితిని లూప్ చేయండి మరియు సంగ్రహించండి కోసం (const gp ఆఫ్ ప్యాడ్స్) { (!gp) కొనసాగితే; // ఖాళీ స్లాట్లను దాటవేయండి
activePads.push({ id: gp.id, // కంట్రోలర్ పేరు/మోడల్ టైమ్స్టాంప్: performance.now(), బటన్లు: gp.buttons.map(b => ({ నొక్కిన: బి. నొక్కిన, విలువ: b.value })), అక్షాలు: [...gp.axes] }); }
// ఏదైనా గేమ్ప్యాడ్లు కనుగొనబడితే తనిఖీ చేయండి ఉంటే (!activePads.length) { console.warn("స్నాప్షాట్ కోసం గేమ్ప్యాడ్లు ఏవీ కనెక్ట్ చేయబడలేదు."); హెచ్చరిక ("కంట్రోలర్ కనుగొనబడలేదు!"); తిరిగి; }
// లాగిన్ చేసి వినియోగదారుకు తెలియజేయండి console.log("స్నాప్షాట్:", యాక్టివ్ప్యాడ్లు); హెచ్చరిక(స్నాప్షాట్ తీసుకోబడింది! ${activePads.length} కంట్రోలర్(లు) సంగ్రహించబడింది); });
స్నాప్షాట్లు మీ కంట్రోలర్ యొక్క ఖచ్చితమైన స్థితిని ఒక క్షణంలో స్తంభింపజేస్తాయి. 4. ఘోస్ట్ ఇన్పుట్ రీప్లే ఇప్పుడు వినోదం కోసం: ఘోస్ట్ ఇన్పుట్ రీప్లే. ఇది ఒక లాగ్ని తీసుకుంటుంది మరియు ఫాంటమ్ ప్లేయర్ కంట్రోలర్ని ఉపయోగిస్తున్నట్లుగా దృశ్యమానంగా ప్లే చేస్తుంది.
రీప్లే కోసం జావాస్క్రిప్ట్: // ====================================== // ఘోస్ట్ రీప్లే // ======================================
document.getElementById("replay").addEventListener("క్లిక్", () => { // రీప్లే చేయడానికి మాకు రికార్డింగ్ ఉందని నిర్ధారించుకోండి అయితే (!frames.length) { హెచ్చరిక ("రీప్లే చేయడానికి రికార్డింగ్ లేదు!"); తిరిగి; }
console.log("ఘోస్ట్ రీప్లే ప్రారంభిస్తోంది...");
// సమకాలీకరించబడిన ప్లేబ్యాక్ కోసం సమయాన్ని ట్రాక్ చేయండి startTime = performance.now(); లెట్ ఫ్రేమ్ ఇండెక్స్ = 0;
// రీప్లే యానిమేషన్ లూప్ ఫంక్షన్ దశ() { const now = performance.now(); const elapsed = ఇప్పుడు - ప్రారంభ సమయం;
// ఇప్పటికి సంభవించిన అన్ని ఫ్రేమ్లను ప్రాసెస్ చేయండి అయితే (frameIndex < frames.length && frames[frameIndex].t <= గడిచిపోయింది) { const ఫ్రేమ్ = ఫ్రేమ్లు[frameIndex];
// రికార్డ్ చేయబడిన బటన్ స్టేట్లతో UIని అప్డేట్ చేయండి btnA.classList.toggle("యాక్టివ్", frame.buttons[0].pressed); btnB.classList.toggle("యాక్టివ్", frame.buttons[1].pressed); btnX.classList.toggle("active", frame.buttons[2].pressed);
// స్థితి ప్రదర్శనను నవీకరించండి లెట్ ప్రెస్డ్ = []; frame.buttons.forEach((btn, i) => { ఒకవేళ (btn.pressed) నొక్కినట్లయితే.push("బటన్ " + i); }); ఉంటే (pressed.length > 0) { status.textContent = "ఘోస్ట్: " + pressed.join(", "); }
ఫ్రేమ్ ఇండెక్స్ ++; }
// మరిన్ని ఫ్రేమ్లు ఉంటే లూప్ను కొనసాగించండి అయితే (frameIndex < frames.length) { అభ్యర్థన యానిమేషన్ ఫ్రేమ్(స్టెప్); } వేరే { console.log("రీప్లేపూర్తయింది."); status.textContent = "రీప్లే పూర్తయింది"; } }
// రీప్లే ప్రారంభించండి అడుగు (); });
డీబగ్గింగ్ను కొంచెం ఎక్కువగా చేయడానికి, నేను ఘోస్ట్ రీప్లేని జోడించాను. మీరు సెషన్ను రికార్డ్ చేసిన తర్వాత, మీరు రీప్లేని నొక్కి, దాదాపు ఫాంటమ్ ప్లేయర్ ప్యాడ్ని నడుపుతున్నట్లుగా UI దాన్ని అమలు చేయడం చూడవచ్చు. దీని కోసం ప్యానెల్లో కొత్త రీప్లే ఘోస్ట్ బటన్ కనిపిస్తుంది.
రికార్డ్ను నొక్కండి, కంట్రోలర్తో కొంచెం గందరగోళం చేయండి, ఆపి, ఆపై రీప్లే చేయండి. మీ ఇన్పుట్లను అనుసరించే దెయ్యంలా మీరు చేసిన ప్రతిదాన్ని UI ప్రతిధ్వనిస్తుంది. ఈ అదనపు విషయాలతో ఎందుకు బాధపడతారు?
రికార్డింగ్/ఎగుమతి టెస్టర్లు సరిగ్గా ఏమి జరిగిందో చూపించడాన్ని సులభతరం చేస్తుంది. స్నాప్షాట్లు సమయానికి స్తంభింపజేస్తాయి, మీరు బేసి బగ్లను వెంబడిస్తున్నప్పుడు చాలా ఉపయోగకరంగా ఉంటుంది. ట్యుటోరియల్లు, యాక్సెసిబిలిటీ చెక్లు లేదా కంట్రోల్ సెటప్లను పక్కపక్కనే పోల్చడం కోసం ఘోస్ట్ రీప్లే చాలా బాగుంది.
ఈ సమయంలో, ఇది ఇకపై చక్కని డెమో మాత్రమే కాదు, మీరు నిజంగా పని చేయగలిగినది. వాస్తవ-ప్రపంచ వినియోగ కేసులు ఇప్పుడు మేము ఈ డీబగ్గర్ని పొందాము, అది చాలా చేయగలదు. ఇది ప్రత్యక్ష ఇన్పుట్ను చూపుతుంది, లాగ్లను రికార్డ్ చేస్తుంది, వాటిని ఎగుమతి చేస్తుంది మరియు అంశాలను కూడా రీప్లే చేస్తుంది. కానీ అసలు ప్రశ్న ఏమిటంటే: అసలు ఎవరు పట్టించుకుంటారు? ఇది ఎవరికి ఉపయోగపడుతుంది? గేమ్ డెవలపర్లు కంట్రోలర్లు ఉద్యోగంలో భాగం, కానీ వాటిని డీబగ్ చేస్తున్నారా? సాధారణంగా నొప్పి. మీరు ↓ → + పంచ్ వంటి ఫైటింగ్ గేమ్ కాంబోని పరీక్షిస్తున్నట్లు ఊహించుకోండి. ప్రార్థన చేయడానికి బదులుగా, మీరు దానిని రెండుసార్లు అదే విధంగా నొక్కి, ఒకసారి రికార్డ్ చేసి, మళ్లీ ప్లే చేయండి. పూర్తయింది. లేదా మీ మల్టీప్లేయర్ కోడ్ వారి మెషీన్లో అదే విధంగా స్పందిస్తుందో లేదో తనిఖీ చేయడానికి మీరు సహచరుడితో JSON లాగ్లను మార్చుకోండి. అది పెద్దది. యాక్సెసిబిలిటీ ప్రాక్టీషనర్లు ఇది నా హృదయానికి దగ్గరగా ఉంది. ప్రతి ఒక్కరూ "ప్రామాణిక" కంట్రోలర్తో ఆడరు. అడాప్టివ్ కంట్రోలర్లు కొన్నిసార్లు విచిత్రమైన సంకేతాలను విసురుతాయి. ఈ సాధనంతో, మీరు ఏమి జరుగుతుందో ఖచ్చితంగా చూడవచ్చు. ఉపాధ్యాయులు, పరిశోధకులు, ఎవరైనా. వారు లాగ్లను పట్టుకోవచ్చు, వాటిని సరిపోల్చవచ్చు లేదా ఇన్పుట్లను పక్కపక్కనే రీప్లే చేయవచ్చు. అకస్మాత్తుగా, అదృశ్య విషయాలు స్పష్టంగా కనిపిస్తాయి. నాణ్యత హామీ పరీక్ష పరీక్షకులు సాధారణంగా "నేను ఇక్కడ బటన్లను మాష్ చేసాను మరియు అది విరిగింది" వంటి గమనికలను వ్రాస్తాను. చాలా సహాయకారిగా లేదు. ఇప్పుడు? వారు ఖచ్చితమైన ప్రెస్లను క్యాప్చర్ చేయవచ్చు, లాగ్ను ఎగుమతి చేయవచ్చు మరియు దాన్ని పంపవచ్చు. ఊహించడం లేదు. అధ్యాపకులు మీరు ట్యుటోరియల్లు లేదా YouTube వీడియోలను రూపొందిస్తున్నట్లయితే, ఘోస్ట్ రీప్లే బంగారం. "కంట్రోలర్తో నేను ఏమి చేసాను" అని మీరు అక్షరాలా చెప్పవచ్చు, UI అది జరుగుతున్నట్లు చూపుతుంది. వివరణలను మరింత స్పష్టంగా చేస్తుంది. ఆటలకు మించి అవును, ఇది కేవలం ఆటలకు సంబంధించినది కాదు. ప్రజలు రోబోట్లు, ఆర్ట్ ప్రాజెక్ట్లు మరియు యాక్సెసిబిలిటీ ఇంటర్ఫేస్ల కోసం కంట్రోలర్లను ఉపయోగించారు. ప్రతిసారీ ఇదే సమస్య: బ్రౌజర్ వాస్తవానికి ఏమి చూస్తోంది? దీనితో, మీరు ఊహించాల్సిన అవసరం లేదు. తీర్మానం కంట్రోలర్ ఇన్పుట్ను డీబగ్ చేయడం అనేది ఎల్లప్పుడూ బ్లైండ్ బ్లైంగ్గా భావించబడుతుంది. DOM లేదా CSS వలె కాకుండా, గేమ్ప్యాడ్ల కోసం అంతర్నిర్మిత ఇన్స్పెక్టర్ లేదు; ఇది కన్సోల్లోని ముడి సంఖ్యలు మాత్రమే, శబ్దంలో సులభంగా పోతాయి. HTML, CSS మరియు JavaScript యొక్క కొన్ని వందల పంక్తులతో, మేము భిన్నమైనదాన్ని రూపొందించాము:
అదృశ్య ఇన్పుట్లను కనిపించేలా చేసే విజువల్ డీబగ్గర్. UIని శుభ్రంగా మరియు డీబగ్ చేయగలిగేలా ఉంచే లేయర్డ్ CSS సిస్టమ్. డెమో నుండి డెవలపర్ సాధనానికి ఎలివేట్ చేసే విస్తరింపుల సమితి (రికార్డింగ్, ఎగుమతి, స్నాప్షాట్లు, ఘోస్ట్ రీప్లే).
CSS క్యాస్కేడ్ లేయర్లలో వెబ్ ప్లాట్ఫారమ్ యొక్క శక్తిని కొద్దిగా సృజనాత్మకతతో కలపడం ద్వారా మీరు ఎంత దూరం వెళ్లవచ్చో ఈ ప్రాజెక్ట్ చూపిస్తుంది. నేను పూర్తిగా వివరించిన సాధనం ఓపెన్ సోర్స్. మీరు GitHub రెపోను క్లోన్ చేసి, మీ కోసం ప్రయత్నించవచ్చు. కానీ మరింత ముఖ్యంగా, మీరు దీన్ని మీ స్వంతం చేసుకోవచ్చు. మీ స్వంత లేయర్లను జోడించండి. మీ స్వంత రీప్లే లాజిక్ను రూపొందించండి. మీ గేమ్ ప్రోటోటైప్తో దీన్ని ఇంటిగ్రేట్ చేయండి. లేదా నేను ఊహించని మార్గాల్లో కూడా వాడండి. బోధన, ప్రాప్యత లేదా డేటా విశ్లేషణ కోసం. రోజు చివరిలో, ఇది గేమ్ప్యాడ్లను డీబగ్గింగ్ చేయడం గురించి మాత్రమే కాదు. ఇది దాచిన ఇన్పుట్లపై వెలుగునిస్తుంది మరియు వెబ్ ఇప్పటికీ పూర్తిగా స్వీకరించని హార్డ్వేర్తో పని చేయడానికి డెవలపర్లకు విశ్వాసాన్ని ఇస్తుంది. కాబట్టి, మీ కంట్రోలర్ని ప్లగ్ ఇన్ చేయండి, మీ ఎడిటర్ని తెరిచి, ప్రయోగాలు చేయడం ప్రారంభించండి. మీ బ్రౌజర్ మరియు మీ CSS నిజంగా ఏమి సాధించగలవని మీరు ఆశ్చర్యపోవచ్చు.
