کاتێک کۆنتڕۆڵکەرێک دەخەیتە ناوەوە، دوگمەکان دەکوڵێنیت، دارەکان دەجوڵێنیت، تریگەرەکان دەکێشیت... و وەک گەشەپێدەرێک، هیچیان نابینیت. وێبگەڕەکە هەڵیدەگرێت، دڵنیابە، بەڵام مەگەر ژمارەکان لە کۆنسۆڵەکەدا تۆمار نەکەیت، ئەوە نابینرێت. ئەوە سەرئێشەی Gamepad API یە. ساڵانێکە بوونی هەیە، لە ڕاستیدا زۆر بەهێزە. دەتوانیت دوگمە، دار، تریگەر، کارەکان بخوێنیتەوە. بەڵام زۆربەی خەڵک دەستی لێ نادەن. بۆچی؟ چونکە هیچ فیدباکێک نییە. هیچ پانێڵێک لە ئامرازەکانی گەشەپێدەردا نییە. هیچ ڕێگەیەکی ڕوون نییە بۆ ئەوەی بزانیت کە ئایا کۆنترۆڵکەرەکە تەنانەت ئەو کارە دەکات کە تۆ بیری لێدەکەیتەوە. هەست دەکەیت بە کوێرەوەری دەفڕیت. ئەوەش ئەوەندە هەڵەی کردم کە ئامرازێکی بچووک دروست بکەم: Gamepad Cascade Debugger. لەبری ئەوەی چاوت لە دەرچوونی کۆنسۆڵەکە بێت، دیمەنێکی ڕاستەوخۆ و کارلێککاری کۆنترۆڵکەرەکە بەدەست دەهێنیت. شتێک داگرە و لەسەر شاشەکە کاردانەوەی دەبێت. وە لەگەڵ CSS Cascade Layers، ستایلەکان بە ڕێکخراو دەمێننەوە، بۆیە پاکترە بۆ چاککردنەوە. لەم پۆستەدا، نیشانتان دەدەم کە بۆچی چاککردنی کۆنتڕۆڵکەرەکان ئازارێکی زۆرە، چۆن CSS یارمەتی پاککردنەوەی دەدات، و چۆن دەتوانیت هەڵەکردنێکی بینراوی دووبارە بەکارهێنەرەوە بۆ پڕۆژەکانی خۆت دروست بکەیت.
تەنانەت ئەگەر بتوانی هەموویان تۆمار بکەیت، بە خێرایی کۆتایی بە سپامێکی کۆنسۆڵ ناخوێندرێتەوە. بۆ نموونە: [0،0،1،0،0،0.5،0،...] [0،0،0،0،1،0،0،...] [0،0،1،0،0،0،0،...]
دەتوانیت بزانیت چ دوگمەیەک فشاری خستۆتە سەر؟ ڕەنگە، بەڵام تەنها دوای ئەوەی چاوەکانت گرژ بوویت و چەند ئینپوتێکت لەدەستدا. کەواتە، نەخێر، چاککردنەوە بە ئاسانی نایەت کاتێک باس لە خوێندنەوەی ئینپوتەکان دەکرێت. کێشەی سێیەم: نەبوونی پێکهاتە تەنانەت ئەگەر ڤیژولایزەرێکی خێرا بەیەکەوە فڕێ بدەیت، ستایلەکان دەتوانن بە خێرایی تێکەڵاو بن. دۆخی پێشوەختە و چالاک و چاککردنەوە دەتوانن سەریەک بخەن و بەبێ پێکهاتەیەکی ڕوون، CSS ـەکەت دەشکێت و درێژکردنەوەی قورسە. چینەکانی CSS Cascade دەتوانن یارمەتیدەر بن. ئەوان ستایلەکان گرووپ دەکەن بۆ "چینەکان" کە بەپێی ئەولەویەت ڕێکخراون، بۆیە تۆ واز لە شەڕکردن بە تایبەتمەندی و پێشبینیکردن دەهێنیت، “بۆچی ستایلەکانی چاککردنەوەکەم نیشان نادرێت؟” بەڵکو تۆ نیگەرانییە جیاوازەکان دەپارێزیت:
بنەما: ستانداردی کۆنترۆڵکەر، دەرکەوتنی سەرەتایی. چالاک: هایلایت بۆ دوگمەی فشار و دارە جوڵاوەکان. چاککردنەوە: سەرپۆشەکان بۆ گەشەپێدەران (بۆ نموونە، خوێندنەوەی ژمارەیی، ڕێنماییەکان و هتد).
ئەگەر بەپێی ئەمە چینەکان لە CSS پێناسە بکەین، ئەوا: /* نزمترین بۆ بەرزترین یەکەمایەتی */ @layer base، چالاک، چاککردنەوە؛
@layer base { /* ... */ }
@layer چالاک { /* ... */ }
@layer debug { /* ... */ }
چونکە هەر چینێک بە شێوەیەکی پێشبینیکراو کۆدەبێتەوە، هەمیشە دەزانیت کام یاسا سەردەکەوێت. ئەو پێشبینیکردنە وا دەکات کە چاککردنەوە نەک تەنها ئاسانتر بێت، بەڵکو لە ڕاستیدا بەڕێوەبچێت. ئێمە کێشەکەمان ڕووماڵ کردووە (هاتنە ژوورەوەی نەبینراو، ناڕێک) و ڕێگاکە (هەڵەکێشێکی بینراو کە بە چینەکانی Cascade دروستکراوە). ئێستا ئێمە بە پرۆسەی هەنگاو بە هەنگاودا دەڕۆین بۆ دروستکردنی دیباگەرەکە. چەمکی دیباگەر ئاسانترین ڕێگا بۆ ئەوەی ئینپوت شاراوە دیار بێت ئەوەیە تەنها لەسەر شاشەکە بیکێشیت. ئەمەیە کە ئەم دیباگەرە دەیکات. دوگمە و تریگەر و جۆیستیک هەموویان دیمەنێکیان دەست دەکەوێت.
فشار بخەرە سەر A: بازنەیەک ڕووناک دەبێتەوە. دارەکە پەنجە بنێ: بازنەکە بە دەوریدا دەخلیسکێت. تریگەرێک لە نیوەی ڕێگادا ڕابکێشە: بارێک لە نیوەی ڕێگادا پڕ دەبێتەوە.
ئێستا تۆ چاوت لە 0 و 1 نییە، بەڵکو لە ڕاستیدا سەیری کاردانەوەی کۆنترۆڵکەرەکە دەکەیت بە شێوەیەکی ڕاستەوخۆ. بێگومان کاتێک دەست دەکەیت بە کەڵەکەبوون لەسەر حاڵەتەکانی وەکو پێشوەختە، فشار، زانیاری چاککردنەوە، ڕەنگە تەنانەت دۆخی تۆمارکردن، CSS دەست دەکات بە گەورەتر و ئاڵۆزتر. لێرەدایە کە چینەکانی کاسکەید بەسوود دەبن. لێرەدا نموونەیەکی ڕوتکراوە دەخەینەڕوو: @layer base { .دوگمەی { پاشخان: #222؛ تیژڕەوی سنوور: 50%؛ پانایی: 40px؛ بەرزی: 40px؛ } }
@layer چالاک { .دوگمەی.پەستانی { . پاشخان: #0f0; /* سەوزی گەش */ } }
@layer debug { .دوگمەی::دوای { ناوەڕۆک: attr (بەهای داتا); قەبارەی فۆنت: 12px؛ ڕەنگ: #fff؛ } }
ڕێکوپێکی چینەکان گرنگە: بنەما → چالاک → چاککردنەوە.
base کۆنتڕۆڵکەرەکە دەکێشێت. دەستە چالاکەکان دۆخی فشاریان لەسەرە. debug فڕێدان لەسەر سەرپۆشەکان.
شکاندنی بەم شێوەیە واتە تۆ شەڕی تایبەتمەندی سەیر ناکەیت. هەر چینێک شوێنی خۆی هەیە، هەمیشە دەزانیت چی سەردەکەوێت. Building It Out با سەرەتا شتێک بخەینە سەر شاشە. پێویست ناکات باش دەربکەوێت — تەنها پێویستە بوونی هەبێت بۆ ئەوەی شتێکمان هەبێت بۆ کارکردن لەگەڵیدا.
گەیمپاد کاسکەید دیباگەر
ئەوە بە واتایەکی ڕەسەن تەنها سندوقە. هێشتا ورووژێنەر نییە، بەڵام دەستە دەستەیەکمان پێدەبەخشێت کە دواتر بە CSS و جاڤاسکڕێپت دەستی پێبگرین. باشە، من لێرەدا چینەکانی cascade بەکاردەهێنم چونکە شتەکان ڕێکدەخات کاتێک دۆخی زیاتر زیاد دەکەیت. لێرەدا پاسێکی زبر دەخەینەڕوو:
/* =================================== ڕێکخستنی چینەکانی CASCADE ڕیزبەندی گرنگە: بنەما → چالاک → چاککردنەوە ====================================== */
/* پێشوەختە ڕێکخستنی چینەکان پێناسە بکە */ @layer base، چالاک، چاککردنەوە؛
/* چینى یەکەم: شێوازە بنەڕەتییەکان - دەرکەوتنی پێشوەختە */ @layer base { .دوگمەی { پاشخان: #333؛ تیژڕەوی سنوور: 50%؛ پانایی: 70px؛ بەرزی: 70px؛ پیشاندانی: فلیکس؛ justify-content: ناوەند؛ align-items: ناوەند؛ }
.وەستان { پانایی: 20px؛ بەرزی: 70px؛ پاشخان: #333؛ پیشاندانی: inline-block؛ } }
/* چینى دووەم: حاڵەتە چالاکەکان - مامەڵە لەگەڵ دوگمە فشارکراوەکان دەکات */ @layer چالاک { .دوگمەی.چالاک { پاشخان: #0f0; /* سەوزێکی گەشاوە کاتێک فشار دەخرێتە سەر */ گۆڕانکاری: پێوەر (1.1); /* کەمێک دوگمەکە گەورە دەکات */ }
.وەستان.چالاک { پاشخان: #0f0; گۆڕینی: پێوەرY(1.1); /* کاتێک فشار دەخرێتە سەر بە شێوەیەکی ڕاست کشاوە */ } }
/* چینى سێیەم: سەرپۆشەکانى چاککردنەوە - زانیاری گەشەپێدەر */ @layer debug { .دوگمەی::دوای { ناوەڕۆک: attr (بەهای داتا); /* بەهای ژمارەیی پیشان دەدات */ قەبارەی فۆنت: 12px؛ ڕەنگ: #fff؛ } }
جوانی ئەم ڕێبازە ئەوەیە کە هەر چینێک ئامانجێکی ڕوونی هەیە. چینە بنەڕەتییەکە هەرگیز ناتوانێت چالاک جێبەجێ بکات، و چالاک هەرگیز ناتوانێت چاککردنەوە جێبەجێ بکات، بەبێ گوێدانە تایبەتمەندی. ئەمەش شەڕەکانی تایبەتمەندی CSS کە بەزۆری ئامرازەکانی هەڵەکردن دەگرن، لەناو دەبات. ئێستا وا دیارە هەندێک پۆل لەسەر پاشبنەمایەکی تاریک دانیشتوون. ڕاستگۆیانە زۆر خراپ نییە.
زیادکردنی جاڤاسکڕێپت کاتی جاڤاسکڕێپت. ئەمەیە کە لە ڕاستیدا کۆنترۆڵکەر شتێک دەکات. ئێمە هەنگاو بە هەنگاو ئەم شتە بنیات دەنێین. هەنگاوی یەکەم: ڕێکخستنی بەڕێوەبردنی دەوڵەت سەرەتا پێویستمان بە گۆڕاوەکانە بۆ بەدواداچوونی دۆخی دیباگەرەکە: // ================================== // بەڕێوەبردنی دەوڵەت // ==================================
با ڕاکردن = درۆ؛ // بەدواداچوون بۆ ئەوە دەکات کە ئایا دیباگەر چالاکە یان نا با rafId؛ // ناسنامەی requestAnimationFrame هەڵدەگرێت بۆ هەڵوەشاندنەوە
ئەم گۆڕاوانە کۆنتڕۆڵی لوپی ئەنیمەیشن دەکەن کە بەردەوام ئینپوتەکانی گەیمپاد دەخوێنێتەوە. هەنگاوی دووەم: ئاماژەکانی DOM بگرە دواتر، ئاماژە بۆ هەموو ئەو توخمانەی HTML وەردەگرین کە نوێیان دەکەینەوە: // ================================== // ئاماژەکانی توخمەکانی DOM // ==================================
const btnA = بەڵگەنامە.getElementById ("btn-a"); const btnB = بەڵگەنامە.getElementById ("btn-b"); const btnX = بەڵگەنامە.getElementById ("btn-x"); const pause1 = بەڵگەنامە.getElementById ("وەستان1"); const pause2 = بەڵگەنامە.getElementById ("وەستان 2"); const دۆخی = بەڵگەنامە.getElementById ("دۆخی");
هەڵگرتنی ئەم ئاماژانە لە پێشەوە کاراترە لە پرسیارکردنی دووبارە و سێبارە لە DOM. هەنگاوی سێیەم: زیادکردنی Keyboard Fallback بۆ تاقیکردنەوە بەبێ کۆنترۆڵکەری فیزیکی، ئێمە کلیلەکانی کیبۆرد بۆ دوگمەکان نەخشە دەکەین: // ================================== // KEYBOARD FALLBACK (بۆ تاقیکردنەوە بەبێ کۆنترۆڵکەر) // ==================================
نەخشەی کلیلی const = { "a": btnA، "ب": btnB، "x": btnX، "p": [pause1, pause2] // کلیلی 'p' هەردوو باری وەستانەکە کۆنتڕۆڵ دەکات };
ئەمەش ڕێگەمان پێدەدات UI تاقی بکەینەوە بە فشاردان لەسەر کلیلەکان لەسەر کیبۆردێک. هەنگاوی چوارەم: دروستکردنی The Main Update Loop لێرەدا سیحرەکە ڕوودەدات. ئەم فەنکشنە بە بەردەوامی کاردەکات و دۆخی گەیمپاد دەخوێنێتەوە: // ================================== // LOOP نوێکردنەوەی GAMEPAD سەرەکی // ==================================
فەنکشن نوێکردنەوەیGamepad() { // هەموو گەیمپادەکانی پەیوەستکراو بەدەست بهێنە const gamepads = navigator.getGamepads (); ئەگەر (!gamepads) بگەڕێنەوە؛
// یەکەم گەیمپادی پەیوەستکراو بەکاربهێنە const gp = گەیمپادەکان [0];
ئەگەر (gp) { // دۆخی دوگمەی نوێ بکەرەوە بە گۆڕینی پۆلی "چالاک". btnA.classList.toggle("چالاک"، دوگمەکانی gp.[0]. فشاریان خستۆتە سەر); btnB.classList.toggle("چالاک"، دوگمەکانی gp.[1]. فشارخراوە); btnX.classList.toggle("چالاک"، دوگمەکانی gp.[2]. فشارخراوە);
// دوگمەی وەستان دەستەبەر بکە (ئیندێکسی دوگمەی ٩ لەسەر زۆربەی کۆنترۆڵکەرەکان) const pausePressed = gp.دوگمەکان [9]. فشارخراوە؛ pause1.classList.toggle("چالاک"، pausePressed); pause2.classList.toggle("چالاک"، pausePressed);
// لیستی دوگمەکانی ئێستا دروست بکە بۆ پیشاندانی دۆخ با فشار بخرێتە سەر = []; gp.buttons.forEach ((btn، من) => { ئەگەر (btn.pressed)pressed.push("دوگمە " + i); });
// دەقی دۆخ نوێ بکەرەوە ئەگەر هەر دوگمەیەک فشاردرا ئەگەر (فشار.درێژی > 0) { status.textContent = "پەستان خراوەتە سەر: " + فشار خراوەتە سەر.join(", "); } }
// بەردەوام بە لە لوپەکە ئەگەر دیباگەر کاردەکات ئەگەر (ڕاکردن) { rafId = requestAnimationFrame (نوێکردنەوەیGamepad); } }
شێوازی classList.toggle() پۆلی چالاک زیاد دەکات یان لا دەبات بە پشتبەستن بەوەی کە ئایا دوگمەکە فشاردراوە یان نا، ئەمەش ستایلەکانی چینە CSSەکانمان دەستپێدەکات. هەنگاوی پێنجەم: مامەڵەکردن لەگەڵ ڕووداوەکانی کیبۆرد ئەم گوێگرانەی ڕووداوەکان وا لە کیبۆرد فاڵباک دەکەن کار بکات: // ================================== // KEYBOARD EVENT HANDLERS // ==================================
document.addEventListener("کلیل دابەزاندن", (e) => { ئەگەر (keyMap[e.key]) { // مامەڵەکردن لەگەڵ تاکە توخمێک یان چەند توخمێک ئەگەر (Array.isArray (نەخشەی کلیل [e.key])) { keyMap [e.key].forEach (el => el.classList.add ("چالاک")); } else { keyMap [e.key].classList.add("چالاک"); } status.textContent = "کلیلەکە فشاردرا: " + e.key.toUpperCase(); } });
document.addEventListener("کلیلکردن", (e) => { ئەگەر (keyMap[e.key]) { // دۆخی چالاک لاببە کاتێک کلیلەکە ئازاد دەکرێت ئەگەر (Array.isArray (نەخشەی کلیل [e.key])) { keyMap [e.key].forEach (el => el.classList.remove ("چالاک")); } else { keyMap [e.key].classList.remove ("چالاک"); } status.textContent = "کلیلی ئازادکراوە: " + e.key.toUpperCase(); } });
هەنگاوی شەشەم: زیادکردنی کۆنترۆڵی دەستپێکردن/وەستان لە کۆتاییدا پێویستمان بە ڕێگەیەک هەیە بۆ ئەوەی دیباگەرەکە داگیرسێنین و بکوژێنینەوە: // ================================== // TOGGLE DEBUGGER داگیرساندن/کوژاندنەوە // ==================================
document.getElementById("toggle").addEventListener("کلیک" بکە، () => { ڕاکردن = !ڕاکردن؛ // دۆخی کارکردنەکە بگۆڕە
ئەگەر (ڕاکردن) { status.textContent = "دیباگەر کاردەکات..."; updateGamepad (); // دەستپێکردنی لوپی نوێکردنەوە } else { status.textContent = "دیباگەر ناچالاک"; هەڵوەشاندنەوەی چوارچێوەی ئەنیمەیشنی (rafId); // لوپەکە بوەستێنە } });
کەواتە بەڵێ، دوگمەیەک داگرە و دەدرەوشێتەوە. پاڵ بە دارەکەوە بنێ و دەجووڵێت. ئەوە تەواو. شتێکی تر: بەها خامەکان. هەندێک جار تەنها دەتەوێت ژمارە ببینیت نەک گڵۆپ.
لەم قۆناغەدا پێویستە ببینیت:
کۆنتڕۆڵکەرێکی سادەی سەر شاشە، ئەو دوگمانەی کە کاردانەوەیان دەبێت لەگەڵ کارلێککردنت لەگەڵیان، و... خوێندنەوەیەکی هەڵەکردنی هەڵبژاردە کە ئیندێکسی دوگمەی فشاردراو پیشان دەدات.
بۆ ئەوەی ئەمە کەمتر ئەبستراکت بێت، لێرەدا دیمۆیەکی خێرا لە کۆنترۆڵکەری سەر شاشە کە لە کاتی ڕاستەقینەدا کاردانەوەی دەبێت:
ئێستا، فشاردان لەسەر Start Recording هەموو شتێک تۆمار دەکات تاوەکو لێدەدەیت Stop Recording. 2. هەناردەکردنی داتا بۆ CSV/JSON کاتێک لۆگێکمان هەبوو، دەمانەوێت پاشەکەوتی بکەین.
هەنگاوی یەکەم: دروستکردنی The Download Helper سەرەتا پێویستمان بە فەنکشنێکی یارمەتیدەرە کە مامەڵە لەگەڵ دابەزاندنی فایلەکان بکات لە وێبگەڕەکەدا: // ================================== // یارمەتیدەری دابەزاندنی فایل // ==================================
function downloadFile(ناوی پەڕگە، ناوەڕۆک، جۆر = "دەق/سادە") { // دروستکردنی بلۆبێک لە ناوەڕۆکەکەوە const blob = New Blob ([ناوەڕۆک]، { جۆر }); const url = URL.دروستکردنی ئۆبجێکتیURL (بلۆب);
// لینکی دابەزاندنی کاتی دروست بکە و کلیکی لەسەر بکە const a = بەڵگەنامە.دروستکردنی توخم ("a"); a.href = url؛ a.download = ناوی پەڕگە؛ a.click();
// دوای دابەزاندن URLی شتەکە پاک بکەرەوە setTimeout (() => URL.revokeObjectURL (url)، 100); }
ئەم فەنکشنە بە دروستکردنی Blob (شتێکی گەورەی دووانەیی) لە داتاکانتەوە کاردەکات، دروستکردنی URLێکی کاتی بۆی و بە شێوەیەکی بەرنامەیی کرتەکردن لەسەر بەستەرێکی دابەزاندن. پاککردنەوەکە دڵنیای دەدات لەوەی کە بیرگە دزە ناکەین. هەنگاوی دووەم: مامەڵە لەگەڵ هەناردەکردنی JSON بکە JSON تەواو گونجاوە بۆ پاراستنی پێکهاتەی تەواوی داتا:
// ================================== // هەناردەکردن وەک JSON // ==================================
document.getElementById("هەناردەکردن-json").addEventListener("کلیک" بکە، () => { // بزانە شتێک هەیە بۆ هەناردەکردن ئەگەر (!درێژی چوارچێوە) { console.warn("هیچ تۆمارێک بەردەست نییە بۆ هەناردەکردن."); گەڕانەوە؛ }
// دروستکردنی باری سوودبەخش بە مێتاداتا و چوارچێوە const باری سوودبەخش = { دروستکراوە لە: بەرواری نوێ ().toISOString(), چوارچێوە };
// دابەزاندن وەکو فۆرماتکراوی JSON دابەزاندنی فایل( "گەیمپاد-لۆگ.جسۆن"، JSON.stringify (باری سوودبەخش، پووچ، 2)، "ئەپلیکەیشن/json" ); });
فۆرماتەکەی JSON هەموو شتێک بە پێکهاتە و بە ئاسانی شیکاری دەهێڵێتەوە، ئەمەش وایکردووە کە ئایدیاڵ بێت بۆ بارکردنەوە بۆ ناو ئامرازەکانی dev یان هاوبەشکردن لەگەڵ هاوڕێکانی تیم. هەنگاوی سێیەم: مامەڵە لەگەڵ هەناردەکردنی CSV بکە بۆ هەناردەکردنی CSV پێویستە داتا پلەبەندییەکان تەخت بکەین بۆ ڕیز و ستوون:
//=================================== // هەناردەکردن وەک CSV // ==================================
document.getElementById("هەناردەکردن-csv").addEventListener("کلیک" بکە، () => { // بزانە شتێک هەیە بۆ هەناردەکردن ئەگەر (!درێژی چوارچێوە) { console.warn("هیچ تۆمارێک بەردەست نییە بۆ هەناردەکردن."); گەڕانەوە؛ }
// دروستکردنی ڕیزی سەردێڕی CSV (ستوونەکان بۆ مۆری کات، هەموو دوگمەکان، هەموو میحوەرەکان) const سەردێڕ دوگمەکان = چوارچێوە [0]. دوگمەکان.نەخشە ((_، من) => btn $ {من}); const headerAxes = چوارچێوە [0]. axes.map ((_، من) => میحوەر $ {من}); const سەردێڕ = ["t"، ...دوگمەی سەردێڕ، ...میحوەرەکانی سەردێڕ].join(",") + "\n";
// دروستکردنی ڕیزەکانی داتا CSV const ڕیزەکان = چوارچێوە.نەخشە(f => { const btnVals = f.دوگمەکان.نەخشە (b => b.بەها); گەڕانەوە [f.t، ...btnVals، ...f.axes].join (","); }).join("\n");
// بە شێوەی CSV دابەزێنە downloadFile("gamepad-log.csv"، سەردێڕ + ڕیزەکان، "دەق/csv"); });
CSV بۆ شیکاری داتا زۆر نایاب و سەرنجڕاکێشە چونکە ڕاستەوخۆ لە Excel یان Google Sheets دەکرێتەوە، ڕێگەت پێدەدات هێڵکاری دروست بکەیت، داتا فلتەر بکەیت، یان نەخشەکان بە شێوەیەکی بینراو ببینیت. ئێستا کە دوگمەکانی هەناردەکردن لەناودایە، دوو بژاردەی نوێ لە پانێڵەکەدا دەبینیت: Export JSON و Export CSV. JSON خۆشە ئەگەر بتەوێت لۆگی خاو فڕێ بدەیتەوە ناو ئامرازەکانی dev ـەکەت یان بە دەوری پێکهاتەکەدا چەقۆ لێبدەیت. لە بەرامبەردا CSV ڕاستەوخۆ دەکرێتەوە بۆ ناو Excel یان Google Sheets بۆ ئەوەی بتوانیت ئینپوتەکان هێڵکاری بکەیت، فلتەر بکەیت، یان بەراورد بکەیت. ئەم وێنەیەی خوارەوە نیشان دەدات کە پانێڵەکە بەو کۆنتڕۆڵە زیادانە چۆنە.
3. سیستەمی وێنەگرتنی خێرا هەندێک جار پێویستت بە تۆمارێکی تەواو نییە، تەنها “وێنەیەکی شاشە”ی خێرا لە دۆخی هاتنەژوورەوە. لێرەدایە کە دوگمەی Take Snapshot یارمەتیدەرە.
وە جاڤاسکڕێپت:
// ================================== // وێنەیەکی خێرا بگرە // ==================================
document.getElementById("وێنەی خێرا").addEventListener("کلیک" بکە، () => { // هەموو گەیمپادەکانی پەیوەستکراو بەدەست بهێنە const pads = navigator.getGamepads (); const چالاکپادەکان = [];
// لوپ لە ڕێگەی هەر گەیمپادێکی بەستراوەوە و گرتنی دۆخی هەر گەیمپادێکی بەستراو بۆ (const gp ی پادەکان) { ئەگەر (!gp) بەردەوام بێت؛ // شوێنی بەتاڵ بەجێبهێڵە
activePads.push ({ id: gp.id, // ناوی کۆنتڕۆڵکەر/مۆدێل مۆری کات: performance.now(), دوگمەکان: gp.buttons.map(b => ({ فشار خراوەتە سەر: ب.فشار کراوە، بەها: ب.بەها }))، میحوەرەکان: [...gp.axes] }); }
// بزانە کە ئایا هیچ گەیمپادێک دۆزرایەوە ئەگەر (!activePads.length) { console.warn("هیچ گەیمپادێک بۆ وێنەگرتنی خێرا بەستراوەتەوە."); alert("هیچ کۆنتڕۆڵکەرێک دەستنیشان نەکراوە!"); گەڕانەوە؛ }
// لۆگ بکە و بەکارهێنەر ئاگادار بکەرەوە console.log("وێنەی خێرا:", activePads); alert(وێنەیەکی خێرا گیراوە! گیراوە ${activePads.length} کۆنترۆڵکەر(ەکان).); });
وێنە خێراکان لە ساتێکدا لە کاتێکدا دۆخی وردی کۆنترۆڵکەرەکەت بەستوو دەکات. 4. دووبارەکردنەوەی Ghost Input ئێستا بۆ ئەوی خۆش: دووبارەکردنەوەی هاتنە ژوورەوەی جنۆکە. ئەمەش لۆگێک وەردەگرێت و بە شێوەیەکی بینراو دەیژەنێت وەک ئەوەی یاریزانێکی فانتۆم کۆنترۆڵکەرەکەی بەکاربهێنێت.
جاڤاسکڕێپت بۆ دووبارەکردنەوەی: // ================================== // GHOST REPLAY // ==================================
document.getElementById("دوبارە یاریکردنەوە").addEventListener("کلیک", () => { // دڵنیابە کە تۆمارێکمان هەیە بۆ دووبارە لێدانەوە ئەگەر (!درێژی چوارچێوە) { alert("هیچ تۆمارێک نییە بۆ دووبارە لێدانەوە!"); گەڕانەوە؛ }
console.log("دەستپێکردنی دووبارەکردنەوەی جنۆکە...");
// کاتی شوێنپێهەڵگرتن بۆ پەخشکردنی هاوکات با startTime = performance.now (); با frameIndex = 0؛
// دووبارەکردنەوەی لوپی ئەنیمەیشن هەنگاوی فەنکشن() { const ئێستا = performance.now (); const elapsed = ئێستا - کاتی دەستپێکردن؛
// پرۆسێسکردنی هەموو ئەو چوارچێوانەی کە دەبوو تا ئێستا ڕوویان دابێت لە کاتێکدا (frameIndex < frames.length && frames[frameIndex].t <= تێپەڕیوە) { const frame = چوارچێوەکان [frameIndex];
// نوێکردنەوەی UI بە حاڵەتەکانی دوگمەی تۆمارکراو btnA.classList.toggle("چالاک"، چوارچێوە.دوگمەکان [0]. فشارخراوە); btnB.classList.toggle("چالاک"، چوارچێوە.دوگمەکان [1]. فشارخراوە); btnX.classList.toggle("چالاک"، چوارچێوە.دوگمەکان [2]. فشارخراوە);
// پیشاندانی دۆخ نوێ بکەرەوە با فشار بخرێتە سەر = []; چوارچێوە.دوگمەکان.بۆهەریەک ((btn, i) => { ئەگەر (btn.pressed) pressed.push("دوگمە " + i); }); ئەگەر (فشار.درێژی > 0) { status.textContent = "جنۆکە: " + pressed.join (", "); }
frameIndex++؛ }
// Continue loop ئەگەر چوارچێوەی زیاتر هەبێت ئەگەر (frameIndex < چوارچێوە.درێژی) { requestAnimationFrame (هەنگاو); } else { console.log("دوبارە یاریکردنەوە."تەواو بووە."); status.textContent = "دوبارە یاریکردنەوە تەواو بووە"; } }
// دەستپێکردنی دووبارەکردنەوەی یارییەکە هەنگاو (); });
بۆ ئەوەی دیباگکردن کەمێک دەستی زیاتر بێت، دووبارەکردنەوەی جنۆکەم زیاد کرد. کاتێک دانیشتنێکت تۆمار کرد، دەتوانیت دووبارە یاریکردن لێبدەیت و سەیری UI بکەیت کە دەیگێڕێتەوە، نزیکە وەک ئەوەی یاریزانێکی فانتۆم پادەکە بەڕێوەببات. دوگمەی نوێی Replay Ghost لە پانێڵەکەدا بۆ ئەمە دەردەکەوێت.
Record بکە، کەمێک لەگەڵ کۆنترۆڵکەرەکەدا تێکەڵ بە، بوەستە، پاشان دووبارە یاری بکەرەوە. UI تەنها دەنگدانەوەی هەموو ئەو کارانە دەداتەوە کە کردووتە، وەک جنۆکەیەک کە شوێن ئینپوتەکانت دەکەوێت. بۆچی بەم شتە زیادانە بێزار بیت؟
تۆمارکردن/هەناردەکردن ئاسانکاری دەکات بۆ تاقیکەرەوەکان کە بە تەواوی نیشان بدەن کە چی ڕوویداوە. وێنە خێراکان ساتێک لە کاتدا بەستوو دەبن، زۆر بەسوودە کاتێک بەدوای هەڵە نامۆکاندا دەگەڕێیت. دووبارەکردنەوەی جنۆکە زۆر باشە بۆ فێرکارییەکان، پشکنینی دەستڕاگەیشتن، یان تەنها بەراوردکردنی ڕێکخستنەکانی کۆنترۆڵ شان بە شانی یەکتر.
لەم خاڵەدا، ئیتر تەنها دیمۆیەکی ڕێک و پێک نییە، بەڵکو شتێکە کە لە ڕاستیدا دەتوانیت بیخەیتە بواری جێبەجێکردنەوە. کەیسەکانی بەکارهێنانی جیهانی ڕاستەقینە ئێستا ئەم دیباگەرەمان دەستکەوتووە کە دەتوانێت زۆر شت بکات. ئینپوتێکی ڕاستەوخۆ پیشان دەدات، لۆگەکان تۆمار دەکات، هەناردەیان دەکات و تەنانەت شتەکان دووبارە دەکاتەوە. بەڵام پرسیاری ڕاستەقینە ئەوەیە: لە ڕاستیدا کێ گرنگی پێدەدات؟ ئەمە بۆ کێ بەسوودە؟ گەشەپێدەرانی یاری کۆنتڕۆڵکەرەکان بەشێکن لە کارەکە، بەڵام هەڵەکردنیان؟ بەزۆری ئازارێکە. بیهێنە بەرچاوت کە تۆ کۆمبۆی یاری شەڕکردن تاقی دەکەیتەوە، وەک ↓ → + punch. لەبری نوێژکردن دووجار بەهەمان شێوە فشارت خستۆتە سەری، جارێک تۆماری دەکەیت و دووبارە دەیژەنیتەوە. تەواو بوو. یان تۆ لۆگەکانی JSON لەگەڵ هاوڕێیەکی تیمەکەت دەگۆڕیتەوە بۆ ئەوەی بزانیت ئایا کۆدی فرە یاریزانەکەت هەمان کاردانەوەی هەیە لەسەر ئامێرەکەیان. ئەوە گەورەیە. پزیشکانی دەستڕاگەیشتن ئەم یەکەیان لە دڵمەوە نزیکە. هەموو کەسێک یاری بە کۆنترۆڵکەرێکی “ستاندارد” ناکات. کۆنتڕۆڵکەرە گونجاوەکان هەندێک جار سیگناڵی سەیر فڕێ دەدەنە دەرەوە. بەم ئامرازە، دەتوانیت بە تەواوی بزانیت چی ڕوودەدات. مامۆستایان، توێژەران، هەرکەسێک. دەتوانن لۆگەکان بگرن، بەراوردیان بکەن، یان ئینپوتەکان شان بە شانی یەکتر یاری بکەنەوە. لەناکاو شتە نەبینراوەکان ئاشکرا دەبن. تاقیکردنەوەی دڵنیایی کوالیتی بەزۆری تاقیکەرەوەکان تێبینی وەک "من لێرە دوگمەکانم ورد کرد و شکا" دەنووسن. زۆر یارمەتیدەر نییە. ئێستا؟ دەتوانن پەستانە وردەکان بگرن و لۆگەکە هەناردە بکەن و بینێرن. هیچ پێشبینییەک نییە. پەروەردەکاران ئەگەر فێرکاری یان ڤیدی یوتیوب دروست دەکەیت، دووبارەکردنەوەی جنۆکە زێڕە. دەتوانیت بە شێوەیەکی ڕستەیی بڵێیت، “ئەوە ئەوەیە کە من لەگەڵ کۆنترۆڵکەرەکەدا کردوومە”، لە کاتێکدا UI نیشان دەدات کە ڕوودەدات. ڕوونکردنەوەکان زۆر ڕوونتر دەکاتەوە. لە دەرەوەی یارییەکان و بەڵێ، ئەمە تەنها پەیوەندی بە یارییەکانەوە نییە. خەڵک کۆنترۆڵکەریان بۆ ڕۆبۆت و پڕۆژەی هونەری و ڕووکارەکانی دەستگەیشتن بەکارهێناوە. هەموو جارێک هەمان کێشە: لە ڕاستیدا وێبگەڕەکە چی دەبینێت؟ بەم قسەیە، پێویست ناکات پێشبینی بکەیت. دەرەنجام چاککردنی ئینپوتێکی کۆنترۆڵکەر هەمیشە هەستت کردووە وەک فڕینی کوێر. بە پێچەوانەی DOM یان CSS، هیچ پشکنەرێکی ناوەکی بۆ گەیمپادەکان نییە؛ تەنها ژمارە خامەکانە لە کۆنسۆڵەکەدا، بە ئاسانی لە ژاوەژاوەکەدا لەدەست دەچن. بە چەند سەد دێڕێک لە HTML و CSS و JavaScript شتێکی جیاوازمان دروست کرد:
دیباگەرێکی بینراو کە ئینپوتەکانی نەبینراو دەکاتە دیار. سیستەمێکی CSS چیندار کە UI بە پاکی و چاککردنەوە دەهێڵێتەوە. کۆمەڵێک پێشکەوتن (تۆمارکردن، هەناردەکردن، وێنەی خێرا، دووبارەکردنەوەی جنۆکە) کە لە دیمۆوە بەرزی دەکەنەوە بۆ ئامرازی گەشەپێدەر.
ئەم پڕۆژەیە نیشان دەدات کە دەتوانیت چەندە دوور بکەویتەوە بە تێکەڵکردنی هێزی پلاتفۆرمی وێب لەگەڵ کەمێک داهێنان لە چینەکانی CSS Cascade. ئەو ئامرازەی کە تازە بە تەواوی ڕوونم کردەوە سەرچاوە کراوە. دەتوانیت ڕیپۆی GitHub کلۆن بکەیت و بۆ خۆت تاقی بکەیتەوە. بەڵام لەوەش گرنگتر دەتوانیت بیکەیتە خۆت. چینەکانی خۆت زیاد بکە. لۆژیکی دووبارەکردنەوەی خۆت دروست بکە. لەگەڵ پرۆتۆتایپی یارییەکەتدا یەکبخە. یان تەنانەت بە شێوەیەک بەکاری بهێنم کە من خەیاڵم نەکردووە. بۆ فێرکردن، دەستڕاگەیشتن، یان شیکاری داتا. لە کۆتاییدا، ئەمە تەنها پەیوەندی بە چاککردنەوەی گەیمپادەکانەوە نییە. پەیوەندی بە درەوشاندنەوەی ڕووناکییەکەوە هەیە لەسەر زانیارییە شاراوەکان، و پێدانی متمانە بە گەشەپێدەران بۆ کارکردن لەگەڵ ڕەقەکاڵا کە وێب هێشتا بە تەواوی لە باوەشی نەگرتووە. بۆیە، کۆنترۆڵکەرەکەت بکەرەوە، دەستکاریکەرەکەت بکەرەوە و دەست بکە بە تاقیکردنەوە. لەوانەیە سەرت سوڕمێ لەوەی کە وێبگەڕەکەت و CSS ـەکەت بەڕاستی دەتوانن چی بەدەست بهێنن.
