كونتروللىغۇچنى چاتسىڭىز ، كۇنۇپكىلارنى ماش قىلىسىز ، تاياقلارنى يۆتكەيسىز ، قوزغاتقۇچنى تارتىسىز… ۋە پروگرامما ئاچقۇچى بولۇش سۈپىتىڭىز بىلەن ئۇنىڭ ھېچقايسىسىنى كۆرمەيسىز. توركۆرگۈچ ئۇنى ئېلىۋاتىدۇ ، جەزملەشتۈرۈڭ ، ئەمما كونترول سۇپىسىغا نومۇر كىرگۈزمىسىڭىز ، ئۇ كۆرۈنمەيدۇ. بۇ Gamepad API بىلەن باش ئاغرىقى. بۇ بىر نەچچە يىل بولدى ، ئەمەلىيەتتە ئۇ ناھايىتى كۈچلۈك. كۇنۇپكىلار ، تاياق ، قوزغاتقۇچ ، ئەسەرلەرنى ئوقۇيالايسىز. ئەمما كۆپىنچە كىشىلەر ئۇنىڭغا تەگمەيدۇ. نېمىشقا؟ چۈنكى ھېچقانداق ئىنكاس يوق. ئاچقۇچىلار قورالىدا گۇرۇپپا يوق. كونتروللىغۇچنىڭ ھەتتا سىز ئويلىغاننى قىلىۋاتقان-قىلمىغانلىقىنى بىلىشنىڭ ئېنىق ئۇسۇلى يوق. ئۇ قارىغۇلارچە ئۇچۇۋاتقاندەك ھېس قىلىدۇ. بۇ ماڭا ئازراق قورال ياساشقا يېتەرلىك خاتالىق تۇغدۇردى: Gamepad Cascade Debugger. كونترول سۇپىسىنىڭ چىقىشىغا قاراشنىڭ ئورنىغا ، كونتروللىغۇچنىڭ نەق مەيدان ، ئۆز-ئارا تەسىر كۆرسىتىشىنى كۆرىسىز. مەلۇم نەرسىنى بېسىڭ ، ئۇ ئېكراندا ئىنكاس قايتۇرىدۇ. 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 base, active, debug;
@layer base { / * ... * / }
@layer active { / * ... * / }
@layer debug { / * ... * / }
ھەر بىر قەۋەت ئالدىن پەرەز قىلىنغانلىقتىن ، سىز قايسى قائىدىلەرنىڭ غەلىبە قىلىدىغانلىقىنى ھەمىشە بىلىسىز. بۇ ئالدىن پەرەز قىلىش مەسىلىنى ھەل قىلىشنى ئاسانلاشتۇرۇپلا قالماستىن ، بەلكى ئەمەلىيەتتە باشقۇرغىلى بولىدۇ. بىز مەسىلىنى (كۆرۈنمەيدىغان ، قالايمىقان كىرگۈزۈش) ۋە ئۇسۇلنى (كاسكاد قەۋىتى بىلەن ياسالغان كۆرۈنمە يۈز ھەل قىلغۇچ) قاپلىدۇق. ھازىر بىز ھەل قىلغۇچنى ياساش ئۈچۈن باسقۇچلۇق باسقۇچنى بېسىپ ئۆتىمىز. Debugger ئۇقۇم يوشۇرۇن كىرگۈزۈشنى كۆرۈنۈشنىڭ ئەڭ ئاسان ئۇسۇلى ئۇنى ئېكرانغا سىزىش. بۇ ھەل قىلغۇچنىڭ قىلىدىغان ئىشى. كۇنۇپكىلار ، قوزغاتقۇچلار ۋە خۇشاللىقلارنىڭ ھەممىسى بىر كۆرۈنۈشكە ئېرىشىدۇ.
A كۇنۇپكىسىنى بېسىڭ. تاياقنى يېپىش: چەمبىرەك ئەتراپقا سىيرىلىدۇ. يېرىم يولدا قوزغاتقۇچنى تارتىڭ: بىر بالداق يېرىم يولنى تولدۇرىدۇ.
ھازىر سىز 0 ۋە 1s گە قارىمايسىز ، ئەمما كونتروللىغۇچنىڭ نەق مەيدان ئىنكاسىنى كۆرۈۋاتىسىز. ئەلۋەتتە ، سىز سۈكۈتتىكى ، بېسىلغان ، خاتالىق ئۇچۇرى ئۇچۇرلىرى ، ھەتتا خاتىرىلەش ھالىتى قاتارلىق دۆلەتلەردە سىناق قىلىشنى باشلىسىڭىز ، CSS بارغانسىرى چوڭىيىشقا باشلايدۇ. بۇ يەردە كاسات قەۋىتى ئەسقاتىدۇ. بۇ يەردە چىقىرىۋېتىلگەن مىسال: @layer base { .button { تەگلىك: # 222; چېگرا رادىئوسى:% 50; كەڭلىكى: 40px; ئېگىزلىكى: 40px; } }
@layer active { .button.pressed { تەگلىك: # 0f0; / * ئوچۇق يېشىل * / } }
@layer debug { .button :: after { مەزمۇن: attr (data-value); font-size: 12px; color: #fff; } }
قەۋەت تەرتىپى مۇھىم: base → active → debug.
base كونتروللىغۇچنى سىزىدۇ. بېسىلغان ھالەتلەرنى ئاكتىپ بىر تەرەپ قىلىدۇ. debug تاشلاش.
ئۇنى بۇنداق پارچىلاش سىزنىڭ غەلىتە ئالاھىدە ئۇرۇشلارغا قارشى تۇرمايدىغانلىقىڭىزنى بىلدۈرىدۇ. ھەر بىر قەۋەتنىڭ ئورنى بار ، نېمىنىڭ غەلىبە قىلىدىغانلىقىنى ھەمىشە بىلىسىز. ئۇنى قۇرۇش ئالدى بىلەن ئېكرانغا بىر نەرسە ئالايلى. ئۇ ياخشى كۆرۈنۈشنىڭ ھاجىتى يوق - پەقەت مەۋجۇت بولۇشى كېرەك ، شۇڭا بىزنىڭ ئىشلەيدىغان ئىشىمىز بار.
Gamepad Cascade Debugger
بۇ ھەقىقىي مەنىدىكى قۇتىلار. تېخى كىشىنى ھاياجانلاندۇرمايدۇ ، ئەمما ئۇ CSS ۋە JavaScript ئارقىلىق كېيىن تۇتۇشقا تۇتقۇچ بېرىدۇ. بولىدۇ ، مەن بۇ يەردە كاسات قەۋىتىنى ئىشلىتىۋاتىمەن ، چۈنكى ئۇ تېخىمۇ كۆپ شىتات قوشقاندىن كېيىن نەرسىلەرنى رەتلەيدۇ. بۇ يەردە قوپال پاس:
/ * ======================================= CASCADE LAYERS SETUP زاكاز ئىشلىرى: base → active → debug ======================================= * /
/ * ئالدى قەۋەت تەرتىپىنى ئېنىقلاڭ * / @layer base, active, debug;
/ * 1-قەۋەت: ئاساسى ئۇسلۇب - سۈكۈتتىكى كۆرۈنۈش * / @layer base { .button { تەگلىك: # 333; چېگرا رادىئوسى:% 50; كەڭلىكى: 70px; ئېگىزلىكى: 70px; display: flex; justify-content: center; align-items: center; }
.pause { كەڭلىكى: 20px; ئېگىزلىكى: 70px; تەگلىك: # 333; display: inline-block; } }
/ * 2-قەۋەت: ئاكتىپ ھالەت - بېسىلغان كۇنۇپكىلارنى بىر تەرەپ قىلىدۇ * / @layer active { .button.active { تەگلىك: # 0f0; / * باسقاندا ئوچۇق يېشىل * / ئۆزگەرتىش: كۆلەم (1.1); / * كۇنۇپكىنى سەل چوڭايتىدۇ * / }
.pause.active { تەگلىك: # 0f0; transform: scaleY (1.1); / * بېسىلغاندا تىك سوزۇلغان * / } }
/ * 3-قەۋەت: خاتالىق ھەل قىلىش - ئاچقۇچىلار ئۇچۇرى * / @layer debug { .button :: after { مەزمۇن: attr (data-value); / * سانلىق قىممەتنى كۆرسىتىدۇ * / font-size: 12px; color: #fff; } }
بۇ خىل ئۇسۇلنىڭ گۈزەللىكى ھەر بىر قەۋەتنىڭ ئېنىق مەقسىتى بار. ئاساسى قاتلام ھەرگىزمۇ ئاكتىپلىقنى بېسىپ ئۆتەلمەيدۇ ، كونكرېت بولۇشىدىن قەتئىينەزەر ، ئاكتىپلىق ھەرگىزمۇ خاتالىقنى بېسىپ ئۆتەلمەيدۇ. بۇ ئادەتتە ھەل قىلىش قوراللىرىنى قىينايدىغان CSS خاسلىق جېڭىنى يوقىتىدۇ. ھازىر قارىماققا بەزى گۇرۇپپىلار قاراڭغۇ تەگلىكتە ئولتۇرغاندەك قىلىدۇ. راستىنى ئېيتقاندا ، بەك ناچار ئەمەس.
JavaScript نى قوشۇش JavaScript ۋاقتى. كونتروللىغۇچ ئەمەلىيەتتە بىر ئىش قىلىدۇ. بىز بۇ باسقۇچنى قەدەممۇ-قەدەم بەرپا قىلىمىز. 1-قەدەم: دۆلەت باشقۇرۇشنى تەڭشەش بىرىنچىدىن ، بىز ھەل قىلغۇچىنىڭ ھالىتىنى ئىز قوغلاش ئۈچۈن ئۆزگەرگۈچى مىقدارغا موھتاج: // ======================================= // دۆلەت باشقۇرۇش // =======================================
let run = false; // ھەل قىلغۇچنىڭ ئاكتىپ ياكى ئەمەسلىكىنى ئىزلايدۇ let rafId; // ئەمەلدىن قالدۇرۇش ئىلتىماسى AnimationFrame ID نى ساقلايدۇ
بۇ ئۆزگەرگۈچى مىقدارلار ئويۇن ئويۇنى كىرگۈزۈشنى داۋاملىق ئوقۇيدىغان كارتون ھالقىسىنى كونترول قىلىدۇ. 2-قەدەم: DOM پايدىلىنىشىنى تۇتۇڭ كېيىنكى قەدەمدە ، بىز يېڭىلايدىغان بارلىق HTML ئېلېمېنتلىرىغا پايدىلىنىمىز: // ======================================= // DOM ELEMENT REFERENCES // =======================================
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-قەدەم: كۇنۇپكا تاختىسىنىڭ كەينىگە قايتىش فىزىكىلىق كونتروللىغۇچسىز سىناق قىلىش ئۈچۈن ، كۇنۇپكا تاختىسىنىڭ كۇنۇپكا تاختىسىنى خەرىتە قىلىمىز: // ======================================= // KEYBOARD FALLBACK (كونتروللىغۇچسىز سىناق ئۈچۈن) // =======================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' كۇنۇپكىسى ھەر ئىككى ۋاقىتلىق بالداقنى كونترول قىلىدۇ };
بۇ ئارقىلىق كۇنۇپكا تاختىسىدىكى كۇنۇپكىلارنى بېسىپ UI نى سىناق قىلالايمىز. 4-قەدەم: ئاساسلىق يېڭىلاش ھالقىسى قۇرۇش بۇ يەردە سېھىرگەرلىك يۈز بېرىدۇ. بۇ ئىقتىدار ئۇدا ئىجرا بولىدۇ ۋە ئويۇن ئويۇنى ھالىتىنى ئوقۇيدۇ: // ======================================= // MAIN GAMEPAD UPDATE LOOP // =======================================
function updateGamepad () { // بارلىق ئۇلانغان ئويۇنچۇقلارنى ئېلىڭ const gamepads = navigator.getGamepads (); if (! gamepads) قايتىپ كەلسە;
// تۇنجى ئۇلانغان ئويۇن تاختىسىنى ئىشلىتىڭ const gp = gamepads [0];
if (gp) { // «ئاكتىپ» سىنىپىنى ئالماشتۇرۇش ئارقىلىق يېڭىلاش كۇنۇپكىسى بايان قىلىنىدۇ 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 ("ئاكتىپ", pausePressed); pause2.classList.toggle ("ئاكتىپ", pausePressed);
// ھالەت كۆرسىتىش ئۈچۈن ھازىر بېسىلغان كۇنۇپكىلارنىڭ تىزىملىكىنى تۈزۈڭ pressed = []; gp.buttons.forEach ((btn, i) => { if (btn.pressed)pressed.push ("Button" + i); });
// ئەگەر كۇنۇپكىلار بېسىلسا ھالەت تېكىستىنى يېڭىلاڭ if (pressed.length> 0) { status.textContent = "بېسىلدى:" + pressed.join (","); } }
// ئەگەر debugger ئىجرا بولۇۋاتقان بولسا ، يوچۇقنى داۋاملاشتۇرۇڭ if (running) { rafId = requestAnimationFrame (updateGamepad); } }
ClassList.toggle () ئۇسۇلى بىزنىڭ CSS قەۋەت ئۇسلۇبىمىزنى قوزغىتىدىغان كۇنۇپكىنى بېسىش ياكى باسمىغانلىقىغا ئاساسەن ئاكتىپ سىنىپنى قوشىدۇ ياكى چىقىرىۋېتىدۇ. 5-قەدەم: كۇنۇپكا تاختىسىدىكى ۋەقەلەرنى بىر تەرەپ قىلىڭ بۇ پائالىيەتنى ئاڭلىغۇچىلار كۇنۇپكا تاختىسىنى قايتۇرۇش خىزمىتىنى ئىشلەيدۇ: // ======================================= // KEYBOARD EVENT HANDLERS // =======================================
document.addEventListener ("keydown", (e) => { if (keyMap [e.key]) { // يەككە ياكى كۆپ ئېلېمېنتلارنى بىر تەرەپ قىلىڭ if (Array.isArray (keyMap [e.key])) { keyMap [e.key] .forEach (el => el.classList.add ("ئاكتىپ")); } else { keyMap [e.key] .classList.add ("ئاكتىپ"); } status.textContent = "كۇنۇپكا بېسىلدى:" + e.key.toUpperCase (); } });
document.addEventListener ("keyup", (e) => { if (keyMap [e.key]) { // ئاچقۇچ ئېلان قىلىنغاندا ئاكتىپ ھالەتنى ئېلىۋېتىڭ if (Array.isArray (keyMap [e.key])) { keyMap [e.key] .forEach (el => el.classList.remove ("ئاكتىپ")); } else { keyMap [e.key] .classList.remove ("ئاكتىپ"); } status.textContent = "ئاچقۇچ ئېلان قىلىندى:" + e.key.toUpperCase (); } });
6-قەدەم: باشلاش / توختىتىشنى كونترول قىلىش ئاخىرىدا ، بىز ھەل قىلغۇچنى قوزغىتىش ۋە تاقاشنىڭ بىر ئۇسۇلىغا موھتاج: // ======================================= // TOGGLE DEBUGGER ON / OFF // =======================================
document.getElementById ("toggle"). addEventListener ("چېكىڭ", () => { run =! running; // ئىجرا ھالىتىنى توغرىلاڭ
if (running) { status.textContent = "ھەل قىلغۇچ ئىجرا بولۇۋاتىدۇ ..."; updateGamepad (); // يېڭىلاش ھالقىسىنى قوزغىتىڭ } else { status.textContent = "ھەل قىلغۇچ ئاكتىپسىز"; CancAnimationFrame (rafId); // ئايلىنىشنى توختىتىڭ } });
شۇنداق ، بىر كۇنۇپكىنى بېسىڭ ، ئۇ پارقىرايدۇ. تاياقنى ئىتتىرىڭ ، ئۇ ھەرىكەتلىنىدۇ. بولدى. يەنە بىر نەرسە: خام قىممەت. بەزىدە سىز پەقەت چىراغنى ئەمەس ، بەلكى ساننى كۆرگۈڭىز كېلىدۇ.
بۇ باسقۇچتا سىز كۆرۈشىڭىز كېرەك:
ئېكراندىكى ئاددىي كونتروللىغۇچ ، ئۇلار بىلەن ئالاقە قىلغاندا ئىنكاس قايتۇرىدىغان كۇنۇپكىلار ، ۋە بېسىلغان كۇنۇپكا كۆرسەتكۈچلىرىنى كۆرسىتىدىغان ئىختىيارى تاللاش ئوقۇشلۇقى.
بۇنى تېخىمۇ ئابستراكت قىلىش ئۈچۈن ، ئېكران كونتروللىغۇچنىڭ دەل ۋاقتىدا ئىنكاس قايتۇرىدىغان تېز نامايەندىسى:
ھازىر ، «خاتىرىلەشنى باشلاش» نى باسسىڭىز ، خاتىرىلەشنى توختىتىڭ. 2. CSV / JSON غا سانلىق مەلۇمات چىقىرىش خاتىرىگە ئىگە بولغاندىن كېيىن ، ئۇنى ساقلىماقچىمىز.
1-قەدەم: چۈشۈرۈش ياردەمچىسى قۇرۇش ئالدى بىلەن ، توركۆرگۈدە ھۆججەت چۈشۈرۈشنى بىر تەرەپ قىلىدىغان ياردەمچى ئىقتىدارغا موھتاج: // ======================================= // FILE DOWNLOAD HELPER // =======================================
function downloadFile (ھۆججەت ئىسمى ، مەزمۇنى ، تىپى = "تېكىست / تۈز") { // مەزمۇندىن بىر بۆلەك ھاسىل قىلىڭ const blob = يېڭى Blob ([مەزمۇن] ، {تىپ}); 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 ھاسىل قىلىش ۋە پروگراممىلىق ھالدا چۈشۈرۈش ئۇلانمىسىنى چېكىش ئارقىلىق ئىشلەيدۇ. تازىلاش بىزنىڭ ئەستە تۇتۇش قابىلىيىتىمىزنى ئاشكارىلىماسلىقىمىزغا كاپالەتلىك قىلىدۇ. ئىككىنچى قەدەم: JSON ئېكىسپورتىنى بىر تەرەپ قىلىڭ JSON مۇكەممەل سانلىق مەلۇمات قۇرۇلمىسىنى ساقلاشقا ماس كېلىدۇ:
// ======================================= // ئېكسپورت JSON // =======================================
document.getElementById ("export-json"). addEventListener ("چېكىڭ", () => { // ئېكسپورت قىلىدىغان نەرسە بار-يوقلۇقىنى تەكشۈرۈڭ if (! frames.length) { console.warn ("ئېكسپورت قىلىشقا بولىدىغان خاتىرە يوق."); قايتىش }
// مېتا سانلىق مەلۇمات ۋە رامكا ئارقىلىق يۈك يۈكى ھاسىل قىلىڭ const payload = { createdAt: يېڭى چېسلا (). toISOString (), رامكا };
// فورماتلانغان JSON قىلىپ چۈشۈرۈڭ downloadFile ( "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 ماۋزۇ قۇر قۇر (ۋاقىت تامغىسى ، بارلىق كۇنۇپكىلار ، بارلىق ئوقلار). const headerButtons = frames [0] .buttons.map ((_, i) => btn $ {i}); const headerAxes = رامكا [0] .axes.map ((_, i) => ئوق $ {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 (","); }). join ("\ n");
// CSV قىلىپ چۈشۈرۈڭ downloadFile ("gamepad-log.csv" ، ماۋزۇ + قۇر ، "text / csv"); });
CSV سانلىق مەلۇمات ئانالىزى ئۈچۈن ناھايىتى قالتىس ، چۈنكى ئۇ Excel ياكى Google جەدۋىلىدە بىۋاسىتە ئېچىلىدۇ ، بۇ ئارقىلىق دىئاگرامما ، سۈزگۈچ سانلىق مەلۇمات ياكى نەق مەيدان ئەندىزىسىنى ھاسىل قىلالايسىز. ھازىر ئېكسپورت كۇنۇپكىسى قويۇلغاندىن كېيىن ، تاختايدا JSON نى چىقىرىش ۋە CSV نى چىقىرىشتىن ئىبارەت ئىككى خىل يېڭى تاللاشنى كۆرىسىز. ئەگەر خام ئەشيانى قايتا قورال قوراللىرىڭىزغا تاشلىماقچى ياكى قۇرۇلمىنى چۆرىدىمەكچى بولسىڭىز JSON ياخشى. CSV بولسا Excel ياكى Google Sheets غا بىۋاسىتە ئېچىلىدۇ ، بۇنداق بولغاندا سىز كىرگۈزگەن جەدۋەلنى سۈزەلەيسىز ، سۈزەلەيسىز ياكى سېلىشتۇرالايسىز. تۆۋەندىكى رەسىمدە بۇ قوشۇمچە كونتروللار بىلەن تاختىنىڭ قانداق بولىدىغانلىقى كۆرسىتىلدى.
3. Snapshot سىستېمىسى بەزىدە سىز تولۇق خاتىرىلەشكە ئېھتىياجلىق ئەمەس ، پەقەت كىرگۈزۈش ھالىتىنىڭ تېز «ئېكران رەسىمى». بۇ يەردە Snapshot ئېلىش كۇنۇپكىسى ياردەم بېرىدۇ.
JavaScript:
// ======================================= // SNAPSHOT نى ئېلىڭ // =======================================
document.getElementById ("snapshot"). addEventListener ("چېكىڭ", () => { // بارلىق ئۇلانغان ئويۇنچۇقلارنى ئېلىڭ const pads = navigator.getGamepads (); const activePads = [];
// ھالقىپ ھەر بىر ئۇلانغان ئويۇن تاختىسىنىڭ ھالىتىنى تۇتۇڭ for (const gp of pad) { if (! gp) continue; // قۇرۇق ئورۇندىن ئاتلاڭ
activePads.push ({ id: gp.id, // كونتروللىغۇچنىڭ ئىسمى / مودېلى timestamp: performance.now (), كۇنۇپكىلار: gp.buttons.map (b => ({ بېسىلدى: b.pressed, value: b.value })), axes: [... gp.axes] }); }
// ئويۇن ئويۇنىنىڭ بار-يوقلۇقىنى تەكشۈرۈڭ if (! activePads.length) { console.warn ("رەسىمگە تارتىش ئۈچۈن ئۇلانغان ئويۇنچۇق يوق."); ئاگاھلاندۇرۇش ("كونتروللىغۇچ بايقالمىدى!"); قايتىش }
// تىزىملىتىپ ئىشلەتكۈچىگە خەۋەر قىلىڭ console.log ("Snapshot:", activePads); ئاگاھلاندۇرۇش (تارتىلغان سۈرەت تارتىلدى! تۇتۇلدى $ {activePads.length} كونتروللىغۇچ (لار).); });
Snapshots كونتروللىغۇچنىڭ ئېنىق ھالىتىنى بىرلا ۋاقىتتا توڭلىتىدۇ. 4. Ghost Input Replay ھازىر قىزىقارلىق يېرى: ئەرۋاھ كىرگۈزۈش قايتا-قايتا. بۇ بىر خاتىرە ئېلىپ ، ئۇنى خۇددى فانتازىيىلىك قويغۇچ كونتروللىغۇچنى ئىشلىتىۋاتقاندەك قايتا ئوينايدۇ.
تەكرارلاش ئۈچۈن JavaScript: // ======================================= // GHOST REPLAY // =======================================
document.getElementById ("replay"). addEventListener ("چېكىڭ", () => { // قايتا تەكرارلايدىغان خاتىرىمىزنىڭ بولۇشىغا كاپالەتلىك قىلىڭ if (! frames.length) { ئاگاھلاندۇرۇش ("قايتا خاتىرىلەش خاتىرىسى يوق!"); قايتىش }
console.log ("ئەرۋاھلارنى قايتا باشلاش ...");
// ماس قەدەملىك قويۇشنىڭ ۋاقتىنى ئىز قوغلاڭ letTime = performance.now (); let frameIndex = 0;
// كارتون ئايلانمىسىنى تەكرارلاڭ function step () { const now = performance.now (); const elapsed = now - startTime;
// ھازىر يۈز بەرگەن بارلىق رامكىلارنى بىر تەرەپ قىلىڭ
while (frameIndex // خاتىرىلەنگەن كۇنۇپكا ھالىتى بىلەن UI نى يېڭىلاڭ
btnA.classList.toggle ("ئاكتىپ", frame.buttons [0]. بېسىلدى);
btnB.classList.toggle ("ئاكتىپ", frame.buttons [1]. بېسىلدى);
btnX.classList.toggle ("ئاكتىپ", frame.buttons [2]. بېسىلدى); // ھالەت كۆرۈنۈشىنى يېڭىلاش
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 // تەكرارلاشنى باشلاڭ
step ();
}); بىر ئاز قول سېلىپ ھەل قىلىش ئۈچۈن ، مەن ئەرۋاھ تولۇقلاشنى قوشتۇم. بىر يىغىننى خاتىرىلىۋالغاندىن كېيىن ، قايتا-قايتا ئۇرسىڭىز ھەمدە UI نىڭ ھەرىكەت قىلىۋاتقانلىقىنى كۆرەلەيسىز ، خۇددى خىيالپەرەس قويغۇچنى ئىجرا قىلىۋاتقانغا ئوخشاش. بۇنىڭ ئۈچۈن گۇرۇپپىدا يېڭى «Ghost Ghost» كۇنۇپكىسى كۆرۈنىدۇ. خاتىرىنى بېسىڭ ، كونتروللىغۇچ بىلەن ئازراق قالايمىقان قىلىڭ ، توختاڭ ، ئاندىن قايتا قىلىڭ. UI پەقەت سىزنىڭ قىلغانلىرىڭىزنىڭ ھەممىسىگە ئوخشايدۇ ، كىرگۈزگەنلىرىڭىزگە ئەگىشىپ ئەرۋاھقا ئوخشاش.
نېمىشقا بۇ قوشۇمچە ماتېرىياللار بىلەن ئاۋارە بولىسىز؟ خاتىرىلەش / ئېكىسپورت قىلىش سىناق قىلغۇچىلارنىڭ نېمە ئىش بولغانلىقىنى ئېنىق كۆرسىتىپ بېرىدۇ.
Snapshots بىر ئاز ۋاقىت توڭلىتىدۇ ، غەلىتە كەمتۈكلەرنى قوغلاشقاندا ناھايىتى پايدىلىق.
Ghost تەكرارلاش دەرسلىك ، زىيارەت قىلىشچانلىقىنى تەكشۈرۈش ياكى كونترول تەڭشىكىنى بىرمۇبىر سېلىشتۇرۇش ئۈچۈن ناھايىتى ياخشى. بۇ ۋاقىتتا ، ئۇ ئەمدى رەتلىك كۆرسىتىش بولۇپلا قالماستىن ، بەلكى سىز ئەمەلىيەتتە ئىشلىتەلەيدىغان نەرسە.
ھەقىقىي دۇنيا ئىشلىتىش دېلولىرى
ھازىر بىز نۇرغۇن ئىشلارنى قىلالايدىغان بۇ ھەل قىلغۇچقا ئېرىشتۇق. ئۇ بىۋاسىتە كىرگۈزۈشنى كۆرسىتىدۇ ، خاتىرە خاتىرىلەيدۇ ، ئۇلارنى ئېكسپورت قىلىدۇ ، ھەتتا نەرسىلەرنى قايتۇرىدۇ. ئەمما ھەقىقىي مەسىلە: كىمنىڭ كارى؟ بۇ كىم ئۈچۈن پايدىلىق؟
ئويۇن ئاچقۇچىلار
كونتروللىغۇچ خىزمەتنىڭ بىر قىسمى ، ئەمما ئۇلارنى ھەل قىلىشمۇ؟ ئادەتتە ئاغرىق. ئۆزىڭىزنىڭ game → + مۇشتلاشتەك جەڭ ئويۇنلىرىنى سىناق قىلىۋاتقانلىقىڭىزنى تەسەۋۋۇر قىلىپ بېقىڭ. دۇئا قىلىشنىڭ ئورنىغا ، ئۇنى ئىككى قېتىم ئوخشاش باسقان ، بىر قېتىم خاتىرىلىۋالىسىز ۋە قايتا تەكرارلايسىز. تامام. ياكى سىز ھەمراھىڭىز بىلەن JSON خاتىرىسىنى ئالماشتۇرۇپ ، كۆپ كودىڭىزنىڭ كومپيۇتېرىدا ئوخشاش ئىنكاس قايتۇرىدىغانلىقىنى تەكشۈرۈڭ. بۇ ناھايىتى چوڭ.
قولايلىق مەشغۇلات قىلغۇچىلار
بۇ مېنىڭ يۈرىكىمگە يېقىن. ھەممە ئادەم «ئۆلچەملىك» كونتروللىغۇچ بىلەن ئوينىمايدۇ. ماسلىشىشچان كونتروللىغۇچ بەزىدە غەلىتە سىگناللارنى تاشلايدۇ. بۇ قورال ئارقىلىق نېمە ئىشلارنىڭ يۈز بەرگەنلىكىنى ئېنىق كۆرەلەيسىز. ئوقۇتقۇچىلار ، تەتقىقاتچىلار ، كىم. ئۇلار خاتىرىلەرنى تۇتالايدۇ ، سېلىشتۇرالايدۇ ياكى كىرگۈزۈشنى يانمۇ-يان تەكرارلىيالايدۇ. تۇيۇقسىز ، كۆرۈنمەيدىغان نەرسىلەر ئايدىڭلىشىدۇ.
سۈپەت كاپالىتى سىنىقى
سىناق قىلغۇچىلار ئادەتتە «مەن بۇ يەردىكى كۇنۇپكىلارنى ئۇۋۇلىدىم ، ئۇ بۇزۇلدى» دېگەندەك خاتىرىلەرنى يازىدۇ. بەك پايدىسى يوق. ھازىر؟ ئۇلار ئېنىق مەتبۇئاتلارنى تۇتالايدۇ ، خاتىرە ئېكسپورت قىلالايدۇ ۋە ئەۋەتەلەيدۇ. پەرەز يوق.
مائارىپچىلار
ئەگەر دەرسلىك ياكى YouTube ۋىدىئو ياساۋاتقان بولسىڭىز ، ئەرۋاھنىڭ قايتا-قايتا ئالتۇن بولۇشى. UI نىڭ يۈز بېرىۋاتقانلىقىنى كۆرسەتسىڭىز ، سىز «مەن كونتروللىغۇچ بىلەن نېمە قىلدىم» دېسىڭىز بولىدۇ. چۈشەندۈرۈش ئۇسۇلىنى تېخىمۇ ئېنىق قىلىدۇ.
ئويۇندىن باشقا
شۇنداق ، بۇ پەقەت ئويۇنلارلا ئەمەس. كىشىلەر ماشىنا ئادەم ، سەنئەت تۈرلىرى ۋە قولايلىق كۆرۈنۈشلەر ئۈچۈن كونتروللىغۇچ ئىشلەتتى. ھەر قېتىم ئوخشاش مەسىلە: توركۆرگۈچ ئەمەلىيەتتە نېمىلەرنى كۆرۈۋاتىدۇ؟ بۇنىڭ بىلەن پەرەز قىلىشىڭىزنىڭ ھاجىتى يوق.
خۇلاسە
كونتروللىغۇچ كىرگۈزۈشنى ھەل قىلىش ئەزەلدىن قارىغۇلارچە ئۇچقاندەك ھېس قىلىدۇ. DOM ياكى CSS بىلەن ئوخشىمايدىغىنى ، ئويۇن ئويۇنىنىڭ ئىچىگە تەكشۈرگۈچى يوق. ئۇ پەقەت كونترول سۇپىسىدىكى خام سان ، شاۋقۇندا ئاسانلا يوقاپ كېتىدۇ.
HTML ، CSS ۋە JavaScript دىن نەچچە يۈز قۇر بىلەن بىز باشقىچە بىر نەرسە قۇردۇق: كۆرۈنمەيدىغان كىرگۈزگۈچلەرنى كۆرۈنۈپ تۇرىدىغان كۆرۈنۈشلۈك ھەل قىلغۇچ.
UI نى پاكىز ۋە يېيىشلىك ساقلايدىغان قاتلاملىق CSS سىستېمىسى.
ئۇنى كۆرسىتىشتىن پروگرامما ئاچقۇچى قورالىغا كۆتۈرىدىغان بىر يۈرۈش كۈچەيتمە دېتاللار (خاتىرىلەش ، ئېكسپورت قىلىش ، رەسىمگە تارتىش ، ئەرۋاھلارنى قايتا ئىشلىتىش). بۇ تۈر CSS كاسكاد قەۋىتىدىكى تور سۇپىسىنىڭ كۈچىنى ئازراق ئىجادچانلىق بىلەن ئارىلاشتۇرۇپ قانچىلىك يىراققا بارالايدىغانلىقىڭىزنى كۆرسىتىپ بېرىدۇ.
مەن پۈتۈنلەي چۈشەندۈرگەن قورال ئوچۇق كودلۇق. GitHub repo نى كلونلاپ ئۆزىڭىز سىناپ باقسىڭىز بولىدۇ.
لېكىن تېخىمۇ مۇھىمى ، ئۇنى ئۆزىڭىز قىلالايسىز. ئۆزىڭىزنىڭ قەۋىتىنى قوشۇڭ. ئۆزىڭىزنىڭ قايتا-قايتا لوگىكىسىنى بەرپا قىلىڭ. ئۇنى ئويۇن ئۈلگىسى بىلەن بىرلەشتۈرۈڭ. ياكى ئۇنى مەن ئويلاپ باقمىغان ئۇسۇللار بىلەن ئىشلىتىڭ. ئوقۇتۇش ، قولايلىق ياكى سانلىق مەلۇمات ئانالىزى ئۈچۈن.
شۇ كۈنىنىڭ ئاخىرىدا ، بۇ ئويۇن ئويۇنلىرىنى ھەل قىلىشلا ئەمەس. ئۇ يوشۇرۇن كىرگۈزگۈچلەرگە نۇر چېچىش ، ھەمدە ئاچقۇچىلارغا تور يەنىلا تولۇق قوبۇل قىلالمىغان قاتتىق دېتاللار بىلەن ئىشلەش ئىشەنچىسى بېرىش.
شۇڭا كونتروللىغۇچنى چېتىپ ، تەھرىرلىگۈچنى ئېچىڭ ۋە سىناق قىلىشنى باشلاڭ. توركۆرگۈڭىز ۋە CSS نىڭ ھەقىقىي ئەمەلگە ئاشۇرالايدىغانلىقىغا ھەيران قېلىشىڭىز مۇمكىن.
