જ્યારે તમે કંટ્રોલરને પ્લગ ઇન કરો છો, ત્યારે તમે બટનો મેશ કરો છો, સ્ટિક્સને ખસેડો છો, ટ્રિગર્સ ખેંચો છો... અને ડેવલપર તરીકે, તમને તેમાંથી કંઈ દેખાતું નથી. બ્રાઉઝર તેને પસંદ કરી રહ્યું છે, ચોક્કસ, પરંતુ જ્યાં સુધી તમે કન્સોલમાં નંબર લોગિંગ ન કરો ત્યાં સુધી તે અદ્રશ્ય છે. તે ગેમપેડ 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 દબાવો: એક વર્તુળ પ્રકાશિત થાય છે. લાકડીને નજ કરો: વર્તુળ આસપાસ સ્લાઇડ કરે છે. ટ્રિગરને અધવચ્ચે ખેંચો: એક બાર અડધા રસ્તે ભરે છે.
હવે તમે 0s અને 1s પર નથી જોઈ રહ્યાં, પરંતુ વાસ્તવમાં નિયંત્રકની લાઈવ પ્રતિક્રિયા જોઈ રહ્યાં છો. અલબત્ત, એકવાર તમે ડિફોલ્ટ, પ્રેસ્ડ, ડીબગ માહિતી, કદાચ રેકોર્ડિંગ મોડ જેવા સ્ટેટ્સ પર થાંભલો કરવાનું શરૂ કરો, CSS વધુ મોટું અને વધુ જટિલ બનવાનું શરૂ કરે છે. તે છે જ્યાં કાસ્કેડ સ્તરો હાથમાં આવે છે. અહીં એક સ્ટ્રીપ-ડાઉન ઉદાહરણ છે: @સ્તર આધાર { .બટન { પૃષ્ઠભૂમિ: #222; સરહદ-ત્રિજ્યા: 50%; પહોળાઈ: 40px; ઊંચાઈ: 40px; } }
@સ્તર સક્રિય { .button.pressed { પૃષ્ઠભૂમિ: #0f0; /* તેજસ્વી લીલો */ } }
@લેયર ડીબગ { .બટન::પછી { સામગ્રી: attr(ડેટા-વેલ્યુ); ફોન્ટ-સાઇઝ: 12px; રંગ: #fff; } }
સ્તર ક્રમ મહત્વ ધરાવે છે: આધાર → સક્રિય → ડીબગ.
આધાર નિયંત્રક દોરે છે. સક્રિય હેન્ડલ્સ દબાયેલી સ્થિતિઓ. ઓવરલે પર ડીબગ થ્રો.
તેને આ રીતે તોડવાનો અર્થ એ છે કે તમે વિચિત્ર વિશિષ્ટતા યુદ્ધો લડી રહ્યાં નથી. દરેક સ્તર તેનું સ્થાન ધરાવે છે, અને તમે હંમેશા જાણો છો કે શું જીતે છે. બિલ્ડીંગ આઉટ ચાલો પહેલા સ્ક્રીન પર કંઈક મેળવીએ. તેને સારા દેખાવાની જરૂર નથી - ફક્ત અસ્તિત્વમાં રહેવાની જરૂર છે જેથી અમારી પાસે કામ કરવા માટે કંઈક છે.
ગેમપેડ કાસ્કેડ ડીબગર
તે શાબ્દિક રીતે માત્ર બોક્સ છે. હજી ઉત્તેજક નથી, પરંતુ તે અમને CSS અને JavaScript સાથે પાછળથી પકડવા માટે હેન્ડલ્સ આપે છે. ઠીક છે, હું અહીં કાસ્કેડ સ્તરોનો ઉપયોગ કરું છું કારણ કે એકવાર તમે વધુ સ્ટેટ્સ ઉમેર્યા પછી તે સામગ્રીને વ્યવસ્થિત રાખે છે. અહીં એક રફ પાસ છે:
/* ===================================== કાસ્કેડ સ્તરો સેટઅપ ઓર્ડર બાબતો: આધાર → સક્રિય → ડીબગ =======================================*/
/* લેયર ઓર્ડર અપફ્રન્ટ વ્યાખ્યાયિત કરો */ @સ્તર આધાર, સક્રિય, ડીબગ;
/* સ્તર 1: મૂળભૂત શૈલીઓ - મૂળભૂત દેખાવ */ @સ્તર આધાર { .બટન { પૃષ્ઠભૂમિ: #333; સરહદ-ત્રિજ્યા: 50%; પહોળાઈ: 70px; ઊંચાઈ: 70px; પ્રદર્શન: ફ્લેક્સ; justify-content: કેન્દ્ર; align-items: કેન્દ્ર; }
.થોભો { પહોળાઈ: 20px; ઊંચાઈ: 70px; પૃષ્ઠભૂમિ: #333; પ્રદર્શન: ઇનલાઇન-બ્લોક; } }
/* સ્તર 2: સક્રિય સ્થિતિઓ - દબાવવામાં આવેલા બટનોને હેન્ડલ કરે છે */ @સ્તર સક્રિય { .button.active { પૃષ્ઠભૂમિ: #0f0; /* દબાવવામાં આવે ત્યારે તેજસ્વી લીલો*/ ટ્રાન્સફોર્મ: સ્કેલ(1.1); /* બટનને થોડું મોટું કરે છે */ }
.pause.active { પૃષ્ઠભૂમિ: #0f0; ટ્રાન્સફોર્મ: સ્કેલવાય(1.1); /* જ્યારે દબાવવામાં આવે ત્યારે ઊભી રીતે ખેંચાય છે */ } }
/* સ્તર 3: ડીબગ ઓવરલે - વિકાસકર્તા માહિતી */ @લેયર ડીબગ { .બટન::પછી { સામગ્રી: attr(ડેટા-વેલ્યુ); /* આંકડાકીય મૂલ્ય બતાવે છે */ ફોન્ટ-સાઇઝ: 12px; રંગ: #fff; } }
આ અભિગમની સુંદરતા એ છે કે દરેક સ્તરનો સ્પષ્ટ હેતુ છે. આધાર સ્તર સક્રિય ક્યારેય ઓવરરાઇડ કરી શકતું નથી, અને સક્રિય ક્યારેય ડિબગને ઓવરરાઇડ કરી શકતું નથી, વિશિષ્ટતાને ધ્યાનમાં લીધા વગર. આ CSS વિશિષ્ટતા યુદ્ધોને દૂર કરે છે જે સામાન્ય રીતે ડીબગીંગ ટૂલ્સને પ્લેગ કરે છે. હવે એવું લાગે છે કે કેટલાક ક્લસ્ટરો કાળી પૃષ્ઠભૂમિ પર બેઠા છે. પ્રામાણિકપણે, ખૂબ ખરાબ નથી.
JavaScript ઉમેરી રહ્યા છીએ જાવાસ્ક્રિપ્ટ સમય. આ તે છે જ્યાં નિયંત્રક ખરેખર કંઈક કરે છે. અમે આ સ્ટેપ બાય સ્ટેપ બનાવીશું. પગલું 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];
જો (જીપી) { // "સક્રિય" વર્ગને ટૉગલ કરીને અપડેટ બટન સ્ટેટ્સ btnA.classList.toggle("સક્રિય", gp.buttons[0].પ્રેસ્ડ); btnB.classList.toggle("સક્રિય", gp.buttons[1].પ્રેસ્ડ); btnX.classList.toggle("સક્રિય", gp.buttons[2].પ્રેસ્ડ);
// થોભો બટન હેન્ડલ કરો (મોટા ભાગના નિયંત્રકો પર બટન ઇન્ડેક્સ 9) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("સક્રિય", થોભો દબાવ્યો); pause2.classList.toggle("સક્રિય", થોભો દબાવ્યો);
// સ્ટેટસ ડિસ્પ્લે માટે હાલમાં દબાયેલા બટનોની યાદી બનાવો ચાલો દબાવીએ = []; gp.buttons.forEach((btn, i) => { જો (btn. પ્રેસ્ડ)દબાવો.પુશ("બટન" + i); });
// જો કોઈપણ બટન દબાવવામાં આવે તો સ્થિતિ ટેક્સ્ટ અપડેટ કરો જો (દબાવેલ. લંબાઈ > 0) { status.textContent = "દબાવેલ: " + pressed.join(", "); } }
// જો ડીબગર ચાલી રહ્યું હોય તો લૂપ ચાલુ રાખો જો (ચાલી રહેલ) { rafId = requestAnimationFrame(updateGamepad); } }
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("સક્રિય"); } 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("સક્રિય"); } status.textContent = "કી રીલીઝ થઈ: " + e.key.toUpperCase(); } });
પગલું 6: સ્ટાર્ટ/સ્ટોપ કંટ્રોલ ઉમેરો અંતે, અમને ડીબગરને ચાલુ અને બંધ કરવા માટે એક માર્ગની જરૂર છે: // ===================================== // ડિબગર ચાલુ/બંધ ટૉગલ કરો // =====================================
document.getElementById("toggle").addEventListener("click", () => { દોડવું = !દોડવું; // ચાલી રહેલ સ્થિતિને ફ્લિપ કરો
જો (ચાલી રહેલ) { status.textContent = "ડીબગર ચાલી રહ્યું છે..."; અપડેટ ગેમપેડ(); // અપડેટ લૂપ શરૂ કરો } બીજું { status.textContent = "ડિબગર નિષ્ક્રિય"; કેન્સલ એનિમેશનફ્રેમ(rafId); // લૂપ રોકો } });
તો હા, એક બટન દબાવો અને તે ચમકશે. લાકડીને દબાણ કરો અને તે ખસે છે. તે છે. એક વધુ વસ્તુ: કાચા મૂલ્યો. કેટલીકવાર તમે માત્ર નંબરો જોવા માંગો છો, લાઇટ નહીં.
આ તબક્કે, તમારે જોવું જોઈએ:
એક સરળ ઓન-સ્ક્રીન નિયંત્રક, બટનો કે જે તમે તેમની સાથે ક્રિયાપ્રતિક્રિયા કરતી વખતે પ્રતિક્રિયા આપે છે, અને એક વૈકલ્પિક ડીબગ રીડઆઉટ જે દબાવવામાં આવેલ બટન સૂચકાંકો દર્શાવે છે.
આને ઓછું અમૂર્ત બનાવવા માટે, અહીં રીઅલ ટાઇમમાં પ્રતિક્રિયા આપતા ઓન-સ્ક્રીન નિયંત્રકનો ઝડપી ડેમો છે:
હવે, સ્ટાર્ટ રેકોર્ડિંગ દબાવવાથી બધું લોગ થાય છે જ્યાં સુધી તમે રેકોર્ડિંગ બંધ ન કરો. 2. CSV/JSON માં ડેટા નિકાસ કરી રહ્યા છીએ એકવાર અમારી પાસે લોગ થઈ જાય, અમે તેને સાચવવા માંગીએ છીએ.
પગલું 1: ડાઉનલોડ હેલ્પર બનાવો પ્રથમ, અમને સહાયક કાર્યની જરૂર છે જે બ્રાઉઝરમાં ફાઇલ ડાઉનલોડ્સનું સંચાલન કરે છે: // ===================================== // ફાઇલ ડાઉનલોડ હેલ્પર // =====================================
ફંક્શન ડાઉનલોડફાઇલ(ફાઇલનામ, સામગ્રી, પ્રકાર = "ટેક્સ્ટ/પ્લેન") { // સામગ્રીમાંથી બ્લોબ બનાવો const blob = new Blob([content], { type }); 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("click", () => { // નિકાસ કરવા માટે કંઈ છે કે કેમ તે તપાસો જો (!frames.length) { console.warn("નિકાસ કરવા માટે કોઈ રેકોર્ડિંગ ઉપલબ્ધ નથી."); પરત }
// મેટાડેટા અને ફ્રેમ્સ સાથે પેલોડ બનાવો const પેલોડ = { બનાવનાર સમયે: નવી તારીખ().toISOSstring(), ફ્રેમ };
// ફોર્મેટ કરેલ JSON તરીકે ડાઉનલોડ કરો ડાઉનલોડ ફાઇલ( "gamepad-log.json", JSON.stringify(પેલોડ, નલ, 2), "એપ્લિકેશન/જેસન" ); });
JSON ફોર્મેટ દરેક વસ્તુને સંરચિત અને સરળતાથી પાર્સ કરી શકાય તેવું રાખે છે, જે તેને ડેવ ટૂલ્સમાં પાછા લોડ કરવા અથવા ટીમના સાથીઓ સાથે શેર કરવા માટે આદર્શ બનાવે છે. પગલું 3: CSV નિકાસને હેન્ડલ કરો CSV નિકાસ માટે, અમારે પંક્તિઓ અને કૉલમ્સમાં અધિક્રમિક ડેટાને ફ્લેટ કરવાની જરૂર છે:
//===================================== // CSV તરીકે નિકાસ કરો // =====================================
document.getElementById("export-csv").addEventListener("click", () => { // નિકાસ કરવા માટે કંઈ છે કે કેમ તે તપાસો જો (!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].join(","); }).જોડાઓ("\n");
// CSV તરીકે ડાઉનલોડ કરો ડાઉનલોડ ફાઇલ("gamepad-log.csv", હેડર + પંક્તિઓ, "ટેક્સ્ટ/csv"); });
CSV ડેટા વિશ્લેષણ માટે તેજસ્વી છે કારણ કે તે સીધા જ Excel અથવા Google શીટ્સમાં ખુલે છે, જેનાથી તમે ચાર્ટ, ફિલ્ટર ડેટા અથવા સ્પોટ પેટર્નને દૃષ્ટિની રીતે બનાવી શકો છો. હવે જ્યારે નિકાસ બટનો છે, તમે પેનલ પર બે નવા વિકલ્પો જોશો: નિકાસ JSON અને નિકાસ CSV. JSON સરસ છે જો તમે કાચા લોગને તમારા ડેવ ટૂલ્સમાં પાછા ફેંકવા અથવા સ્ટ્રક્ચરની આસપાસ પોક કરવા માંગતા હો. બીજી બાજુ, CSV, સીધા Excel અથવા Google શીટ્સમાં ખુલે છે જેથી કરીને તમે ઇનપુટ્સને ચાર્ટ, ફિલ્ટર અથવા તુલના કરી શકો. નીચેની આકૃતિ બતાવે છે કે તે વધારાના નિયંત્રણો સાથે પેનલ કેવી દેખાય છે.
3. સ્નેપશોટ સિસ્ટમ કેટલીકવાર તમારે સંપૂર્ણ રેકોર્ડિંગની જરૂર હોતી નથી, ફક્ત ઇનપુટ સ્ટેટ્સના ઝડપી "સ્ક્રીનશૉટ"ની. ત્યાં જ સ્નેપશોટ લો બટન મદદ કરે છે.
અને JavaScript:
// ===================================== // સ્નેપશોટ લો // =====================================
document.getElementById("snapshot").addEventListener("click", () => { // બધા કનેક્ટેડ ગેમપેડ મેળવો const pads = navigator.getGamepads(); const activePads = [];
// દરેક કનેક્ટેડ ગેમપેડની સ્થિતિ લૂપ કરો અને કેપ્ચર કરો માટે (પેડની જીપી કોન્સ્ટ) { જો (!gp) ચાલુ રાખો; // ખાલી સ્લોટ છોડો
ActivePads.push({ id: gp.id, // નિયંત્રક નામ/મોડેલ ટાઇમસ્ટેમ્પ: performance.now(), બટનો: gp.buttons.map(b => ({ દબાયેલ: b.pressed, મૂલ્ય: b.value })), અક્ષો: [...gp.axes] }); }
// કોઈ ગેમપેડ મળ્યાં છે કે કેમ તે તપાસો જો (!activePads.length) { console.warn("સ્નેપશોટ માટે કોઈ ગેમપેડ જોડાયેલા નથી."); ચેતવણી("કોઈ નિયંત્રક મળ્યું નથી!"); પરત }
// લૉગ કરો અને વપરાશકર્તાને સૂચિત કરો console.log("સ્નેપશોટ:", એક્ટિવપેડ); ચેતવણી(સ્નેપશોટ લેવાયેલ! ${activePads.length} નિયંત્રક(ઓ).) });
સ્નેપશોટ એક સમયે તમારા નિયંત્રકની ચોક્કસ સ્થિતિને સ્થિર કરે છે. 4. ઘોસ્ટ ઇનપુટ રીપ્લે હવે મજા માટે: ભૂત ઇનપુટ રીપ્લે. આ એક લોગ લે છે અને તેને દૃષ્ટિની રીતે વગાડે છે જાણે કોઈ ફેન્ટમ પ્લેયર કંટ્રોલરનો ઉપયોગ કરી રહ્યો હોય.
રિપ્લે માટે JavaScript: // ===================================== // ઘોસ્ટ રિપ્લે // =====================================
document.getElementById("રીપ્લે").addEventListener("ક્લિક", () => { // ખાતરી કરો કે અમારી પાસે ફરીથી ચલાવવા માટે રેકોર્ડિંગ છે જો (!frames.length) { ચેતવણી("રીપ્લે કરવા માટે કોઈ રેકોર્ડિંગ નથી!"); પરત }
console.log("ભૂત રીપ્લે શરૂ કરી રહ્યું છે...");
// સમન્વયિત પ્લેબેક માટે ટ્રૅક સમય let startTime = performance.now(); ચાલો ફ્રેમઇન્ડેક્સ = 0;
// એનિમેશન લૂપ ફરીથી ચલાવો કાર્ય પગલું() { const now = performance.now(); const elapsed = હવે - શરુઆતનો સમય;
// બધી ફ્રેમ્સ પર પ્રક્રિયા કરો જે અત્યાર સુધીમાં આવી હોવી જોઈએ જ્યારે (frameIndex < frames.length && frames[frameIndex].t <= વીતી ગયેલ) { const ફ્રેમ = ફ્રેમ્સ[ફ્રેમઇન્ડેક્સ];
// રેકોર્ડ કરેલ બટન સ્ટેટ્સ સાથે UI અપડેટ કરો btnA.classList.toggle("સક્રિય", ફ્રેમ.બટન્સ[0].દબાવ્યા); btnB.classList.toggle("સક્રિય", ફ્રેમ.બટન્સ[1].પ્રેસ્ડ); btnX.classList.toggle("સક્રિય", ફ્રેમ.બટન્સ[2].પ્રેસ્ડ);
// સ્થિતિ પ્રદર્શન અપડેટ કરો ચાલો દબાવીએ = []; frame.buttons.forEach((btn, i) => { જો (btn.pressed) pressed.push("બટન" + i); }); જો (દબાવેલ. લંબાઈ > 0) { status.textContent = "ભૂત: " + pressed.join(", "); }
ફ્રેમઇન્ડેક્સ++; }
// જો ત્યાં વધુ ફ્રેમ હોય તો લૂપ ચાલુ રાખો જો (frameIndex < frames.length) { વિનંતી એનિમેશનફ્રેમ(પગલું); } બીજું { console.log("રીપ્લેસમાપ્ત."); status.textContent = "રીપ્લે પૂર્ણ"; } }
// રીપ્લે શરૂ કરો પગલું(); });
ડીબગીંગને થોડું વધુ હેન્ડ-ઓન કરવા માટે, મેં એક ભૂત રીપ્લે ઉમેર્યું. એકવાર તમે સત્ર રેકોર્ડ કરી લો તે પછી, તમે રિપ્લેને હિટ કરી શકો છો અને UI એ તેને કાર્ય કરે છે તે જોઈ શકો છો, લગભગ કોઈ ફેન્ટમ પ્લેયર પેડ ચલાવે છે. આ માટે પેનલમાં નવું રિપ્લે ઘોસ્ટ બટન દેખાય છે.
રેકોર્ડને હિટ કરો, નિયંત્રક સાથે થોડી ગડબડ કરો, રોકો, પછી ફરીથી ચલાવો. UI એ તમારા ઇનપુટ્સને અનુસરતા ભૂતની જેમ તમે જે કર્યું તે બધું જ પડઘો પાડે છે. શા માટે આ વધારાઓ સાથે ચિંતા?
રેકોર્ડિંગ/નિકાસ પરીક્ષકો માટે બરાબર શું થયું તે બતાવવાનું સરળ બનાવે છે. સ્નેપશોટ સમયસર એક ક્ષણ સ્થિર થાય છે, જ્યારે તમે વિચિત્ર બગ્સનો પીછો કરી રહ્યાં હોવ ત્યારે ખૂબ જ ઉપયોગી છે. ઘોસ્ટ રિપ્લે એ ટ્યુટોરિયલ્સ, ઍક્સેસિબિલિટી તપાસો અથવા માત્ર સાથે સાથે કંટ્રોલ સેટઅપની સરખામણી કરવા માટે સરસ છે.
આ બિંદુએ, તે હવે માત્ર એક સુઘડ ડેમો નથી, પરંતુ કંઈક તમે ખરેખર કામ કરી શકો છો. વાસ્તવિક-વિશ્વ ઉપયોગના કેસો હવે અમારી પાસે આ ડીબગર છે જે ઘણું બધું કરી શકે છે. તે લાઇવ ઇનપુટ બતાવે છે, લૉગ્સ રેકોર્ડ કરે છે, તેને નિકાસ કરે છે અને સામગ્રીને રિપ્લે પણ કરે છે. પરંતુ વાસ્તવિક પ્રશ્ન એ છે કે: કોણ ખરેખર કાળજી લે છે? આ કોના માટે ઉપયોગી છે? રમત વિકાસકર્તાઓ નિયંત્રકો નોકરીનો એક ભાગ છે, પરંતુ તેમને ડીબગ કરી રહ્યાં છે? સામાન્ય રીતે પીડા. કલ્પના કરો કે તમે ↓ → + પંચ જેવા ફાઇટીંગ ગેમ કોમ્બોનું પરીક્ષણ કરી રહ્યાં છો. પ્રાર્થના કરવાને બદલે, તમે તેને એ જ રીતે બે વાર દબાવ્યું, તમે તેને એકવાર રેકોર્ડ કરો અને તેને ફરીથી ચલાવો. થઈ ગયું. અથવા તમે તમારા મલ્ટિપ્લેયર કોડ તેમના મશીન પર સમાન પ્રતિક્રિયા આપે છે કે કેમ તે તપાસવા માટે તમે ટીમના સાથી સાથે JSON લૉગ્સ સ્વેપ કરો છો. તે વિશાળ છે. સુલભતા પ્રેક્ટિશનર્સ આ મારા હૃદયની નજીક છે. દરેક જણ "સ્ટાન્ડર્ડ" કંટ્રોલર સાથે રમતું નથી. અનુકૂલનશીલ નિયંત્રકો ક્યારેક વિચિત્ર સંકેતો ફેંકી દે છે. આ સાધન વડે, તમે બરાબર જોઈ શકો છો કે શું થઈ રહ્યું છે. શિક્ષકો, સંશોધકો, કોઈપણ. તેઓ લૉગ્સ પકડી શકે છે, તેમની તુલના કરી શકે છે અથવા ઇનપુટ્સને બાજુ-બાજુ ફરી ચલાવી શકે છે. અચાનક, અદ્રશ્ય સામગ્રી સ્પષ્ટ બને છે. ગુણવત્તા ખાતરી પરીક્ષણ પરીક્ષકો સામાન્ય રીતે નોંધો લખે છે જેમ કે "મેં અહીં બટન મેશ કર્યા અને તે તૂટી ગયા." ખૂબ મદદરૂપ નથી. હવે? તેઓ ચોક્કસ પ્રેસને પકડી શકે છે, લોગની નિકાસ કરી શકે છે અને તેને મોકલી શકે છે. કોઈ અનુમાન નથી. શિક્ષકો જો તમે ટ્યુટોરિયલ્સ અથવા યુટ્યુબ વિડીઓ બનાવી રહ્યાં છો, તો ભૂત રિપ્લે ગોલ્ડ છે. તમે શાબ્દિક રૂપે કહી શકો છો, "મેં કંટ્રોલર સાથે શું કર્યું તે અહીં છે," જ્યારે UI બતાવે છે કે તે થઈ રહ્યું છે. સ્પષ્ટતાઓને વધુ સ્પષ્ટ બનાવે છે. બિયોન્ડ ગેમ્સ અને હા, આ માત્ર રમતો વિશે નથી. લોકોએ રોબોટ્સ, આર્ટ પ્રોજેક્ટ્સ અને ઍક્સેસિબિલિટી ઇન્ટરફેસ માટે નિયંત્રકોનો ઉપયોગ કર્યો છે. દર વખતે સમાન સમસ્યા: બ્રાઉઝર ખરેખર શું જોઈ રહ્યું છે? આ સાથે, તમારે અનુમાન લગાવવાની જરૂર નથી. નિષ્કર્ષ કંટ્રોલર ઇનપુટને ડીબગ કરવું હંમેશા અંધ ઉડાન જેવું લાગ્યું છે. DOM અથવા CSS થી વિપરીત, ગેમપેડ માટે કોઈ બિલ્ટ-ઇન ઇન્સ્પેક્ટર નથી; તે કન્સોલમાં ફક્ત કાચા નંબરો છે, અવાજમાં સરળતાથી ખોવાઈ જાય છે. HTML, CSS અને JavaScript ની થોડીક સો લીટીઓ સાથે, અમે કંઈક અલગ બનાવ્યું છે:
વિઝ્યુઅલ ડીબગર જે અદ્રશ્ય ઇનપુટ્સને દૃશ્યમાન બનાવે છે. સ્તરવાળી CSS સિસ્ટમ કે જે UI ને સ્વચ્છ અને ડીબગ કરી શકાય તેવી રાખે છે. ઉન્નત્તિકરણોનો સમૂહ (રેકોર્ડિંગ, નિકાસ, સ્નેપશોટ, ઘોસ્ટ રિપ્લે) જે તેને ડેમોથી ડેવલપર ટૂલમાં ઉન્નત કરે છે.
આ પ્રોજેક્ટ બતાવે છે કે તમે CSS કાસ્કેડ સ્તરોમાં થોડી સર્જનાત્મકતા સાથે વેબ પ્લેટફોર્મની શક્તિને મિશ્રિત કરીને કેટલું આગળ વધી શકો છો. જે સાધન મેં હમણાં જ સમજાવ્યું છે તે ઓપન સોર્સ છે. તમે GitHub રેપોને ક્લોન કરી શકો છો અને તેને તમારા માટે અજમાવી શકો છો. પરંતુ વધુ અગત્યનું, તમે તેને તમારા પોતાના બનાવી શકો છો. તમારા પોતાના સ્તરો ઉમેરો. તમારું પોતાનું રિપ્લે લોજિક બનાવો. તેને તમારા ગેમ પ્રોટોટાઇપ સાથે એકીકૃત કરો. અથવા તો મેં કલ્પના પણ ન કરી હોય તેવી રીતે તેનો ઉપયોગ કરો. શિક્ષણ, સુલભતા અથવા ડેટા વિશ્લેષણ માટે. દિવસના અંતે, આ ફક્ત ગેમપેડને ડિબગ કરવા વિશે નથી. તે છુપાયેલા ઇનપુટ્સ પર પ્રકાશ પાડવા વિશે છે, અને વિકાસકર્તાઓને હાર્ડવેર સાથે કામ કરવાનો આત્મવિશ્વાસ આપવા વિશે છે જે વેબ હજુ પણ સંપૂર્ણ રીતે સ્વીકારતું નથી. તેથી, તમારા નિયંત્રકને પ્લગ ઇન કરો, તમારા સંપાદકને ખોલો અને પ્રયોગ કરવાનું શરૂ કરો. તમારું બ્રાઉઝર અને તમારું CSS ખરેખર શું કરી શકે છે તેનાથી તમને આશ્ચર્ય થશે.
