ထိန်းချုပ်ကိရိယာကို ပလပ်ထိုးလိုက်သောအခါတွင် သင်သည် ခလုတ်များကို ပွတ်သပ်ခြင်း၊ တုတ်များကို ရွှေ့ခြင်း၊ အစပျိုးများ ဆွဲခြင်း... နှင့် ဆော့ဖ်ဝဲရေးသားသူအနေဖြင့် ၎င်းကို သင်မတွေ့ပါ။ ဘရောင်ဇာက ၎င်းကို ကောက်ယူနေသည်၊ သေချာသော်လည်း သင်သည် ကွန်ဆိုးလ်တွင် နံပါတ်များကို မှတ်တမ်းမတင်ပါက၊ ၎င်းကို မမြင်နိုင်ပါ။ Gamepad API နဲ့ အဲဒါက ခေါင်းကိုက်တယ်။ နှစ်တွေကြာခဲ့ပြီ၊ တကယ်ကို အစွမ်းထက်တယ်။ ခလုတ်များ၊ တုတ်များ၊ အစပျိုးမှုများ၊ လုပ်ဆောင်ချက်များကို သင်ဖတ်နိုင်သည်။ ဒါပေမယ့် လူအများစုက မထိဘူး။ ဘာကြောင့်လဲ? တုံ့ပြန်ချက်မရှိသောကြောင့်ဖြစ်သည်။ ဆော့ဖ်ဝဲအင်ဂျင်နီယာတူးလ်များတွင် အကန့်မရှိပါ။ ထိန်းချုပ်သူသည် သင်ထင်သည့်အတိုင်း လုပ်ဆောင်နေခြင်းရှိမရှိ သိရန် ရှင်းရှင်းလင်းလင်း နည်းလမ်းမရှိပါ။ မျက်စိကန်းသလို ခံစားရတယ်။ ၎င်းသည် ကျွန်ုပ်အား ကိရိယာငယ်တစ်ခု တည်ဆောက်ရန် လုံလောက်သော ချို့ယွင်းချက်ဖြစ်သည်- Gamepad Cascade Debugger။ console output ကို စိုက်ကြည့်မည့်အစား၊ controller ၏ တိုက်ရိုက်အပြန်အလှန်တုံ့ပြန်မှုမြင်ကွင်းကို သင်ရရှိမည်ဖြစ်သည်။ တစ်ခုခုကို နှိပ်လိုက်သည်နှင့် ၎င်းသည် မျက်နှာပြင်ပေါ်တွင် တုံ့ပြန်သည်။ ထို့အပြင် CSS Cascade Layers ဖြင့်၊ စတိုင်များသည် စနစ်တကျရှိနေသောကြောင့် အမှားရှာရန် ပိုရှင်းလင်းပါသည်။ ဤပို့စ်တွင်၊ အမှားရှာထိန်းချုပ်ကိရိယာများသည် အဘယ်ကြောင့် ဤမျှနာကျင်ရသနည်း၊ CSS က ၎င်းကိုရှင်းလင်းရန် ကူညီပေးပုံနှင့် သင့်ကိုယ်ပိုင်ပရောဂျက်များအတွက် ပြန်သုံးနိုင်သော ရုပ်ပုံအမှားရှာကို မည်သို့တည်ဆောက်နိုင်ပုံကို သင်ပြပါမည်။
၎င်းတို့အားလုံးကို စာရင်းသွင်းနိုင်လျှင်ပင် သင်သည် ဖတ်ရှု၍မရသော ကွန်ဆိုးလ်စပမ်းဖြင့် လျင်မြန်စွာ အဆုံးသတ်နိုင်မည်ဖြစ်သည်။ ဥပမာ- [၀၊၀၊၁၊၀၊၀။၅၊၀၊...] [၀၊၀၊၀၊၀၊၁၊၀၊၀၊...] [၀၊၀၊၁၊၀၊၀၊၀၊...]
ဘယ်ခလုတ်ကို နှိပ်ထားတယ်ဆိုတာ ပြောပြနိုင်မလား။ ဖြစ်နိုင်သည်၊ သို့သော် သင့်မျက်လုံးများကို တင်းကျပ်ပြီး သွင်းအားစု အနည်းငယ် ပျောက်ဆုံးနေမှသာ ဖြစ်နိုင်သည်။ ထို့ကြောင့်၊ ထည့်သွင်းမှုများကိုဖတ်ရှုသည့်အခါ အမှားရှာပြင်ခြင်းသည် လွယ်လွယ်ကူကူဖြစ်လာမည်မဟုတ်ပါ။ ပြဿနာ 3- ဖွဲ့စည်းပုံမရှိခြင်း။ လျင်မြန်သောအမြင်အာရုံကို ပေါင်းစပ်လိုက်လျှင်ပင်၊ စတိုင်များသည် လျင်မြန်စွာ ရှုပ်ပွသွားနိုင်သည်။ ပုံသေ၊ အသက်ဝင်နေသော၊ နှင့် အမှားရှာပြင်သည့်အခြေအနေများသည် ထပ်နေနိုင်ပြီး ရှင်းလင်းသောဖွဲ့စည်းပုံမရှိဘဲ၊ သင်၏ CSS သည် ဆတ်ဆတ်နှင့် သက်တမ်းတိုးရန် ခက်ခဲလာသည်။ CSS Cascade Layers က ကူညီနိုင်ပါတယ်။ ၎င်းတို့သည် စတိုင်များကို ဦးစားပေးအလိုက်စီထားသော "အလွှာများ" တွင် အုပ်စုဖွဲ့ထားသောကြောင့် သင်သည် သီးခြားသတ်မှတ်မှုကို ရပ်တန့်ပြီး "ဘာကြောင့် ကျွန်ုပ်၏ အမှားရှာပြင်ခြင်းပုံစံ မပြသသနည်း" ဟု မှန်းဆကြသည်။ ယင်းအစား၊ သင်သည် သီးခြားစိုးရိမ်ပူပန်မှုများကို ထိန်းသိမ်းထားပါ-
အခြေခံ- ထိန်းချုပ်ကိရိယာ၏စံနှုန်း၊ ကနဦးအသွင်အပြင်။ အသက်ဝင်သည်- နှိပ်ထားသော ခလုတ်များနှင့် ရွှေ့ထားသော တုတ်များအတွက် မီးမောင်းထိုးပြမှုများ။ အမှားရှာပြင်ခြင်း- ဆော့ဖ်ဝဲရေးသားသူများအတွက် ထပ်ဆင့်များ (ဥပမာ၊ ကိန်းဂဏာန်းဖတ်နည်းများ၊ လမ်းညွှန်ချက်များ၊ စသည်ဖြင့်)။
အကယ်၍ ကျွန်ုပ်တို့သည် CSS တွင် အလွှာများကို ၎င်းနှင့်အညီ သတ်မှတ်ရမည်ဆိုလျှင်၊ /* အနိမ့်ဆုံးမှ အမြင့်ဆုံးဦးစားပေး*/ @layer အခြေခံ၊ တက်ကြွစွာ၊ အမှားရှာပြင်ခြင်း;
@layer အခြေခံ { /*...*/ }
@layer တက်ကြွနေသည် { /*...*/ }
@layer debug { /*...*/ }
အလွှာတစ်ခုစီသည် ကြိုတင်ခန့်မှန်းနိုင်သောကြောင့် မည်သည့်စည်းမျဉ်းများအနိုင်ရသည်ကို သင်အမြဲသိပါသည်။ ဤကြိုတင်ခန့်မှန်းနိုင်မှုသည် အမှားရှာပြင်ခြင်းကို ပိုမိုလွယ်ကူစေရုံသာမက အမှန်တကယ် စီမံခန့်ခွဲနိုင်သည်။ ကျွန်ုပ်တို့သည် ပြဿနာ (မမြင်နိုင်သော၊ ရှုပ်ယှက်ခတ်နေသော ထည့်သွင်းမှု) နှင့် ချဉ်းကပ်မှု (Cascade Layers ဖြင့် တည်ဆောက်ထားသော အမြင်ဆိုင်ရာ အမှားရှာပြင်သူ) ကို ဖုံးအုပ်ထားပါသည်။ ယခု ကျွန်ုပ်တို့သည် အမှားရှာပြင်ကိရိယာကို တည်ဆောက်ရန် အဆင့်ဆင့်လုပ်ဆောင်သွားပါမည်။ Debugger အယူအဆ လျှို့ဝှက်ထည့်သွင်းမှုကို မြင်နိုင်စေရန် အလွယ်ကူဆုံးနည်းလမ်းမှာ ၎င်းကို ဖန်သားပြင်ပေါ်တွင် ဆွဲတင်ရန်ဖြစ်သည်။ အဲဒါက ဒီအမှားရှာပြင်တာပါ။ ခလုတ်များ၊ အစပျိုးမှုများနှင့် Joysticks အားလုံးသည် အမြင်အာရုံကို ရရှိသည်။
A- စက်ဝိုင်းတစ်ခု လင်းလာသည်။ တုတ်ကို နှိပ်ပါ- စက်ဝိုင်းသည် လှည့်ပတ်နေသည်။ အစပျိုးကို တစ်ဝက်ဆွဲပါ- ဘားတစ်ခုသည် တစ်ဝက်တစ်ပျက် ပြည့်သွားသည်။
ယခု သင်သည် 0s နှင့် 1s ကို မကြည့်ဘဲ၊ အမှန်တကယ် ထိန်းချုပ်ကိရိယာ တုံ့ပြန်မှုကို တိုက်ရိုက်ကြည့်ရှုနေသည်။ ဟုတ်ပါတယ်၊ သင်သည် ပုံသေ၊ ဖိထားသော၊ အမှားရှာပြင်အချက်အလက်၊ အသံသွင်းမုဒ်တစ်ခုပင်ဖြစ်နိုင်သည်ကဲ့သို့သော ပြည်နယ်များတွင် စတင်စုစည်းလိုက်သည်နှင့် CSS သည် ပိုမိုကြီးမားလာပြီး ပိုမိုရှုပ်ထွေးလာပါသည်။ အဲ့ဒီမှာ ကာစကိတ်အလွှာတွေက အဆင်ပြေပါတယ်။ ဤသည်မှာ ဖြတ်တောက်ထားသော ဥပမာတစ်ခုဖြစ်သည်။ @layer အခြေခံ { .ခလုတ် { နောက်ခံ- #222; နယ်စပ်-အချင်းဝက်: 50%; အကျယ်- 40px; အမြင့်- 40px; } }
@layer တက်ကြွနေသည် { .button.pressed { နောက်ခံ- #0f0; /*စိမ်းလန်းသော*/ } }
@layer debug { .button::ပြီးနောက် { အကြောင်းအရာ- attr(ဒေတာ-တန်ဖိုး); ဖောင့်အရွယ်အစား- 12px; အရောင်: #ffff; } }
အလွှာအမိန့်သည် အရေးကြီးသည်- အခြေခံ → တက်ကြွမှု → အမှားရှာပြင်ခြင်း။
base သည် controller ကိုဆွဲသည်။ ဖိထားသောပြည်နယ်များကို တက်ကြွစွာကိုင်တွယ်သည်။ ထပ်ဆင့်များပေါ်တွင် အမှားရှာတွေ့သည်။
ဤကဲ့သို့ ဖြိုခွဲခြင်းသည် ထူးဆန်းသော သီးခြားစစ်ပွဲများကို တိုက်ခိုက်နေခြင်းမဟုတ်ဟု ဆိုလိုသည်။ အလွှာတစ်ခုစီတွင် သူ့နေရာနှင့်သူ မည်သည် အနိုင်ရသည်ကို သင်အမြဲသိသည်။ ၎င်းကိုတည်ဆောက်ပါ။ စခရင်ပေါ်မှာ တစ်ခုခုကို အရင်ရှာကြည့်ရအောင်။ ကြည့်ကောင်းနေဖို့ မလိုပါဘူး — တည်ရှိနေဖို့သာ လိုအပ်တာမို့ ကျွန်တော်တို့နဲ့ တွဲလုပ်ရမဲ့ အရာတစ်ခုပါ။
Gamepad Cascade Debugger
အဲဒါက အမှန်တော့ အကွက်တွေချည်းပဲ။ စိတ်လှုပ်ရှားစရာမဟုတ်သေးသော်လည်း ၎င်းသည် CSS နှင့် JavaScript တို့ဖြင့် နောက်ပိုင်းတွင် ကျွန်ုပ်တို့အား ဖမ်းယူရန် လက်ကိုင်များပေးသည်။ ကောင်းပြီ၊ သင်သည် နောက်ထပ်ပြည်နယ်များကို ထပ်ထည့်လိုက်သည်နှင့် ၎င်းသည် အရာများကို စနစ်တကျ ထိန်းသိမ်းထားသောကြောင့် ဤနေရာတွင် ကာစကိတ်အလွှာများကို သုံးပါသည်။ ဤသည်မှာ ကြမ်းတမ်းသော ဖြတ်သန်းမှုဖြစ်သည်-
/* =================================== CASCADE အလွှာများ တပ်ဆင်ခြင်း။ မှာယူရန် အရေးကြီးသည်- အခြေခံ → အသက်ဝင်သည် → အမှားရှာပြင်ခြင်း။ =================================== */
/* အလွှာ၏ အစီအရင်ကို သတ်မှတ်ပါ */ @layer အခြေခံ၊ တက်ကြွစွာ၊ အမှားရှာပြင်ခြင်း;
/* အလွှာ 1- အခြေခံပုံစံများ - ပုံသေအသွင်အပြင် */ @layer အခြေခံ { .ခလုတ် { နောက်ခံ- #333; နယ်စပ်-အချင်းဝက်: 50%; အကျယ်- 70px; အမြင့်- 70px; ပြသမှု- flex; အကြောင်းပြ-အကြောင်းအရာ- ဗဟို; align-items: ဗဟို; }
.ခေတ္တရပ် { အကျယ်- 20px; အမြင့်- 70px; နောက်ခံ- #333; ပြသမှု- inline-block; } }
/* Layer 2- Active states - ဖိထားသော ခလုတ်များကို ကိုင်တွယ်သည်*/ @layer တက်ကြွနေသည် { .button.active { နောက်ခံ- #0f0; နှိပ်လိုက်သောအခါ အစိမ်းရောင်တောက်တောက် */ ပြောင်းလဲခြင်း- စကေး(၁.၁); /* ခလုတ်ကို အနည်းငယ်ချဲ့သည်*/ }
.pause.active { နောက်ခံ- #0f0; ပြောင်းလဲခြင်း- scaleY(1.1); /* ဖိလိုက်သောအခါ ဒေါင်လိုက်ဆန့်သည်*/ } }
/* Layer 3- Debug overlays - developer info*/ @layer debug { .button::ပြီးနောက် { အကြောင်းအရာ- attr(ဒေတာ-တန်ဖိုး); /* ဂဏန်းတန်ဖိုးကို ပြသည်*/ ဖောင့်အရွယ်အစား- 12px; အရောင်: #ffff; } }
ဤချဉ်းကပ်မှု၏ လှပမှုသည် အလွှာတစ်ခုစီတွင် ရှင်းလင်းပြတ်သားသော ရည်ရွယ်ချက်ရှိခြင်း ဖြစ်သည်။ အခြေခံအလွှာသည် တက်ကြွမှုကို ဘယ်တော့မှ ထပ်မရေးနိုင်သလို၊ တက်ကြွမှုသည် အတိအကျမခွဲခြားဘဲ အမှားရှာပြင်ခြင်းကို ဘယ်သောအခါမှ ထပ်မရေးနိုင်ပါ။ ၎င်းသည် များသောအားဖြင့် ပလိပ်ရောဂါရှာဖွေရေးကိရိယာများကို ချေဖျက်ပေးသည့် CSS သီးသန့်စစ်ပွဲများကို ဖယ်ရှားပေးသည်။ ယခုအခါ အချို့သော အစုအဖွဲ့များသည် အမှောင်နောက်ခံတွင် ထိုင်နေပုံရသည်။ ရိုးရိုးသားသားပြောရရင် သိပ်မဆိုးပါဘူး။
JavaScript ကိုထည့်သွင်းခြင်း။ JavaScript အချိန်။ ဤနေရာတွင် controller သည် အမှန်တကယ် တစ်ခုခုလုပ်ဆောင်သည်။ ဒါကို တစ်ဆင့်ပြီးတစ်ဆင့် တည်ဆောက်မယ်။ အဆင့် 1- ပြည်နယ်စီမံခန့်ခွဲမှုကို သတ်မှတ်ပါ။ ဦးစွာ၊ ကျွန်ုပ်တို့သည် အမှားရှာပြင်သူ၏ အခြေအနေကို ခြေရာခံရန် ကိန်းရှင်များ လိုအပ်သည်- // ========================== // ပြည်နယ်စီမံခန့်ခွဲမှု // ==========================
let running = false; // အမှားရှာပြင်သူသည် အသက်ဝင်သည်ဖြစ်စေ ခြေရာခံသည်။ rafId ပါစေ၊ // ပယ်ဖျက်ရန်အတွက် တောင်းဆိုချက်AnimationFrame ID ကို သိမ်းဆည်းသည်။
ဤကိန်းရှင်များသည် gamepad ထည့်သွင်းမှုကို စဉ်ဆက်မပြတ်ဖတ်နေသော ကာတွန်းစက်ဝိုင်းကို ထိန်းချုပ်သည်။ အဆင့် 2- DOM ရည်ညွှန်းချက်များကို ရယူပါ။ ထို့နောက်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့ အဆင့်မြှင့်တင်မည့် HTML အစိတ်အပိုင်းအားလုံးကို ကိုးကားရပါမည်- // ========================== // DOM Element ကိုးကားချက်များ // ==========================
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- Keyboard Fallback ထည့်ပါ။ ရုပ်ပိုင်းဆိုင်ရာ ထိန်းချုပ်ကိရိယာမပါဘဲ စမ်းသပ်ရန်အတွက်၊ ကျွန်ုပ်တို့သည် ကီးဘုတ်ခလုတ်များကို ခလုတ်များအဖြစ် မြေပုံဆွဲပါမည်- // ========================== // KEYBOARD FALLBACK (ထိန်းချုပ်ကိရိယာမပါဘဲ စမ်းသပ်ရန်အတွက်) // ==========================
const keyMap = { "a": btnA၊ "b": btnB၊ "x": btnX၊ "p": [pause1၊ pause2] // 'p' ခလုတ်သည် ခဏရပ်ဘားနှစ်ခုလုံးကို ထိန်းချုပ်သည်။ };
၎င်းသည် ကီးဘုတ်ပေါ်ရှိ ခလုတ်များကို နှိပ်ခြင်းဖြင့် UI ကို စမ်းသပ်နိုင်စေပါသည်။ အဆင့် 4- Main Update Loop ကိုဖန်တီးပါ။ ဤနေရာတွင် မှော်ပညာ ဖြစ်ပေါ်လာသည်။ ဤလုပ်ဆောင်ချက်သည် အဆက်မပြတ်လည်ပတ်နေပြီး gamepad အခြေအနေကို ဖတ်သည်- // ========================== // MAIN GAMEPAD UPDATE LOOP // ==========================
လုပ်ဆောင်ချက် updateGamepad() { // ချိတ်ဆက်ထားသော gamepad အားလုံးကို ရယူပါ။ const gamepads = navigator.getGamepads(); အကယ်၍ (!gamepads) ပြန်လာပါက၊
// ပထမဆုံးချိတ်ဆက်ထားသော gamepad ကိုသုံးပါ။ 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);
// အခြေအနေပြသရန်အတွက် လက်ရှိနှိပ်ထားသော ခလုတ်များစာရင်းကို တည်ဆောက်ပါ။ let pressed = []; gp.buttons.forEach((btn, i) => { အကယ်၍ (btn.pressed)pressed.push("ခလုတ်" + i); });
// ခလုတ်များကို နှိပ်ပါက အခြေအနေ စာသားကို အပ်ဒိတ်လုပ်ပါ။ if (pressed.length > 0) { status.textContent = "ဖိထားသည်- " + pressed.join(", "); } }
// အမှားရှာပြင်ခြင်း လုပ်ဆောင်နေပါက ကွင်းဆက်ကို ဆက်သွားပါ။ (ပြေးနေလျှင်) { rafId = တောင်းဆိုရန်AnimationFrame(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("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: Start/Stop Control ကိုထည့်ပါ။ နောက်ဆုံးတွင်၊ ကျွန်ုပ်တို့သည် ဒီဘာဂါကို အဖွင့်အပိတ်လုပ်ရန် နည်းလမ်းတစ်ခု လိုအပ်သည်- // ========================== // အမှားရှာပြင်ခြင်းအား ဖွင့်/ပိတ် ခလုတ်ဖွင့်ပါ။ // ==========================
document.getElementById("toggle").addEventListener("ကလစ်", () => { ပြေးခြင်း = !running; // လည်ပတ်နေသောအခြေအနေကိုလှန်ပါ။
(ပြေးနေလျှင်) { status.textContent = "Debugger ပြေးနေသည်..."; updateGamepad(); // update loop ကိုစတင်ပါ။ } အခြား { status.textContent = "Debugger မလှုပ်ရှားပါ"; ပယ်ဖျက်ရန် AnimationFrame(rafId); // ကြိုးဝိုင်းကို ရပ်လိုက်ပါ။ } });
ဟုတ်တယ်၊ ခလုတ်တစ်ချက်နှိပ်လိုက်တာနဲ့ တောက်ပနေတယ်။ တုတ်ကို တွန်းပြီး လှုပ်ရှားပါ။ ဒါပဲ။ နောက်တစ်ခု- ကုန်ကြမ်းတန်ဖိုးများ။ တခါတရံမှာ နံပါတ်တွေကို မြင်ချင်ရုံ၊ မီးရောင်ဘဲ။
ဤအဆင့်တွင်၊ သင်မြင်သင့်သည်-
ရိုးရှင်းသော မျက်နှာပြင်ပေါ်ရှိ ထိန်းချုပ်ကိရိယာ၊ သင် ၎င်းတို့နှင့် တုံ့ပြန်ရာတွင် တုံ့ပြန်သည့် ခလုတ်များ၊ နှိပ်ထားသော ခလုတ်အညွှန်းများကို ပြသသည့် ရွေးချယ်နိုင်သော အမှားရှာဖတ်ခြင်းတစ်ခု။
ဤအရာသည် စိတ္တဇနည်းစေရန်အတွက်၊ အချိန်နှင့်တပြေးညီတုံ့ပြန်နေသည့် မျက်နှာပြင်ပေါ်ရှိ ထိန်းချုပ်ကိရိယာ၏ အမြန်သရုပ်ပြမှုတစ်ခုဖြစ်သည်။
ယခု၊ Start Recording ကို နှိပ်ပြီး Stop Recording ကို မထိမချင်း အရာအားလုံးကို မှတ်တမ်းပေးပါသည်။ 2. ဒေတာကို CSV/JSON သို့ တင်ပို့ခြင်း။ ကျွန်ုပ်တို့တွင် မှတ်တမ်းတစ်ခုရှိလျှင် ၎င်းကို သိမ်းဆည်းလိုမည်ဖြစ်သည်။
အဆင့် 1: ဒေါင်းလုဒ်အကူအညီကိုဖန်တီးပါ။ ဦးစွာ၊ ကျွန်ုပ်တို့သည် ဘရောက်ဆာတွင် ဖိုင်ဒေါင်းလုဒ်များကို ကိုင်တွယ်ပေးသည့် helper function တစ်ခု လိုအပ်ပါသည်။ // ========================== // ဖိုင်ဒေါင်းလုဒ်အကူအညီပေးသူ // ==========================
function downloadFile(ဖိုင်အမည်၊ အကြောင်းအရာ၊ အမျိုးအစား = "text/plain") { // အကြောင်းအရာမှ blob တစ်ခုကို ဖန်တီးပါ။ const blob = အသစ် Blob([အကြောင်းအရာ]၊ { type }); const url = URL.createObjectURL(blob);
// ယာယီဒေါင်းလုဒ်လင့်ခ်ကို ဖန်တီးပြီး ၎င်းကို နှိပ်ပါ။ 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("ကလစ်", () => { // တင်ပို့ရန် တစ်စုံတစ်ရာ ရှိမရှိ စစ်ဆေးပါ။ if (!frames.length) { console.warn("ထုတ်ယူရန် အသံသွင်းခြင်း မရရှိနိုင်ပါ။"); ပြန်လာ; }
// metadata နှင့် frames များဖြင့် payload တစ်ခုဖန်တီးပါ။ const payload = { createdAt: new Date().toISOSTring(), ဘောင်များ };
// ဖော်မတ်လုပ်ထားသည့် JSON အဖြစ် ဒေါင်းလုဒ်လုပ်ပါ။ ဒေါင်းလုဒ်ဖိုင်( "gamepad-log.json", JSON.stringify(payload၊ null၊ 2)၊ "application/json" ); });
JSON ဖော်မတ်သည် အရာအားလုံးကို ဖွဲ့စည်းတည်ဆောက်ထားပြီး အလွယ်တကူ ခွဲခြမ်းစိပ်ဖြာနိုင်စေရန် ထိန်းသိမ်းထားသောကြောင့် ၎င်းသည် dev ကိရိယာများတွင် ပြန်တင်ခြင်း သို့မဟုတ် အသင်းဖော်များနှင့် မျှဝေခြင်းအတွက် အကောင်းဆုံးဖြစ်သည်။ အဆင့် 3- CSV တင်ပို့မှုကို ကိုင်တွယ်ပါ။ CSV ထုတ်ယူမှုများအတွက်၊ ကျွန်ုပ်တို့သည် အထက်အောက်ဒေတာကို အတန်းများနှင့် ကော်လံများအဖြစ် ပြားချပ်စေရန်လိုအပ်သည်-
//========================================= // CSV အဖြစ် တင်ပို့ရန် // ==========================
document.getElementById("export-csv").addEventListener("ကလစ်", () => { // တင်ပို့ရန် တစ်စုံတစ်ရာ ရှိမရှိ စစ်ဆေးပါ။ if (!frames.length) { console.warn("ထုတ်ယူရန် အသံသွင်းခြင်း မရရှိနိုင်ပါ။"); ပြန်လာ; }
// CSV ခေါင်းစီးအတန်းကို တည်ဆောက်ပါ (အချိန်တံဆိပ်ခေါင်းအတွက် ကော်လံများ၊ ခလုတ်များအားလုံး၊ axes အားလုံး) 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); return [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// CSV အဖြစ် ဒေါင်းလုဒ်လုပ်ပါ။ downloadFile("gamepad-log.csv", ခေါင်းစီး + အတန်းများ၊ "text/csv"); });
CSV သည် Excel သို့မဟုတ် Google Sheets တွင် တိုက်ရိုက်ဖွင့်ထားသောကြောင့် ဒေတာခွဲခြမ်းစိတ်ဖြာမှုအတွက် အထူးကောင်းမွန်ပြီး သင့်အား ဇယားများဖန်တီးရန်၊ ဒေတာစစ်ထုတ်ခြင်း သို့မဟုတ် ပုံသဏ္ဍာန်ပုံစံများကို အမြင်အာရုံဖြင့် ဖန်တီးနိုင်စေသောကြောင့်ဖြစ်သည်။ ယခု ထုတ်ယူရန် ခလုတ်များ ပါ၀င်သည်နှင့်၊ အကန့်တွင် ရွေးချယ်စရာအသစ် နှစ်ခုကို တွေ့ရပါမည်- JSON နှင့် Export CSV ကို ထုတ်ယူပါ။ JSON သည် အကြမ်းထည်ကို သင်၏ dev ကိရိယာများထဲသို့ ပြန်ထည့်ရန် သို့မဟုတ် ဖွဲ့စည်းပုံကို ဖောက်လိုပါက JSON သည် ကောင်းမွန်ပါသည်။ အခြားတစ်ဖက်တွင်မူ CSV သည် Excel သို့မဟုတ် Google Sheets တွင် တိုက်ရိုက်ဖွင့်ထားသောကြောင့် သင်ဇယားကွက်၊ စစ်ထုတ်ခြင်း သို့မဟုတ် ထည့်သွင်းမှုများကို နှိုင်းယှဉ်နိုင်သည်။ အောက်ဖော်ပြပါပုံသည် အဆိုပါအပိုထိန်းချုပ်မှုများနှင့်အတူ အကန့်၏ပုံသဏ္ဌာန်ကို ပြသထားသည်။
3. Snapshot စနစ် တစ်ခါတစ်ရံတွင် သင်သည် အပြည့်အ၀ ရိုက်ကူးရန် မလိုအပ်ပါ၊ ထည့်သွင်းမှုအခြေအနေများ၏ အမြန် "စခရင်ရှော့ရိုက်ချက်" သာဖြစ်သည်။ အဲ့ဒီမှာ Take Snapshot ခလုတ်က ကူညီပေးပါတယ်။
နှင့် JavaScript
// ========================== // လျှို့ဝှက်ချက်ယူပါ။ // ==========================
document.getElementById("snapshot").addEventListener("ကလစ်", () => { // ချိတ်ဆက်ထားသော gamepad အားလုံးကို ရယူပါ။ const pads = navigator.getGamepads(); const activePads = [];
// လှည့်ပတ်ပြီး ချိတ်ဆက်ထားသော gamepad တစ်ခုစီ၏ အခြေအနေကို ဖမ်းယူပါ။ for (const gp of pads) { အကယ်၍ (!gp) ဆက်သွားပါ။ // အလွတ်ကွက်လပ်များကို ကျော်ပါ။
activePads.push({ id: gp.id၊ // ထိန်းချုပ်သူအမည်/မော်ဒယ် အချိန်တံဆိပ်- performance.now(), ခလုတ်များ- gp.buttons.map(b => ({ pressed: b.ဖိပြီး၊ တန်ဖိုး- b.value })) axes- [...gp.axes] }); }
// မည်သည့် gamepads ကိုတွေ့ရှိကြောင်းစစ်ဆေးပါ။ အကယ်၍ (!activePads.length) { console.warn("လျှပ်တစ်ပြက်ရိုက်ချက်အတွက် gamepads ချိတ်ဆက်ထားခြင်းမရှိပါ။"); သတိပေးချက်("ထိန်းချုပ်ကိရိယာ မတွေ့ပါ!"); ပြန်လာ; }
// ဝင်ရောက်ပြီး အသုံးပြုသူကို အသိပေးပါ။ console.log("Snapshot:", activePads); သတိပေးချက်(လျှပ်တစ်ပြက်ရိုက်ထားသည်။ ${activePads.length} controller(s)) ကို ရိုက်ကူးထားသည်။ });
လျှပ်တစ်ပြက်ရိုက်ချက်များသည် သင့်ထိန်းချုပ်ကိရိယာ၏ အတိအကျအခြေအနေကို အချိန်နှင့်တပြေးညီ ရပ်တန့်သွားစေသည်။ 4. Ghost Input Replay ယခုပျော်စရာတစ်ခုအတွက်: တစ္ဆေထည့်သွင်းမှုပြန်လည်ဖွင့်။ ၎င်းသည် မှတ်တမ်းတစ်ခုယူကာ Phantom Player သည် ထိန်းချုပ်ကိရိယာကို အသုံးပြုနေသကဲ့သို့ ၎င်းကို အမြင်အာရုံဖြင့် ပြန်ဖွင့်သည်။
ပြန်လည်ပြသရန်အတွက် JavaScript- // ========================== // GHOST ပြန်ဖွင့်သည်။ // ==========================
document.getElementById("replay").addEventListener("click", () => { // ပြန်ဖွင့်ရန် ကျွန်ုပ်တို့တွင် အသံသွင်းထားရန် သေချာပါစေ။ if (!frames.length) { သတိပေးချက်("ပြန်ဖွင့်ရန် အသံသွင်းထားခြင်း မရှိ!"); ပြန်လာ; }
console.log("တစ္ဆေပြန်ကန်ခြင်းကို စတင်နေသည်...");
// စင့်ခ်လုပ်ထားသော ပြန်ဖွင့်ခြင်းအတွက် အချိန်ကို ခြေရာခံပါ။ startTime = performance.now(); frameIndex = 0 ရအောင်၊
// ကာတွန်းကားကို ပြန်ဖွင့်ပါ။ လုပ်ဆောင်မှု အဆင့်() { const now = performance.now(); const elapsed = ယခု - startTime;
// ယခုအချိန်တွင် ဖြစ်ပေါ်သင့်သော ဘောင်အားလုံးကို လုပ်ဆောင်ပါ။ while (frameIndex < frames.length && frames[frameIndex].t <= လွန်သွားသည်) { const frame = frames[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);
// အပ်ဒိတ်အခြေအနေပြသခြင်း။ let pressed = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push("Button " + i); }); if (pressed.length > 0) { status.textContent = "Ghost: " + pressed.join(", "); }
frameIndex++; }
// နောက်ထပ်ဘောင်များရှိနေပါက ကွင်းဆက်သွားပါ။ if (frameIndex < frames.length) { တောင်းဆိုရန် AnimationFrame(ခြေလှမ်း); } အခြား { console.log("ပြန်ဖွင့်သည်။ပြီးပြီ။"); status.textContent = "ပြန်ဖွင့်ခြင်း ပြီးပါပြီ"; } }
// ပြန်လည်ဖွင့်ခြင်းကို စတင်ပါ။ အဆင့်(); });
အမှားရှာပြင်ခြင်းကို အနည်းငယ်ပိုမိုလုပ်ဆောင်ရန်၊ ကျွန်ုပ်သည် တစ္ဆေပြန်ဖွင့်ခြင်းကို ထည့်သွင်းခဲ့သည်။ သင်သည် စက်ရှင်တစ်ခုကို မှတ်တမ်းတင်ပြီးသည်နှင့် သင်သည် ဖန်တန်ပလေယာက pad လည်ပတ်နေသကဲ့သို့ UI သည် ၎င်းကို ပြန်လည်ပြသခြင်းကို နှိပ်၍ ကြည့်ရှုနိုင်သည်။ ဤအတွက် အကန့်တွင် Replay Ghost ခလုတ်အသစ်တစ်ခု ပေါ်လာသည်။
မှတ်တမ်းကို နှိပ်ပါ၊ ထိန်းချုပ်ကိရိယာနှင့် အနည်းငယ် ရောနှောပါ၊ ရပ်ပါ၊ ထို့နောက် ပြန်ကစားပါ။ UI သည် သင်၏ထည့်သွင်းမှုများနောက်တွင် တစ္ဆေသရဲကဲ့သို့ သင်ပြုလုပ်ခဲ့သမျှကို ပဲ့တင်ထပ်ပါသည်။ ဤအပိုပစ္စည်းများကို အဘယ်ကြောင့် စိတ်အနှောင့်အယှက်ဖြစ်စေသနည်း။
မှတ်တမ်းတင်ခြင်း/ထုတ်ယူခြင်းများသည် စမ်းသပ်သူများအတွက် ဖြစ်ပျက်ခဲ့သည်ကို အတိအကျပြသရန် လွယ်ကူစေသည်။ ထူးဆန်းသော bug များကို သင်လိုက်လံရှာဖွေနေချိန်တွင် လျှပ်တစ်ပြက်ရိုက်ချက်များသည် အချိန်မီ အေးခဲသွားပါသည်။ Ghost replay သည် ကျူတိုရီရယ်များ၊ ဝင်ရောက်နိုင်မှု စစ်ဆေးမှုများ သို့မဟုတ် ထိန်းချုပ်မှုစနစ်များကို ဘေးချင်းကပ်ကာ နှိုင်းယှဉ်ရုံအတွက် ကောင်းမွန်ပါသည်။
ဤအချိန်တွင်၊ ၎င်းသည် သပ်ရပ်သောသရုပ်ပြရုံမျှသာမဟုတ်တော့ဘဲ သင်အမှန်တကယ်လုပ်ဆောင်နိုင်သော အရာတစ်ခုဖြစ်သည်။ အစစ်အမှန်ကမ္ဘာအသုံးပြုမှုကိစ္စများ ယခု ကျွန်ုပ်တို့တွင် များစွာလုပ်ဆောင်နိုင်သည့် ဤအမှားရှာပြင်ကိရိယာကို ရရှိထားပါသည်။ ၎င်းသည် တိုက်ရိုက်ထည့်သွင်းမှုကို ပြသသည်၊ မှတ်တမ်းများကို မှတ်တမ်းတင်ခြင်း၊ ၎င်းတို့ကို ထုတ်ယူခြင်းနှင့် ပစ္စည်းများ ပြန်လည်ပြသခြင်းတို့ကိုပင် ပြသသည်။ ဒါပေမယ့် တကယ့်မေးခွန်းက ဘယ်သူက တကယ်ဂရုစိုက်တာလဲ။ ဒါက ဘယ်သူ့အတွက် အသုံးဝင်လဲ။ Game Developers များ ထိန်းချုပ်ကိရိယာများသည် အလုပ်၏တစ်စိတ်တစ်ပိုင်းဖြစ်သည်၊ သို့သော် ၎င်းတို့ကို အမှားရှာနေပါသလား။ နာကျင်တတ်သည်။ ↓ → + punch ကဲ့သို့သော တိုက်ခိုက်ရေးဂိမ်းပေါင်းစပ်မှုကို သင်စမ်းသပ်နေသည်ဟု မြင်ယောင်ကြည့်ပါ။ ဆုတောင်းမည့်အစား ထိုနည်းအတိုင်း နှစ်ခါ ဖိပြီး တစ်ကြိမ် မှတ်တမ်းတင်ပြီး ပြန်ဖွင့်ပါ။ ပြီးပြီ။ သို့မဟုတ် JSON မှတ်တမ်းများကို သင်၏ကစားသူအများအပြားကုဒ်သည် ၎င်းတို့၏စက်တွင် အလားတူတုံ့ပြန်မှုရှိမရှိ စစ်ဆေးရန် အသင်းဖော်တစ်ဦးနှင့် လဲလှယ်ပါ။ အဲဒါ ကြီးတယ်။ သုံးစွဲနိုင်မှုတော်များ ဒါက ငါ့နှလုံးသားနဲ့ နီးတယ်။ လူတိုင်းသည် "စံ" ထိန်းချုပ်ကိရိယာဖြင့်ကစားကြသည်မဟုတ်ပါ။ လိုက်လျောညီထွေရှိသော ထိန်းချုပ်ကိရိယာများသည် တစ်ခါတစ်ရံတွင် ထူးဆန်းသောအချက်ပြမှုများကို ထုတ်လွှတ်သည်။ ဤကိရိယာဖြင့် သင်သည် ဖြစ်ပျက်နေသည်ကို အတိအကျ သိနိုင်သည်။ ဆရာ၊ သုတေသီ ဘယ်သူပဲ ဖြစ်ဖြစ်။ ၎င်းတို့သည် မှတ်တမ်းများကို ဖမ်းယူ၊ ၎င်းတို့ကို နှိုင်းယှဉ်နိုင်သည်၊ သို့မဟုတ် ထည့်သွင်းမှုများကို ဘေးချင်းကပ်လျက် ပြန်ဖွင့်နိုင်သည်။ ရုတ်တရက် မမြင်နိုင်သော အရာများ ပေါ်လာသည်။ အရည်အသွေးအာမခံစစ်ဆေးမှု စမ်းသပ်သူများသည် “ဤနေရာတွင် ခလုတ်များကို ကြိတ်မိ၍ ပျက်သွားသည်” ကဲ့သို့သော မှတ်စုများကို ရေးလေ့ရှိသည်။ သိပ်အထောက်အကူမဖြစ်ပါဘူး။ ကဲ? ၎င်းတို့သည် တိကျသော စာနယ်ဇင်းများကို ဖမ်းယူနိုင်ပြီး မှတ်တမ်းကို ထုတ်ယူနိုင်ပြီး ၎င်းကို ဖယ်ရှားနိုင်သည်။ မှန်းဆခြင်းမရှိ။ ပညာတတ်များ အကယ်၍ သင်သည် ကျူတိုရီရယ် သင်ခန်းစာများ သို့မဟုတ် YouTube ဗီဒီယိုများ ပြုလုပ်နေပါက တစ္ဆေပြန်ဖွင့်ခြင်းသည် ရွှေဖြစ်သည်။ UI က ဖြစ်ပျက်နေတာကို ပြနေချိန်မှာ "ဒါက controller နဲ့ လုပ်ခဲ့တာပဲ" လို့ စာသားအတိုင်း ပြောနိုင်ပါတယ်။ ရှင်းပြချက်များကို ပိုမိုရှင်းလင်းစေသည်။ ဂိမ်းများအပြင် ဟုတ်တယ်၊ ဒါက ဂိမ်းတွေချည်းပဲ မဟုတ်ဘူး။ လူများသည် စက်ရုပ်များ၊ အနုပညာပရောဂျက်များနှင့် ဝင်ရောက်နိုင်မှု အင်တာဖေ့စ်များအတွက် ထိန်းချုပ်ကိရိယာများကို အသုံးပြုခဲ့ကြသည်။ အချိန်တိုင်း တူညီသောပြဿနာ- ဘရောက်ဆာက ဘာကို အမှန်တကယ် မြင်နေရတာလဲ။ ဤအရာကိုသင်ခန့်မှန်းရန်မလိုအပ်ပါ။ နိဂုံး ထိန်းချုပ်ကိရိယာထည့်သွင်းမှုကို အမှားရှာခြင်းသည် အမြဲတမ်း မျက်စိကန်းသွားသလို ခံစားရသည်။ DOM သို့မဟုတ် CSS နှင့်မတူဘဲ၊ gamepads အတွက် built-in inspector မရှိပါ။ ၎င်းသည် ကွန်ဆိုးလ်ရှိ ဂဏန်းအကြမ်းမျှသာဖြစ်ပြီး ဆူညံသံတွင် အလွယ်တကူ ပျောက်ဆုံးသွားပါသည်။ HTML၊ CSS နှင့် JavaScript လိုင်းရာဂဏန်းအနည်းငယ်ဖြင့် ကျွန်ုပ်တို့သည် မတူညီသောအရာတစ်ခုကို တည်ဆောက်ခဲ့သည်-
မမြင်နိုင်သော ထည့်သွင်းမှုများကို မြင်နိုင်စေသည့် ရုပ်ပိုင်းဆိုင်ရာ အမှားရှာပြင်ကိရိယာ။ UI ကို သန့်ရှင်းစေပြီး အမှားရှာနိုင်သော အလွှာလိုက် CSS စနစ်။ ၎င်းကို သရုပ်ပြမှုမှ ဆော့ဖ်ဝဲအင်ဂျင်နီယာတူးလ်အထိ မြှင့်တင်ပေးသည့် အဆင့်မြှင့်တင်မှုများ (မှတ်တမ်းတင်ခြင်း၊ ထုတ်ယူခြင်း၊ လျှပ်တစ်ပြက်ရိုက်ချက်များ၊ တစ္ဆေပြန်ဖွင့်ခြင်း)။
ဤပရောဂျက်သည် Web Platform ၏စွမ်းအားကို CSS Cascade Layers တွင် ဖန်တီးမှုအနည်းငယ်ဖြင့် ရောနှောခြင်းဖြင့် သင်သွားနိုင်သည့်အကွာအဝေးကို ပြသသည်။ ကျွန်တော် အခုလေးတင် ရှင်းပြထားတဲ့ tool တစ်ခုလုံးက open-source ပါ။ သင်သည် GitHub repo ကိုပွားပြီး သင်ကိုယ်တိုင်စမ်းသုံးနိုင်သည်။ ဒါပေမယ့် ပိုအရေးကြီးတာက မင်းကိုယ်တိုင်လုပ်လို့ရတယ်။ သင်၏ကိုယ်ပိုင်အလွှာများထည့်ပါ။ သင့်ကိုယ်ပိုင် ပြန်လည်ကစားသည့် ယုတ္တိဗေဒကို တည်ဆောက်ပါ။ ၎င်းကို သင်၏ဂိမ်းပုံစံနှင့် ပေါင်းစပ်ပါ။ ဒါမှမဟုတ် မထင်မှတ်ထားတဲ့ နည်းလမ်းတွေနဲ့တောင် အသုံးပြုနိုင်ပါတယ်။ သင်ကြားမှု၊ သုံးစွဲနိုင်မှု သို့မဟုတ် ဒေတာခွဲခြမ်းစိတ်ဖြာမှုအတွက်။ နေ့၏အဆုံးတွင်၊ ၎င်းသည် gamepads များကိုအမှားရှာခြင်းအတွက်သာမဟုတ်ပါ။ ၎င်းသည် လျှို့ဝှက်ထည့်သွင်းမှုများတွင် အလင်းကိုထွန်းလင်းစေခြင်းအကြောင်းဖြစ်ပြီး ဝဘ်က အပြည့်အဝလက်ခံနိုင်ခြင်းမရှိသော ဟာ့ဒ်ဝဲနှင့် အလုပ်လုပ်ရန် ဆော့ဖ်ဝဲအင်ဂျင်နီယာများအား ယုံကြည်မှုပေးခြင်းဖြစ်သည်။ ထို့ကြောင့်၊ သင်၏ ထိန်းချုပ်ကိရိယာကို ပလပ်ထိုးပါ၊ သင်၏ တည်းဖြတ်သူကို ဖွင့်ပြီး စမ်းသပ်မှု စတင်ပါ။ သင့်ဘရောက်ဆာနှင့် သင့် CSS သည် အမှန်တကယ်လုပ်ဆောင်နိုင်သည်ကို သင်အံ့သြမိပေမည်။
