Geuza Utatuzi

Hayo ni masanduku tu. Bado haifurahishi, lakini inatupa vishikizo vya kunyakua baadaye kwa CSS na JavaScript. Sawa, ninatumia tabaka za kuteleza hapa kwa sababu huweka vitu vimepangwa mara tu unapoongeza majimbo zaidi. Hapa kuna njia mbaya:

/* =================================== WENGIFU WA SAFU ZA KESI Agizo ni muhimu: msingi → amilifu → utatuzi ==================================== */

/* Bainisha mpangilio wa safu mbele */ @safu msingi, hai, rekebisha hitilafu;

/* Safu ya 1: Mitindo ya msingi - mwonekano chaguomsingi */ @safu msingi { .kifungo { usuli: #333; mpaka-radius: 50%; upana: 70px; urefu: 70px; kuonyesha: flex; kuhalalisha-maudhui: kituo; align-vitu: katikati; }

.sitisha { upana: 20px; urefu: 70px; usuli: #333; kuonyesha: inline-block; } }

/* Safu ya 2: Hali inayotumika - hushughulikia vifungo vilivyobonyezwa */ @safu amilifu { .kifungo.kinachofanya kazi { mandharinyuma: #0f0; /* Kijani angavu kinapobonyezwa */ kubadilisha: kiwango (1.1); /* Hukuza kitufe kidogo */ }

.sitisha.fanya kazi { mandharinyuma: #0f0; kubadilisha: scaleY(1.1); /* Hunyoosha wima inapobonyezwa */ } }

/* Safu ya 3: Utatuzi unaowekelea - maelezo ya msanidi programu */ @safu utatuzi { .kifungo::baada ya { maudhui: attr(thamani ya data); /* Inaonyesha thamani ya nambari */ ukubwa wa fonti: 12px; rangi: #fff; } }

Uzuri wa mbinu hii ni kwamba kila safu ina kusudi wazi. Safu ya msingi haiwezi kamwe kubatilisha amilifu, na inayotumika haiwezi kamwe kubatilisha utatuzi, bila kujali umaalum. Hii huondoa vita maalum vya CSS ambavyo kawaida hukumba zana za utatuzi. Sasa inaonekana kama vikundi vingine vimekaa kwenye mandharinyuma meusi. Kwa uaminifu, sio mbaya sana.

Kuongeza JavaScript Muda wa JavaScript. Hapa ndipo mtawala hufanya kitu. Tutaunda hatua hii kwa hatua. Hatua ya 1: Sanidi Usimamizi wa Jimbo Kwanza, tunahitaji vigezo ili kufuatilia hali ya kitatuzi: // ==================================== // USIMAMIZI WA SERIKALI // ====================================

acha kukimbia = uongo; // Hufuatilia kama kitatuzi kinatumika wacha rafId; // Huhifadhi ombiAnimationFrame ID kwa ajili ya kughairiwa

Vigezo hivi hudhibiti kitanzi cha uhuishaji ambacho husoma kila mara ingizo la gamepad. Hatua ya 2: Chukua Marejeleo ya DOM Kisha, tunapata marejeleo ya vipengele vyote vya HTML tutakavyosasisha: // ==================================== // MAREJEO YA KIPINDI CHA DOM // ====================================

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");

Kuhifadhi marejeleo haya mbele ni bora zaidi kuliko kuuliza DOM mara kwa mara. Hatua ya 3: Ongeza Nyuma ya Kibodi Kwa majaribio bila kidhibiti halisi, tutapanga vitufe vya kibodi kwenye vitufe: // ==================================== // FALLBACK YA KIBODI (kwa majaribio bila kidhibiti) // ====================================

const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' vitufe hudhibiti pau zote mbili za kusitisha };

Hii inaturuhusu kujaribu UI kwa kubonyeza vitufe kwenye kibodi. Hatua ya 4: Unda Kitanzi Kikuu cha Usasishaji Hapa ndipo uchawi hutokea. Chaguo hili la kukokotoa hufanya kazi mfululizo na husoma hali ya padi ya mchezo: // ==================================== // KITANZI KUU CHA MCHEZO WA KUSASISHA // ====================================

kazi updateGamepad() { // Pata padi zote za michezo zilizounganishwa const gamepads = navigator.getGamepads(); ikiwa (! gamepads) zinarudi;

// Tumia gamepadi ya kwanza iliyounganishwa const gp = padi za michezo[0];

ikiwa (gp) { // Sasisha hali za kitufe kwa kugeuza darasa "kazi". btnA.classList.toggle("active", gp.buttons[0].imebonyezwa); btnB.classList.toggle("active", gp.buttons[1].zimebonyezwa); btnX.classList.toggle("active", gp.buttons[2].imebonyezwa);

// Shikilia kitufe cha kusitisha (kifungo index 9 kwenye vidhibiti vingi) const pausePressed = gp.buttons[9].imebonyezwa; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);

// Tengeneza orodha ya vitufe vilivyobonyezwa kwa sasa ili kuonyesha hali acha kubonyezwa = []; gp.buttons.forEach((btn, i) => { ikiwa (btn. imeshinikizwa)imebonyezwa.sukuma("Kitufe" + i); });

// Sasisha maandishi ya hali ikiwa vifungo vyovyote vimebonyezwa ikiwa (bonyeza. urefu > 0) { status.textContent = "Imebonyezwa: " + pressed.join(", "); } }

// Endelea kitanzi ikiwa kitatuzi kinaendelea ikiwa (inaendesha) { rafId = requestAnimationFrame(updateGamepad); } }

Mbinu ya classList.toggle() huongeza au kuondoa darasa amilifu kulingana na ikiwa kitufe kimebonyezwa, ambayo huanzisha mitindo yetu ya safu ya CSS. Hatua ya 5: Shughulikia Matukio ya Kibodi Wasikilizaji hawa wa matukio hufanya urejeshaji wa kibodi kufanya kazi: // ==================================== // VINYINYIZI VYA TUKIO LA KIBODI // ====================================

document.addEventListener("keydown", (e) => { ikiwa (keyMap[e.key]) { // Hushughulikia vipengele moja au vingi ikiwa (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } nyengine { keyMap[e.key].classList.add("active"); } status.textContent = "Ufunguo umebonyezwa: " + e.key.toUpperCase(); } });

document.addEventListener("keyup", (e) => { ikiwa (keyMap[e.key]) { // Ondoa hali amilifu wakati ufunguo umetolewa ikiwa (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } nyengine { keyMap[e.key].classList.remove("active"); } status.textContent = "Ufunguo umetolewa: " + e.key.toUpperCase(); } });

Hatua ya 6: Ongeza Anza/Acha Kidhibiti Hatimaye, tunahitaji njia ya kuwasha na kuzima kitatuzi: // ==================================== // WASHA KITENGEZIA KINACHOWASHA/ZIMWA // ====================================

document.getElementById("toggle").addEventListener("click", () => { kukimbia = !kukimbia; // Geuza hali inayoendesha

ikiwa (inaendesha) { status.textContent = "Kitatuzi kinaendelea..."; updateGamepad(); // Anzisha kitanzi cha sasisho } nyengine { status.textContent = "Kitatuzi hakitumiki"; cancelAnimationFrame(rafId); // Acha kitanzi } });

Kwa hivyo ndio, bonyeza kitufe na inawaka. Sukuma fimbo na inasonga. Ndivyo ilivyo. Jambo moja zaidi: maadili ghafi. Wakati mwingine unataka tu kuona nambari, sio taa.

Katika hatua hii, unapaswa kuona:

Kidhibiti rahisi kwenye skrini, Vifungo vinavyotenda unapoingiliana navyo, na Usomaji wa hiari wa utatuzi unaoonyesha fahirisi za vitufe vilivyobonyezwa.

Ili kufanya hili lisiwe dhahania, hapa kuna onyesho la haraka la kidhibiti cha skrini kinachojibu kwa wakati halisi:

Sasa, kubonyeza Anza Kurekodi huweka kila kitu hadi uguse Acha Kurekodi. 2. Kuhamisha Data kwa CSV/JSON Mara tu tuna logi, tutataka kuihifadhi.

Hamisha JSON Hamisha CSV

Hatua ya 1: Unda Msaidizi wa Upakuaji Kwanza, tunahitaji kazi ya msaidizi ambayo inashughulikia upakuaji wa faili kwenye kivinjari: // ==================================== // FAILI KUPAKUA MSAADA // ====================================

fanya kazi downloadFile(jina la faili, yaliyomo, aina = "text/plain") { // Unda blob kutoka kwa yaliyomo const blob = Blob mpya ([maudhui], {aina }); const url = URL.createObjectURL(blob);

// Unda kiungo cha kupakua cha muda na ubofye const a = document.createElement("a"); a.href = url; a.pakua = jina la faili; a.bofya();

// Safisha URL ya kitu baada ya kupakua setTimeout(() => URL.revokeObjectURL(url), 100); }

Chaguo hili la kukokotoa hufanya kazi kwa kuunda Blob (kitu kikubwa cha pili) kutoka kwa data yako, kutengeneza URL ya muda kwa hiyo, na kubofya kiunga cha upakuaji kwa utaratibu. Usafishaji huhakikisha hatuvuji kumbukumbu. Hatua ya 2: Hushughulikia Usafirishaji wa JSON JSON ni kamili kwa kuhifadhi muundo kamili wa data:

// ==================================== // USAFIRISHAJI KAMA JSON // ====================================

document.getElementById("export-json").addEventListener("click", () => { // Angalia ikiwa kuna chochote cha kuuza nje ikiwa (!frames.length) { console.warn("Hakuna rekodi inayopatikana ya kusafirisha."); kurudi; }

// Unda mzigo wa malipo na metadata na fremu const payload = { kuundwaKwa: new Date().toISOString(), muafaka };

// Pakua kama JSON iliyoumbizwa pakuaFaili( "gamepad-log.json", JSON.stringify(payload, null, 2), "maombi/json" ); });

Umbizo la JSON hudumisha kila kitu kikiwa na muundo na kubainika kwa urahisi, na kuifanya iwe bora kwa kupakia tena kwenye zana za uboreshaji au kushiriki na wachezaji wenza. Hatua ya 3: Hushughulikia Uhamishaji wa CSV Kwa uhamishaji wa CSV, tunahitaji kusawazisha data ya daraja katika safu na safu wima:

//=================================== // USAFIRISHA KWA KAMA CSV // ====================================

document.getElementById("export-csv").addEventListener("click", () => { // Angalia ikiwa kuna chochote cha kuuza nje ikiwa (!frames.length) { console.warn("Hakuna rekodi inayopatikana ya kusafirisha."); kurudi; }

// Unda safu mlalo ya kichwa cha CSV (safu wima za muhuri wa muda, vitufe vyote, shoka zote) const headerButtons = fremu[0].buttons.map((_, i) => btn${i}); const headerAxes = fremu[0].axes.map((_, i) => mhimili ${i}); const header = ["t", ...headerButtons, ...headerAxes].jiunge(",") + "\n";

// Unda safu mlalo za data za CSV const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.thamani); rudisha [f.t, ...btnVals, ...f.axes].jiunge(","); }).jiunge("\n");

// Pakua kama CSV downloadFile("gamepad-log.csv", kichwa + safu, "text/csv"); });

CSV ni nzuri sana kwa uchanganuzi wa data kwa sababu inafunguka moja kwa moja katika Excel au Majedwali ya Google, hukuruhusu kuunda chati, kuchuja data au kuona ruwaza. Kwa kuwa sasa vitufe vya kutuma vimeingia, utaona chaguo mbili mpya kwenye paneli: Hamisha JSON na Hamisha CSV. JSON ni nzuri ikiwa unataka kurudisha logi mbichi kwenye zana zako za usanidi au kuzunguka muundo. CSV, kwa upande mwingine, hufunguka moja kwa moja hadi Excel au Majedwali ya Google ili uweze kuchora, kuchuja, au kulinganisha maingizo. Kielelezo kifuatacho kinaonyesha jinsi kidirisha kinavyoonekana na vidhibiti hivyo vya ziada.

3. Mfumo wa Picha Wakati mwingine huhitaji rekodi kamili, tu "picha ya skrini" ya haraka ya hali ya ingizo. Hapo ndipo kitufe cha Chukua Snapshot husaidia.

Piga Picha

Na JavaScript:

// ==================================== // CHUKUA SNAPSHOT // ====================================

document.getElementById("snapshot").addEventListener("click", () => { // Pata padi zote za michezo zilizounganishwa const pedi = navigator.getGamepads(); const activePads = [];

// Pitia na ukamata hali ya kila gamepadi iliyounganishwa kwa (const gp ya pedi) { ikiwa (!gp) itaendelea; // Ruka nafasi tupu

activePads.push({ kitambulisho: gp.id, // Jina la kidhibiti/modeli muhuri wa wakati: performance.now(), vitufe: gp.buttons.map(b => ({ kushinikizwa: b.kushinikizwa, thamani: b.thamani })), shoka: [...gp.axes] }); }

// Angalia ikiwa gamepads zozote zilipatikana ikiwa (!activePads.length) { console.warn("Hakuna padi za michezo zilizounganishwa kwa snapshot."); tahadhari("Hakuna kidhibiti kilichogunduliwa!"); kurudi; }

// Ingia na umjulishe mtumiaji console.log("Picha:", activePads); tahadhari(Picha imechukuliwa! Imenasa kidhibiti(vidhibiti) cha ${activePads.length}). });

Picha huzuia hali halisi ya kidhibiti chako kwa wakati mmoja. 4. Uchezaji wa Uingizaji wa Roho Sasa kwa ile ya kufurahisha: mchezo wa marudio wa pembejeo za mzimu. Hii inachukua logi na kuirudisha nyuma kwa kuibua kana kwamba mchezaji wa phantom alikuwa akitumia kidhibiti.

Cheza Rekodi ya Mwisho

JavaScript kwa kucheza tena: // ==================================== // RIWAYA YA GHOST // ====================================

document.getElementById("cheza tena").addEventListener("click", () => { // Hakikisha tuna rekodi ya kucheza tena ikiwa (!frames.length) { tahadhari("Hakuna rekodi ya kucheza tena!"); kurudi; }

console.log("Inaanza uchezaji wa ghost ...");

// Muda wa kufuatilia kwa uchezaji uliosawazishwa let startTime = performance.now(); basi frameIndex = 0;

// Cheza tena kitanzi cha uhuishaji kazi hatua() { const now = performance.now(); const ilipita = sasa - startTime;

// Chakata viunzi vyote ambavyo vilipaswa kutokea kwa sasa wakati (frameIndex < frames.length && frames[frameIndex].t <= ilipita) { const frame = fremu[frameIndex];

// Sasisha UI na hali ya kitufe kilichorekodiwa btnA.classList.toggle("active", frame.buttons[0].vimebonyezwa); btnB.classList.toggle("active", frame.buttons[1].zimebonyezwa); btnX.classList.toggle("active", frame.buttons[2].vimebonyezwa);

// Sasisha onyesho la hali acha kubonyezwa = []; frame.buttons.forEach((btn, i) => { ikiwa (btn.pressed) imebonyezwa.push("Kitufe" + i); }); ikiwa (bonyeza. urefu > 0) { status.textContent = "Ghost:" + pressed.join(", "); }

frameIndex++; }

// Endelea kitanzi ikiwa kuna viunzi zaidi ikiwa (frameIndex < frames.length) { requestAnimationFrame(hatua); } nyengine { console.log("Cheza tenakumaliza."); status.textContent = "Cheza tena imekamilika"; } }

// Anzisha uchezaji wa marudio hatua (); });

Ili kufanya utatuzi ufanyike kwa urahisi zaidi, niliongeza mchezo wa marudio wa mzimu. Baada ya kurekodi kipindi, unaweza kugonga kucheza tena na kutazama UI ikiigiza, kama vile mchezaji wa phantom anaendesha pedi. Kitufe kipya cha Cheza tena Ghost huonekana kwenye kidirisha kwa hili.

Piga Rekodi, changanya na kidhibiti kidogo, acha, kisha cheza tena. UI inaangazia kila kitu ulichofanya, kama mzimu unaofuata michango yako. Kwa nini ujisumbue na hizi za ziada?

Kurekodi/kuhamisha hurahisisha wanaojaribu kuonyesha ni nini hasa kilifanyika. Vijipicha huganda kwa muda kwa muda, ni muhimu sana unapofuatilia wadudu wasio wa kawaida. Uchezaji wa marudiano wa Ghost ni mzuri kwa mafunzo, ukaguzi wa ufikivu, au kulinganisha tu usanidi wa udhibiti kando.

Kwa wakati huu, sio tu onyesho safi tena, lakini kitu ambacho unaweza kufanya kazi. Kesi za Matumizi ya Ulimwengu Halisi Sasa tuna kitatuzi hiki ambacho kinaweza kufanya mengi. Inaonyesha ingizo la moja kwa moja, kumbukumbu kumbukumbu, kuuza nje, na hata replay mambo. Lakini swali la kweli ni: ni nani anayejali? Hii ni muhimu kwa nani? Mchezo Watengenezaji Vidhibiti ni sehemu ya kazi, lakini kuzitatua? Kawaida maumivu. Fikiria kuwa unajaribu mchanganyiko wa mchezo wa mapigano, kama vile ↓ → + ngumi. Badala ya kuomba, uliibonyeza kwa njia ile ile mara mbili, unairekodi mara moja, na kuigiza tena. Imekamilika. Au unabadilishana kumbukumbu za JSON na mwenzako ili kuangalia kama msimbo wako wa wachezaji wengi unatenda vivyo hivyo kwenye mashine zao. Hiyo ni kubwa. Watendaji wa Ufikiaji Hii iko karibu na moyo wangu. Sio kila mtu anacheza na mtawala "wa kawaida". Vidhibiti vinavyobadilika hutupa ishara za ajabu wakati mwingine. Kwa chombo hiki, unaweza kuona hasa kinachotokea. Walimu, watafiti, yeyote yule. Wanaweza kunyakua kumbukumbu, kulinganisha, au kucheza tena pembejeo ubavu kwa upande. Ghafla, vitu visivyoonekana vinakuwa wazi. Upimaji wa Uhakikisho wa Ubora Wajaribu kwa kawaida huandika maelezo kama vile "Niliponda vitufe hapa na vikavunjika." Haifai sana. Sasa? Wanaweza kunasa mashinikizo halisi, kuhamisha kumbukumbu, na kuituma. Hakuna kubahatisha. Waelimishaji Ikiwa unatengeneza mafunzo au video za YouTube, uchezaji wa marudiano wa mzimu ni dhahabu. Unaweza kusema kihalisi, "Hivi ndivyo nilivyofanya na kidhibiti," huku UI ikionyesha ikifanyika. Hufanya maelezo wazi zaidi. Zaidi ya Michezo Na ndio, hii sio tu juu ya michezo. Watu wametumia vidhibiti kwa roboti, miradi ya sanaa na violesura vya ufikivu. Suala sawa kila wakati: kivinjari kinaona nini haswa? Kwa hili, sio lazima kudhani. Hitimisho Kutatua ingizo la kidhibiti daima kumehisi kama upofu wa kuruka. Tofauti na DOM au CSS, hakuna mkaguzi aliyejengewa ndani wa padi za michezo; ni nambari mbichi tu kwenye koni, hupotea kwa urahisi kwenye kelele. Kwa mistari mia chache ya HTML, CSS, na JavaScript, tuliunda kitu tofauti:

Kitatuzi cha kuona kinachofanya pembejeo zisizoonekana kuonekana. Mfumo wa CSS uliowekwa tabaka ambao huweka UI safi na inayoweza kutatuliwa. Seti ya viboreshaji (kurekodi, kuhamisha, vijipicha, uchezaji tena wa ghost) ambayo huiinua kutoka onyesho hadi zana ya msanidi.

Mradi huu unaonyesha ni umbali gani unaweza kwenda kwa kuchanganya nguvu ya Mfumo wa Wavuti na ubunifu kidogo katika Tabaka za CSS Cascade. Chombo ambacho nimeelezea kwa ukamilifu ni chanzo-wazi. Unaweza kuunda repo la GitHub na ujaribu mwenyewe. Lakini muhimu zaidi, unaweza kuifanya iwe yako mwenyewe. Ongeza tabaka zako mwenyewe. Jenga mantiki yako ya kucheza tena. Iunganishe na mfano wako wa mchezo. Au hata kuitumia kwa njia ambazo sijafikiria. Kwa ufundishaji, ufikiaji, au uchambuzi wa data. Mwisho wa siku, hii sio tu kuhusu kurekebisha gamepads. Ni kuhusu kuangazia pembejeo zilizofichwa, na kuwapa wasanidi programu ujasiri wa kufanya kazi na maunzi ambayo mtandao bado haukumbati kikamilifu. Kwa hivyo, chomeka kidhibiti chako, fungua kihariri chako, na uanze kujaribu. Unaweza kushangazwa na kile ambacho kivinjari chako na CSS yako inaweza kutimiza.

You May Also Like

13 Trending Songs on TikTok in March 2026 (+ How to Use Them)

Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)

China’s Cybersecurity Agency Issues Security Warning About OpenClaw