നിങ്ങൾ ഒരു കൺട്രോളർ പ്ലഗ് ഇൻ ചെയ്യുമ്പോൾ, നിങ്ങൾ ബട്ടണുകൾ മാഷ് ചെയ്യുക, സ്റ്റിക്കുകൾ ചലിപ്പിക്കുക, ട്രിഗറുകൾ വലിക്കുക... ഒരു ഡെവലപ്പർ എന്ന നിലയിൽ, നിങ്ങൾ അതൊന്നും കാണുന്നില്ല. ബ്രൗസർ അത് എടുക്കുന്നു, ഉറപ്പാണ്, എന്നാൽ നിങ്ങൾ കൺസോളിൽ നമ്പറുകൾ ലോഗ് ചെയ്യുന്നില്ലെങ്കിൽ, അത് അദൃശ്യമാണ്. ഗെയിംപാഡ് 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 ലെ ലെയറുകൾ നിർവചിക്കുകയാണെങ്കിൽ, ഞങ്ങൾക്ക് ഇനിപ്പറയുന്നവ ഉണ്ടായിരിക്കും: /* ഏറ്റവും താഴ്ന്നത് മുതൽ ഉയർന്ന മുൻഗണന */ @ലെയർ ബേസ്, ആക്റ്റീവ്, ഡീബഗ്;
@ലെയർ ബേസ് { /* ... */ }
@layer സജീവം { /* ... */ }
@layer ഡീബഗ് { /* ... */ }
ഓരോ ലെയറും പ്രവചനാതീതമായി അടുക്കിയിരിക്കുന്നതിനാൽ, ഏത് നിയമങ്ങളാണ് വിജയിക്കുന്നത് എന്ന് നിങ്ങൾക്കറിയാം. ആ പ്രവചനാത്മകത ഡീബഗ്ഗിംഗ് എളുപ്പമാക്കുന്നു മാത്രമല്ല, യഥാർത്ഥത്തിൽ കൈകാര്യം ചെയ്യാവുന്നതുമാണ്. ഞങ്ങൾ പ്രശ്നവും (അദൃശ്യവും കുഴപ്പമില്ലാത്ത ഇൻപുട്ടും) സമീപനവും (കാസ്കേഡ് ലെയറുകൾ ഉപയോഗിച്ച് നിർമ്മിച്ച ഒരു വിഷ്വൽ ഡീബഗ്ഗർ) കവർ ചെയ്തു. ഡീബഗ്ഗർ നിർമ്മിക്കുന്നതിനുള്ള ഘട്ടം ഘട്ടമായുള്ള പ്രക്രിയയിലൂടെ ഞങ്ങൾ ഇപ്പോൾ പോകും. ഡീബഗ്ഗർ ആശയം മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ദൃശ്യമാക്കാനുള്ള ഏറ്റവും എളുപ്പ മാർഗം അത് സ്ക്രീനിൽ വരയ്ക്കുക എന്നതാണ്. അതാണ് ഈ ഡീബഗ്ഗർ ചെയ്യുന്നത്. ബട്ടണുകൾ, ട്രിഗറുകൾ, ജോയ്സ്റ്റിക്കുകൾ എന്നിവയ്ക്കെല്ലാം ദൃശ്യം ലഭിക്കും.
എ അമർത്തുക: ഒരു സർക്കിൾ പ്രകാശിക്കുന്നു. വടി നഡ്ജ്: സർക്കിൾ ചുറ്റും സ്ലൈഡുചെയ്യുന്നു. ഒരു ട്രിഗർ പകുതിയായി വലിക്കുക: ഒരു ബാർ പകുതിയായി നിറയുന്നു.
ഇപ്പോൾ നിങ്ങൾ 0സെക്കിലും 1സെക്കിലും ഉറ്റുനോക്കുന്നില്ല, എന്നാൽ കൺട്രോളർ തത്സമയം പ്രതികരിക്കുന്നത് കാണുന്നുണ്ട്. തീർച്ചയായും, നിങ്ങൾ സ്ഥിരസ്ഥിതി, അമർത്തി, ഡീബഗ് വിവരങ്ങൾ, ഒരുപക്ഷേ ഒരു റെക്കോർഡിംഗ് മോഡ് എന്നിവ പോലുള്ള അവസ്ഥകൾ ശേഖരിക്കാൻ തുടങ്ങിയാൽ, CSS വലുതും സങ്കീർണ്ണവുമാകാൻ തുടങ്ങുന്നു. അവിടെയാണ് കാസ്കേഡ് പാളികൾ ഉപയോഗപ്രദമാകുന്നത്. നീക്കം ചെയ്ത ഒരു ഉദാഹരണം ഇതാ: @ലെയർ ബേസ് { .ബട്ടൺ { പശ്ചാത്തലം: #222; ബോർഡർ-റേഡിയസ്: 50%; വീതി: 40px; ഉയരം: 40px; } }
@layer സജീവം { .button.അമർത്തി { പശ്ചാത്തലം: #0f0; /* തിളങ്ങുന്ന പച്ച */ } }
@layer ഡീബഗ് { .ബട്ടൺ:: ശേഷം { ഉള്ളടക്കം: attr(data-value); ഫോണ്ട് വലുപ്പം: 12px; നിറം: #fff; } }
ലെയർ ക്രമം പ്രധാനമാണ്: അടിസ്ഥാനം → സജീവം → ഡീബഗ്.
അടിസ്ഥാനം കൺട്രോളർ വരയ്ക്കുന്നു. സജീവ ഹാൻഡിലുകൾ അമർത്തി സംസ്ഥാനങ്ങൾ. ഡീബഗ് ഓവർലേകളിൽ എറിയുന്നു.
ഇത് ഇതുപോലെ തകർക്കുക എന്നതിനർത്ഥം നിങ്ങൾ വിചിത്രമായ പ്രത്യേക യുദ്ധങ്ങൾ നടത്തുന്നില്ല എന്നാണ്. ഓരോ ലെയറിനും അതിൻ്റേതായ സ്ഥാനമുണ്ട്, എന്താണ് വിജയിക്കുന്നതെന്ന് നിങ്ങൾക്ക് എല്ലായ്പ്പോഴും അറിയാം. ബിൽഡിംഗ് ഇറ്റ് ഔട്ട് ആദ്യം നമുക്ക് എന്തെങ്കിലും സ്ക്രീനിൽ വരട്ടെ. ഇത് മനോഹരമായി കാണേണ്ട ആവശ്യമില്ല - നിലനിൽക്കേണ്ടതുണ്ട്, അതിനാൽ ഞങ്ങൾക്ക് പ്രവർത്തിക്കാൻ എന്തെങ്കിലും ഉണ്ട്.
ഗെയിംപാഡ് കാസ്കേഡ് ഡീബഗ്ഗർ
അത് അക്ഷരാർത്ഥത്തിൽ പെട്ടികൾ മാത്രമാണ്. ഇതുവരെ ആവേശകരമല്ല, എന്നാൽ പിന്നീട് CSS-ഉം JavaScript-ഉം ഉപയോഗിച്ച് ഇത് നമുക്ക് ഹാൻഡിലുകൾ നൽകുന്നു. ശരി, ഞാൻ ഇവിടെ കാസ്കേഡ് ലെയറുകൾ ഉപയോഗിക്കുന്നു, കാരണം നിങ്ങൾ കൂടുതൽ സ്റ്റേറ്റുകൾ ചേർത്തുകഴിഞ്ഞാൽ അത് കാര്യങ്ങൾ ഓർഗനൈസുചെയ്തു. ഒരു പരുക്കൻ പാസ് ഇതാ:
/* ==================================== കാസ്കേഡ് ലെയറുകളുടെ സജ്ജീകരണം ഓർഡർ കാര്യങ്ങൾ: അടിസ്ഥാനം → സജീവം → ഡീബഗ് ===================================*/
/* ലെയർ ഓർഡർ മുൻകൂട്ടി നിർവചിക്കുക */ @ലെയർ ബേസ്, ആക്റ്റീവ്, ഡീബഗ്;
/* ലെയർ 1: അടിസ്ഥാന ശൈലികൾ - ഡിഫോൾട്ട് രൂപം */ @ലെയർ ബേസ് { .ബട്ടൺ { പശ്ചാത്തലം: #333; ബോർഡർ-റേഡിയസ്: 50%; വീതി: 70px; ഉയരം: 70px; ഡിസ്പ്ലേ: ഫ്ലെക്സ്; ന്യായീകരിക്കുക-ഉള്ളടക്കം: കേന്ദ്രം; അലൈൻ-ഇനങ്ങൾ: മധ്യഭാഗം; }
.താൽക്കാലികമായി നിർത്തുക { വീതി: 20px; ഉയരം: 70px; പശ്ചാത്തലം: #333; ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; } }
/* ലെയർ 2: സജീവമായ അവസ്ഥകൾ - അമർത്തിപ്പിടിച്ച ബട്ടണുകൾ കൈകാര്യം ചെയ്യുന്നു */ @layer സജീവം { .button.active { പശ്ചാത്തലം: #0f0; /* അമർത്തുമ്പോൾ തിളങ്ങുന്ന പച്ച */ രൂപാന്തരം: സ്കെയിൽ (1.1); /* ബട്ടൺ ചെറുതായി വലുതാക്കുന്നു */ }
.pause.active { പശ്ചാത്തലം: #0f0; രൂപാന്തരം: scaleY(1.1); /* അമർത്തുമ്പോൾ ലംബമായി നീട്ടുന്നു */ } }
/* ലെയർ 3: ഡീബഗ് ഓവർലേകൾ - ഡെവലപ്പർ വിവരം */ @layer ഡീബഗ് { .ബട്ടൺ:: ശേഷം { ഉള്ളടക്കം: attr(data-value); /* സംഖ്യാ മൂല്യം കാണിക്കുന്നു */ ഫോണ്ട് വലുപ്പം: 12px; നിറം: #fff; } }
ഈ സമീപനത്തിൻ്റെ ഭംഗി ഓരോ പാളിക്കും വ്യക്തമായ ലക്ഷ്യമുണ്ട് എന്നതാണ്. ബേസ് ലെയറിന് ഒരിക്കലും സജീവമായതിനെ അസാധുവാക്കാൻ കഴിയില്ല, കൂടാതെ ഡീബഗ്ഗിനെ അസാധുവാക്കാൻ ആക്ടീവിനു കഴിയില്ല. ഇത് സാധാരണയായി ഡീബഗ്ഗിംഗ് ടൂളുകളെ ബാധിക്കുന്ന CSS സ്പെസിസിറ്റി യുദ്ധങ്ങളെ ഇല്ലാതാക്കുന്നു. ഇപ്പോൾ ചില ക്ലസ്റ്ററുകൾ ഇരുണ്ട പശ്ചാത്തലത്തിൽ ഇരിക്കുന്നതായി തോന്നുന്നു. സത്യസന്ധമായി, വളരെ മോശമല്ല.
ജാവാസ്ക്രിപ്റ്റ് ചേർക്കുന്നു JavaScript സമയം. ഇവിടെയാണ് കൺട്രോളർ യഥാർത്ഥത്തിൽ എന്തെങ്കിലും ചെയ്യുന്നത്. ഞങ്ങൾ ഇത് ഘട്ടം ഘട്ടമായി നിർമ്മിക്കും. ഘട്ടം 1: സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് സജ്ജീകരിക്കുക ആദ്യം, ഡീബഗ്ഗറിൻ്റെ അവസ്ഥ ട്രാക്കുചെയ്യുന്നതിന് ഞങ്ങൾക്ക് വേരിയബിളുകൾ ആവശ്യമാണ്: // ====================================== // സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് // ======================================
ഓടട്ടെ = false; // ഡീബഗ്ഗർ സജീവമാണോ എന്ന് ട്രാക്ക് ചെയ്യുന്നു rafId അനുവദിക്കുക; // റദ്ദാക്കലിനായി റിക്വസ്റ്റ് ആനിമേഷൻ ഫ്രെയിം ഐഡി സംഭരിക്കുന്നു
ഗെയിംപാഡ് ഇൻപുട്ട് തുടർച്ചയായി വായിക്കുന്ന ആനിമേഷൻ ലൂപ്പിനെ ഈ വേരിയബിളുകൾ നിയന്ത്രിക്കുന്നു. ഘട്ടം 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("status");
ഈ റഫറൻസുകൾ മുന്നിൽ സൂക്ഷിക്കുന്നത് DOM ആവർത്തിച്ച് അന്വേഷിക്കുന്നതിനേക്കാൾ കൂടുതൽ കാര്യക്ഷമമാണ്. ഘട്ടം 3: കീബോർഡ് ഫോൾബാക്ക് ചേർക്കുക ഫിസിക്കൽ കൺട്രോളർ ഇല്ലാതെ പരിശോധിക്കുന്നതിന്, ഞങ്ങൾ കീബോർഡ് കീകൾ ബട്ടണുകളിലേക്ക് മാപ്പ് ചെയ്യും: // ====================================== // കീബോർഡ് ഫോൾബാക്ക് (ഒരു കൺട്രോളർ ഇല്ലാതെ പരിശോധിക്കുന്നതിന്) // ======================================
കോൺസ്റ്റ് കീമാപ്പ് = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' കീ രണ്ട് പോസ് ബാറുകളും നിയന്ത്രിക്കുന്നു };
ഒരു കീബോർഡിൽ കീകൾ അമർത്തി UI പരിശോധിക്കാൻ ഇത് ഞങ്ങളെ അനുവദിക്കുന്നു. ഘട്ടം 4: പ്രധാന അപ്ഡേറ്റ് ലൂപ്പ് സൃഷ്ടിക്കുക ഇവിടെയാണ് മാജിക് സംഭവിക്കുന്നത്. ഈ ഫംഗ്ഷൻ തുടർച്ചയായി പ്രവർത്തിക്കുകയും ഗെയിംപാഡ് അവസ്ഥ വായിക്കുകയും ചെയ്യുന്നു: // ====================================== // പ്രധാന ഗെയിംപാഡ് അപ്ഡേറ്റ് ലൂപ്പ് // ======================================
ഫംഗ്ഷൻ അപ്ഡേറ്റ് ഗെയിംപാഡ്() { // കണക്റ്റുചെയ്ത എല്ലാ ഗെയിംപാഡുകളും നേടുക കോൺസ്റ്റ് ഗെയിംപാഡുകൾ = navigator.getGamepads(); എങ്കിൽ (!ഗെയിംപാഡുകൾ) തിരികെ;
// ആദ്യം ബന്ധിപ്പിച്ച ഗെയിംപാഡ് ഉപയോഗിക്കുക കോൺസ്റ്റ് ജിപി = ഗെയിംപാഡുകൾ[0];
എങ്കിൽ (ജിപി) { // "സജീവ" ക്ലാസ് ടോഗിൾ ചെയ്തുകൊണ്ട് അപ്ഡേറ്റ് ബട്ടൺ പ്രസ്താവിക്കുന്നു 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)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("കീഅപ്പ്", (ഇ) => { എങ്കിൽ (കീമാപ്പ്[ഇ.കീ]) { // കീ റിലീസ് ചെയ്യുമ്പോൾ സജീവമായ അവസ്ഥ നീക്കം ചെയ്യുക എങ്കിൽ (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("click", () => { ഓടുന്നത് = !ഓട്ടം; // റണ്ണിംഗ് സ്റ്റേറ്റ് ഫ്ലിപ്പുചെയ്യുക
എങ്കിൽ (ഓടുന്നു) { status.textContent = "ഡീബഗ്ഗർ പ്രവർത്തിക്കുന്നു..."; updateGamepad(); // അപ്ഡേറ്റ് ലൂപ്പ് ആരംഭിക്കുക } വേറെ { status.textContent = "ഡീബഗ്ഗർ നിഷ്ക്രിയം"; റദ്ദാക്കൽ ആനിമേഷൻ ഫ്രെയിം(rafId); // ലൂപ്പ് നിർത്തുക } });
അതെ, ഒരു ബട്ടൺ അമർത്തുക, അത് തിളങ്ങുന്നു. വടി തള്ളുക, അത് നീങ്ങുന്നു. അത്രയേയുള്ളൂ. ഒരു കാര്യം കൂടി: അസംസ്കൃത മൂല്യങ്ങൾ. ചിലപ്പോൾ നിങ്ങൾ അക്കങ്ങൾ കാണാൻ ആഗ്രഹിക്കുന്നു, ലൈറ്റുകളല്ല.
ഈ ഘട്ടത്തിൽ, നിങ്ങൾ കാണണം:
ഒരു ലളിതമായ ഓൺ-സ്ക്രീൻ കൺട്രോളർ, നിങ്ങൾ അവരുമായി ഇടപഴകുമ്പോൾ പ്രതികരിക്കുന്ന ബട്ടണുകൾ, കൂടാതെ അമർത്തിപ്പിടിച്ച ബട്ടൺ സൂചികകൾ കാണിക്കുന്ന ഒരു ഓപ്ഷണൽ ഡീബഗ് റീഡൗട്ട്.
ഇത് കുറച്ച് അമൂർത്തമാക്കുന്നതിന്, ഓൺ-സ്ക്രീൻ കൺട്രോളർ തത്സമയം പ്രതികരിക്കുന്നതിൻ്റെ ഒരു ദ്രുത ഡെമോ ഇതാ:
ഇപ്പോൾ, റെക്കോർഡിംഗ് ആരംഭിക്കുക അമർത്തുന്നത് നിങ്ങൾ റെക്കോർഡിംഗ് നിർത്തുന്നത് വരെ എല്ലാം ലോഗിൻ ചെയ്യും. 2. CSV/JSON-ലേക്ക് ഡാറ്റ എക്സ്പോർട്ട് ചെയ്യുന്നു ഞങ്ങൾക്ക് ഒരു ലോഗ് ലഭിച്ചുകഴിഞ്ഞാൽ, അത് സംരക്ഷിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു.
ഘട്ടം 1: ഡൗൺലോഡ് ഹെൽപ്പർ സൃഷ്ടിക്കുക ആദ്യം, ഞങ്ങൾക്ക് ബ്രൗസറിൽ ഫയൽ ഡൗൺലോഡുകൾ കൈകാര്യം ചെയ്യുന്ന ഒരു സഹായ പ്രവർത്തനം ആവശ്യമാണ്: // ====================================== // ഫയൽ ഡൗൺലോഡ് സഹായി // ======================================
ഫംഗ്ഷൻ ഡൗൺലോഡ് ഫയൽ(ഫയലിൻ്റെ പേര്, ഉള്ളടക്കം, തരം = "ടെക്സ്റ്റ്/പ്ലെയിൻ") { // ഉള്ളടക്കത്തിൽ നിന്ന് ഒരു ബ്ലബ് സൃഷ്ടിക്കുക കോൺസ്റ്റ് ബ്ലോബ് = പുതിയ ബ്ലോബ്([ഉള്ളടക്കം], {തരം}); 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("കയറ്റുമതി ചെയ്യാൻ റെക്കോർഡിംഗ് ലഭ്യമല്ല."); മടങ്ങുക; }
// മെറ്റാഡാറ്റയും ഫ്രെയിമുകളും ഉപയോഗിച്ച് ഒരു പേലോഡ് സൃഷ്ടിക്കുക കോൺസ്റ്റ് പേലോഡ് = { സൃഷ്ടിച്ചത്: പുതിയ തീയതി().toISOSstring(), ഫ്രെയിമുകൾ };
// ഫോർമാറ്റ് ചെയ്ത JSON ആയി ഡൗൺലോഡ് ചെയ്യുക ഫയൽ ഡൗൺലോഡ് ചെയ്യുക( "gamepad-log.json", JSON.stringify(പേലോഡ്, ശൂന്യം, 2), "അപ്ലിക്കേഷൻ/json" ); });
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 ഡാറ്റ വരികൾ നിർമ്മിക്കുക കോൺസ്റ്റ് വരികൾ = frames.map(f => { const btnVals = f.buttons.map(b => b.value); തിരികെ [f.t, ...btnVals, ...f.axes].ചേരുക(","); }).ചേരുക("\n");
// CSV ആയി ഡൗൺലോഡ് ചെയ്യുക ഡൗൺലോഡ് ഫയൽ("gamepad-log.csv", തലക്കെട്ട് + വരികൾ, "ടെക്സ്റ്റ്/csv"); });
CSV ഡാറ്റ വിശകലനത്തിന് മികച്ചതാണ്, കാരണം അത് നേരിട്ട് Excel അല്ലെങ്കിൽ Google ഷീറ്റിൽ തുറക്കുന്നു, ചാർട്ടുകൾ സൃഷ്ടിക്കാനോ ഡാറ്റ ഫിൽട്ടർ ചെയ്യാനോ പാറ്റേണുകൾ ദൃശ്യപരമായി കണ്ടെത്താനോ നിങ്ങളെ അനുവദിക്കുന്നു. ഇപ്പോൾ എക്സ്പോർട്ട് ബട്ടണുകൾ ഉള്ളതിനാൽ, പാനലിൽ രണ്ട് പുതിയ ഓപ്ഷനുകൾ നിങ്ങൾ കാണും: എക്സ്പോർട്ട് JSON, എക്സ്പോർട്ട് CSV. നിങ്ങളുടെ ഡെവലപ്മെൻ്റ് ടൂളുകളിലേക്ക് റോ ലോഗ് തിരികെ എറിയുകയോ ഘടനയ്ക്ക് ചുറ്റും കുത്തുകയോ ചെയ്യണമെങ്കിൽ JSON നല്ലതാണ്. നേരെമറിച്ച്, CSV നേരിട്ട് Excel അല്ലെങ്കിൽ Google ഷീറ്റിലേക്ക് തുറക്കുന്നു, അതിനാൽ നിങ്ങൾക്ക് ഇൻപുട്ടുകൾ ചാർട്ട് ചെയ്യാനോ ഫിൽട്ടർ ചെയ്യാനോ താരതമ്യം ചെയ്യാനോ കഴിയും. ആ അധിക നിയന്ത്രണങ്ങൾ ഉപയോഗിച്ച് പാനൽ എങ്ങനെയിരിക്കുമെന്ന് ഇനിപ്പറയുന്ന ചിത്രം കാണിക്കുന്നു.
3. സ്നാപ്പ്ഷോട്ട് സിസ്റ്റം ചിലപ്പോൾ നിങ്ങൾക്ക് പൂർണ്ണമായ റെക്കോർഡിംഗ് ആവശ്യമില്ല, ഇൻപുട്ട് അവസ്ഥകളുടെ ഒരു ദ്രുത "സ്ക്രീൻഷോട്ട്" മതി. അവിടെയാണ് ടേക്ക് സ്നാപ്പ്ഷോട്ട് ബട്ടൺ സഹായിക്കുന്നത്.
കൂടാതെ ജാവാസ്ക്രിപ്റ്റ്:
// ====================================== // സ്നാപ്പ്ഷോട്ട് എടുക്കുക // ======================================
document.getElementById("snapshot").addEventListener("click", () => { // കണക്റ്റുചെയ്ത എല്ലാ ഗെയിംപാഡുകളും നേടുക കോൺസ്റ്റ് പാഡുകൾ = navigator.getGamepads(); കോൺസ്റ്റ് ആക്റ്റീവ്പാഡുകൾ = [];
// കണക്റ്റുചെയ്തിരിക്കുന്ന ഓരോ ഗെയിംപാഡിൻ്റെയും അവസ്ഥ ലൂപ്പ് ചെയ്ത് പിടിച്ചെടുക്കുക (പാഡുകളുടെ കോൺസ്റ്റ് ജിപി) { (!gp) തുടരുകയാണെങ്കിൽ; // ശൂന്യമായ സ്ലോട്ടുകൾ ഒഴിവാക്കുക
activePads.push({ ഐഡി: gp.id, // കൺട്രോളർ പേര്/മോഡൽ ടൈംസ്റ്റാമ്പ്: performance.now(), ബട്ടണുകൾ: gp.buttons.map(b => ({ അമർത്തി: b. അമർത്തി, മൂല്യം: b.value })), അക്ഷങ്ങൾ: [...gp.axes] }); }
// ഏതെങ്കിലും ഗെയിംപാഡുകൾ കണ്ടെത്തിയോയെന്ന് പരിശോധിക്കുക എങ്കിൽ (!activePads.length) { console.warn("സ്നാപ്പ്ഷോട്ടിനായി ഗെയിംപാഡുകൾ ബന്ധിപ്പിച്ചിട്ടില്ല."); മുന്നറിയിപ്പ് ("കണ്ട്രോളറൊന്നും കണ്ടെത്തിയില്ല!"); മടങ്ങുക; }
// ലോഗിൻ ചെയ്ത് ഉപയോക്താവിനെ അറിയിക്കുക console.log("സ്നാപ്പ്ഷോട്ട്:", ActivePads); മുന്നറിയിപ്പ് (സ്നാപ്പ്ഷോട്ട് എടുത്തു! ${activePads.length} കൺട്രോളർ(കൾ) ക്യാപ്ചർ ചെയ്തു); });
സ്നാപ്പ്ഷോട്ടുകൾ നിങ്ങളുടെ കൺട്രോളറിൻ്റെ കൃത്യമായ അവസ്ഥയെ ഒരു നിമിഷം കൊണ്ട് മരവിപ്പിക്കുന്നു. 4. ഗോസ്റ്റ് ഇൻപുട്ട് റീപ്ലേ ഇപ്പോൾ രസകരമായ ഒന്ന്: ഗോസ്റ്റ് ഇൻപുട്ട് റീപ്ലേ. ഇത് ഒരു ലോഗ് എടുത്ത് ഒരു ഫാൻ്റം പ്ലെയർ കൺട്രോളർ ഉപയോഗിക്കുന്നതുപോലെ ദൃശ്യപരമായി പ്ലേ ചെയ്യുന്നു.
റീപ്ലേയ്ക്കുള്ള JavaScript: // ====================================== // ഗോസ്റ്റ് റീപ്ലേ // ======================================
document.getElementById("replay").addEventListener("click", () => { // റീപ്ലേ ചെയ്യാൻ ഞങ്ങൾക്ക് ഒരു റെക്കോർഡിംഗ് ഉണ്ടെന്ന് ഉറപ്പാക്കുക എങ്കിൽ (!frames.length) { മുന്നറിയിപ്പ് ("വീണ്ടും പ്ലേ ചെയ്യാൻ റെക്കോർഡിംഗ് ഇല്ല!"); മടങ്ങുക; }
console.log("ഗോസ്റ്റ് റീപ്ലേ ആരംഭിക്കുന്നു...");
// സമന്വയിപ്പിച്ച പ്ലേബാക്കിനുള്ള സമയം ട്രാക്ക് ചെയ്യുക startTime = performance.now(); അനുവദിക്കുക ഫ്രെയിംഇൻഡക്സ് = 0;
// ആനിമേഷൻ ലൂപ്പ് റീപ്ലേ ചെയ്യുക ഫംഗ്ഷൻ ഘട്ടം() { const now = performance.now(); const elapsed = ഇപ്പോൾ - startTime;
// ഇപ്പോൾ സംഭവിക്കേണ്ട എല്ലാ ഫ്രെയിമുകളും പ്രോസസ്സ് ചെയ്യുക അതേസമയം (frameIndex < frames.length && frames[frameIndex].t <= കഴിഞ്ഞിരിക്കുന്നു) { കോൺസ്റ്റ് ഫ്രെയിം = ഫ്രെയിമുകൾ[frameIndex];
// റെക്കോർഡ് ചെയ്ത ബട്ടൺ ഉപയോഗിച്ച് യുഐ അപ്ഡേറ്റ് ചെയ്യുക btnA.classList.toggle("ആക്റ്റീവ്", ഫ്രെയിം.ബട്ടണുകൾ[0].അമർത്തി); btnB.classList.toggle("ആക്റ്റീവ്", ഫ്രെയിം.ബട്ടണുകൾ[1].അമർത്തി); btnX.classList.toggle("ആക്റ്റീവ്", ഫ്രെയിം.ബട്ടണുകൾ[2].അമർത്തി);
// സ്റ്റാറ്റസ് ഡിസ്പ്ലേ അപ്ഡേറ്റ് ചെയ്യുക അമർത്തട്ടെ = []; 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-നും യഥാർത്ഥത്തിൽ എന്തുചെയ്യാൻ കഴിയുമെന്നതിൽ നിങ്ങൾ ആശ്ചര്യപ്പെട്ടേക്കാം.
