Kad pievienojat kontrolieri, jūs sajaucat pogas, pārvietojat sviras, velciet sprūdus… un kā izstrādātājs jūs to neredzat. Pārlūkprogramma to uztver, protams, bet, ja vien konsolē nereģistrējat numurus, tas ir neredzams. Tās ir galvassāpes ar Gamepad API. Tas pastāv gadiem ilgi, un tas patiesībā ir diezgan spēcīgs. Jūs varat lasīt pogas, nūjas, sprūdus, darbus. Bet lielākā daļa cilvēku to nepieskaras. Kāpēc? Jo nav atsauksmju. Izstrādātāja rīkos nav paneļa. Nav skaidra veida, kā uzzināt, vai kontrolieris pat dara to, ko jūs domājat. Tāda sajūta, it kā lidotu akls. Tas mani pietiekami satrauca, lai izveidotu nelielu rīku: Gamepad Cascade Debugger. Tā vietā, lai skatītos uz konsoles izvadi, jūs saņemat tiešo, interaktīvo kontroliera skatu. Nospiediet kaut ko, un tas reaģē uz ekrāna. Izmantojot CSS kaskādes slāņus, stili paliek sakārtoti, tāpēc atkļūdošana ir vienkāršāka. Šajā ziņojumā es jums parādīšu, kāpēc kontrolieru atkļūdošana ir tik sāpīga, kā CSS palīdz to iztīrīt un kā jūs varat izveidot atkārtoti lietojamu vizuālo atkļūdotāju saviem projektiem.
Pat ja jūs varat tos visus reģistrēt, jūs ātri nonāksit ar nenolasāmu konsoles surogātpastu. Piemēram: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Vai varat pateikt, kura poga tika nospiesta? Varbūt, bet tikai pēc tam, kad ir sasprindzinātas acis un trūkst dažas ievades. Tātad, nē, atkļūdošana nav vienkārša, ja runa ir par ievades lasīšanu. 3. problēma: struktūras trūkums Pat ja izveidojat ātru vizualizētāju, stili var ātri kļūt netīri. Noklusējuma, aktīvais un atkļūdošanas stāvokļi var pārklāties, un bez skaidras struktūras jūsu CSS kļūst trausls un grūti paplašināms. CSS kaskādes slāņi var palīdzēt. Viņi grupē stilus “slāņos”, kas ir sakārtoti pēc prioritātes, tāpēc jūs pārtraucat cīnīties ar specifiku un uzminēt: “Kāpēc netiek rādīts mans atkļūdošanas stils?” Tā vietā jūs saglabājat atsevišķas bažas:
Pamatne: kontroliera standarta, sākotnējais izskats. Aktīvs: nospiestajām pogām un pārvietotajām nūjām svarīgākie elementi. Atkļūdošana: pārklājumi izstrādātājiem (piem., skaitļu nolasījumi, ceļveži un tā tālāk).
Ja mēs saskaņā ar to definētu slāņus CSS, mums būtu: /* no zemākās uz augstāko prioritāti */ @layer base, aktīvs, atkļūdot;
@layer base { /* ... */ }
@slānis aktīvs { /* ... */ }
@layer atkļūdošana { /* ... */ }
Tā kā katrs slānis ir paredzams, jūs vienmēr zināt, kuri noteikumi uzvar. Šī paredzamība padara atkļūdošanu ne tikai vienkāršāku, bet arī pārvaldāmu. Mēs esam aptvēruši problēmu (neredzama, netīra ievade) un pieeju (vizuālais atkļūdotājs, kas izveidots ar Cascade Layers). Tagad mēs soli pa solim veiksim atkļūdotāja izveides procesu. Atkļūdotāja koncepcija Vienkāršākais veids, kā padarīt slēpto ievadi redzamu, ir vienkārši uzzīmēt to uz ekrāna. Tieši to dara šis atkļūdotājs. Pogas, trigeri un kursorsviras iegūst vizuālu izskatu.
Nospiediet A: iedegas aplis. Pabīdiet nūju: aplis slīd apkārt. Pavelciet sprūdu līdz pusei: josla piepildās līdz pusei.
Tagad jūs neskatāties uz 0 un 1, bet faktiski vērojat kontroliera reakciju tiešraidē. Protams, kad sākat apkopot tādus stāvokļus kā noklusējuma, nospiesta, atkļūdošanas informācija, varbūt pat ierakstīšanas režīms, CSS sāk kļūt lielāks un sarežģītāks. Šeit noder kaskādes slāņi. Šeit ir novājināts piemērs: @layer base { .button { fons: #222; apmales rādiuss: 50%; platums: 40 pikseļi; augstums: 40 pikseļi; } }
@slānis aktīvs { .button.pressed { fons: #0f0; /* spilgti zaļa */ } }
@layer atkļūdošana { .button::after { saturs: attr(data-vērtība); fonta izmērs: 12 pikseļi; krāsa: #fff; } }
Slāņu secībai ir nozīme: bāze → aktīva → atkļūdošana.
bāze zīmē kontrolieri. aktīvie rokturi nospiesti stāvokļi. atkļūdošanas metienus uz pārklājumiem.
Šāda sadalīšana nozīmē, ka jūs necīnās ar dīvainiem specifikas kariem. Katram slānim ir sava vieta, un jūs vienmēr zināt, kas uzvar. Izbūvējot to Vispirms parādīsim kaut ko ekrānā. Tam nav labi jāizskatās — tam vienkārši jāpastāv, lai mums būtu ar ko strādāt.
Spēļu paneļa kaskādes atkļūdotājs
Tās burtiski ir tikai kastes. Pagaidām tas nav aizraujošs, taču tas sniedz mums rokturus, ko vēlāk izmantot, izmantojot CSS un JavaScript. Labi, es šeit izmantoju kaskādes slāņus, jo tas saglabā saturu sakārtotu, tiklīdz pievienojat citus stāvokļus. Lūk, aptuvens piegājiens:
/* ==================================== KASKĀDES SLĀŅU IESTATĪŠANA Kārtība ir svarīga: bāze → aktīva → atkļūdošana =================================== */
/* Iepriekš definējiet slāņu secību */ @layer base, aktīvs, atkļūdot;
/* 1. slānis: pamata stili — noklusējuma izskats */ @layer base { .button { fons: #333; apmales rādiuss: 50%; platums: 70 pikseļi; augstums: 70 pikseļi; displejs: flex; attaisnot-saturs: centrs; izlīdzināt vienumus: centrs; }
.pause { platums: 20 pikseļi; augstums: 70 pikseļi; fons: #333; displejs: inline-block; } }
/* 2. slānis: aktīvie stāvokļi — tiek apstrādātas nospiestās pogas */ @slānis aktīvs { .button.active { fons: #0f0; /* Spilgti zaļš nospiežot */ pārveidot: skala(1.1); /* Nedaudz palielina pogu */ }
.pause.active { fons: #0f0; pārveidot: skalaY(1.1); /* Nospiežot, izstiepjas vertikāli */ } }
/* 3. slānis: atkļūdošanas pārklājumi — informācija par izstrādātāju */ @layer atkļūdošana { .button::after { saturs: attr(data-vērtība); /* Parāda skaitlisko vērtību */ fonta izmērs: 12 pikseļi; krāsa: #fff; } }
Šīs pieejas skaistums ir tāds, ka katram slānim ir skaidrs mērķis. Pamatslānis nekad nevar ignorēt aktīvo, un aktīvais nekad nevar ignorēt atkļūdošanu neatkarīgi no specifikas. Tas novērš CSS specifiku karus, kas parasti skar atkļūdošanas rīkus. Tagad izskatās, ka daži klasteri atrodas uz tumša fona. Godīgi sakot, nav pārāk slikti.
JavaScript pievienošana JavaScript laiks. Šeit kontrolieris faktiski kaut ko dara. Mēs to veidosim soli pa solim. 1. darbība: iestatiet valsts pārvaldību Pirmkārt, mums ir nepieciešami mainīgie, lai izsekotu atkļūdotāja stāvokli: // ==================================== // VALSTS VADĪBA // ====================================
let running = false; // Izseko, vai atkļūdotājs ir aktīvs let rafId; // Saglabā pieprasījumaAnimationFrame ID atcelšanai
Šie mainīgie kontrolē animācijas cilpu, kas nepārtraukti nolasa spēļu paneļa ievadi. 2. darbība: satveriet DOM atsauces Tālāk mēs saņemam atsauces uz visiem HTML elementiem, kurus mēs atjaunināsim: // ==================================== // DOM ELEMENTU ATSAUCES // ====================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pauze1"); const pause2 = document.getElementById("pauze2"); const status = document.getElementById("statuss");
Šo atsauču glabāšana iepriekš ir efektīvāka nekā atkārtota DOM vaicāšana. 3. darbība. Pievienojiet tastatūras atkāpšanos Lai veiktu testēšanu bez fiziska kontroliera, tastatūras taustiņus savienosim ar pogām: // ==================================== // TASTATŪRAS ATZĪŠANA (testēšanai bez kontrollera) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pauze1, pauze2] // taustiņš 'p' kontrolē abas pauzes joslas };
Tas ļauj mums pārbaudīt lietotāja interfeisu, nospiežot tastatūras taustiņus. 4. darbība. Izveidojiet galveno atjaunināšanas cilpu Lūk, kur notiek burvība. Šī funkcija darbojas nepārtraukti un nolasa spēļu paneļa stāvokli: // ==================================== // GALVENĀ SPĒLES ATJAUNINĀŠANAS CILPA // ====================================
function updateGamepad() { // Iegūstiet visus pievienotos spēļu paneļus const gamepads = navigator.getGamepads(); if (!gamepad) atgriezties;
// Izmantojiet pirmo pievienoto spēļu paneli const gp = spēļu paneļi[0];
if (gp) { // Atjaunināt pogas stāvokli, pārslēdzot "aktīvo" klasi btnA.classList.toggle("aktīvs", gp.buttons[0].presed); btnB.classList.toggle("aktīvs", gp.buttons[1].presed); btnX.classList.toggle("aktīvs", gp.buttons[2].presed);
// Apturēt pauzes pogu (pogas rādītājs 9 lielākajā daļā kontrolleru) const pausePressed = gp.buttons[9].presed; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("aktīvs", pauzePresēts);
// Izveidojiet pašlaik nospiesto pogu sarakstu statusa rādīšanai let nospiests = []; gp.buttons.forEach((btn, i) => { ja (btn.presed)nospiests.push("Poga " + i); });
// Atjauniniet statusa tekstu, ja tiek nospiesta kāda poga if (nospiests.garums > 0) { status.textContent = "Nospiests: " + pressed.join(", "); } }
// Turpiniet cilpu, ja darbojas atkļūdotājs if (skriešana) { rafId = requestAnimationFrame(updateGamepad); } }
Metode classList.toggle() pievieno vai noņem aktīvo klasi, pamatojoties uz to, vai poga ir nospiesta, kas aktivizē mūsu CSS slāņa stilus. 5. darbība. Apstrādājiet tastatūras notikumus Šie notikumu uztvērēji nodrošina tastatūras rezerves darbību: // ==================================== // KLAVIATŪRAS PASĀKUMU APDARBINĀTĀJI // ====================================
document.addEventListener("keydown", (e) => { if (keyMap[e.key]) { // Apstrādājiet vienu vai vairākus elementus if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("aktīvs")); } cits { keyMap[e.key].classList.add("aktīvs"); } status.textContent = "Nospiests taustiņš: " + e.key.toUpperCase(); } });
document.addEventListener("atslēga", (e) => { if (keyMap[e.key]) { // Noņemt aktīvo stāvokli, kad atslēga tiek atbrīvota if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } cits { keyMap[e.key].classList.remove("aktīvs"); } status.textContent = "Atslēga atbrīvota: " + e.key.toUpperCase(); } });
6. darbība: pievienojiet starta/apturēšanas vadību Visbeidzot, mums ir nepieciešams veids, kā ieslēgt un izslēgt atkļūdotāju: // ==================================== // IESLĒGT/IZSLĒGT ATKLĀJOTĀJU // ====================================
document.getElementById("toggle").addEventListener("klikšķis", () => { skriešana = !skriešana; // Pārvērst darbības stāvokli
if (skriešana) { status.textContent = "Atkļūdotājs darbojas..."; updateGamepad(); // Sāciet atjaunināšanas cilpu } cits { status.textContent = "Atkļūdotājs neaktīvs"; cancelAnimationFrame(rafId); // Apturēt cilpu } });
Jā, nospiediet pogu, un tas spīd. Piespiediet nūju, un tā kustas. Tas arī viss. Vēl viena lieta: neapstrādātas vērtības. Dažreiz jūs vienkārši vēlaties redzēt ciparus, nevis gaismas.
Šajā posmā jums vajadzētu redzēt:
Vienkāršs ekrāna kontrolleris, Pogas, kas reaģē, mijiedarbojoties ar tām, un Izvēles atkļūdošanas rādījums, kurā parādīti nospiesto pogu rādītāji.
Lai padarītu to mazāk abstraktu, šeit ir īss demonstrācijas ekrānā redzamais kontrolleris, kas reaģē reāllaikā:
Tagad, nospiežot Sākt ierakstīšanu, viss tiek reģistrēts, līdz noklikšķināsit uz Stop Recording. 2. Datu eksportēšana uz CSV/JSON Kad mums būs žurnāls, mēs vēlamies to saglabāt.
1. darbība. Izveidojiet lejupielādes palīgu Pirmkārt, mums ir nepieciešama palīgfunkcija, kas apstrādā failu lejupielādi pārlūkprogrammā: // ==================================== // FAILU LEJUPIELĀDES PALĪGS // ====================================
function downloadFile(faila nosaukums, saturs, tips = "teksts/vienkāršs") { // Izveidojiet lāsumu no satura const blob = new Blob([saturs], {tips}); const url = URL.createObjectURL(blob);
// Izveidojiet pagaidu lejupielādes saiti un noklikšķiniet uz tās const a = document.createElement("a"); a.href = url; a.download = faila nosaukums; a.click();
// Notīriet objekta URL pēc lejupielādes setTimeout(() => URL.revokeObjectURL(url), 100); }
Šī funkcija darbojas, no jūsu datiem izveidojot Blob (bināru lielu objektu), ģenerējot tam pagaidu URL un programmatiski noklikšķinot uz lejupielādes saites. Tīrīšana nodrošina, ka netiek noplūdināta atmiņa. 2. darbība. JSON eksportēšana JSON ir lieliski piemērots pilnīgas datu struktūras saglabāšanai:
// ==================================== // EKSPORTĒT KĀ JSON // ====================================
document.getElementById("export-json").addEventListener("click", () => { // Pārbaudiet, vai ir ko eksportēt if (!frames.length) { console.warn("Eksportēšanai nav pieejams ieraksts."); atgriešanās; }
// Izveidojiet lietderīgo slodzi ar metadatiem un kadriem const kravnesība = { CreatedAt: new Date().toISOString(), rāmji };
// Lejupielādēt kā formatētu JSON downloadFile( "gamepad-log.json", JSON.stringify(lietderīgā slodze, null, 2), "aplikācija/json" ); });
JSON formāts saglabā visu strukturētu un viegli parsējamu, padarot to ideāli piemērotu, lai to atkal ielādētu izstrādātāja rīkos vai kopīgotu ar komandas biedriem. 3. darbība. CSV eksportēšana CSV eksportēšanai hierarhiskie dati ir jāsaplacina rindās un kolonnās.
//==================================== // EKSPORTĒT KĀ CSV // ====================================
document.getElementById("export-csv").addEventListener("click", () => { // Pārbaudiet, vai ir ko eksportēt if (!frames.length) { console.warn("Eksportēšanai nav pieejams ieraksts."); atgriešanās; }
// Veidot CSV galvenes rindu (laikspiedola kolonnas, visas pogas, visas asis) const headerButtons = rāmji[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => ass${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Veidojiet CSV datu rindas const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); return [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Lejupielādēt kā CSV downloadFile("gamepad-log.csv", galvene + rindas, "text/csv"); });
CSV fails ir lieliski piemērots datu analīzei, jo tas tiek atvērts tieši programmā Excel vai Google izklājlapas, ļaujot izveidot diagrammas, filtrēt datus vai vizuāli pamanīt modeļus. Tagad, kad ir atvērtas eksportēšanas pogas, panelī redzēsit divas jaunas opcijas: eksportēt JSON un eksportēt CSV. JSON ir jauks, ja vēlaties iemest neapstrādāto žurnālu atpakaļ savos izstrādes rīkos vai papētīt struktūru. No otras puses, CSV tiek atvērts tieši programmā Excel vai Google izklājlapas, lai jūs varētu veidot diagrammas, filtrēt vai salīdzināt ievades. Nākamajā attēlā parādīts, kā panelis izskatās ar šīm papildu vadīklām.
3. Momentuzņēmumu sistēma Dažreiz jums nav nepieciešams pilns ieraksts, tikai ātrs ievades stāvokļu ekrānuzņēmums. Šeit palīdz poga Uzņemt momentuzņēmumu.
Un JavaScript:
// ==================================== // UZŅEM SNAPSHOT // ====================================
document.getElementById("snapshot").addEventListener("klikšķis", () => { // Iegūstiet visus pievienotos spēļu paneļus const pads = navigator.getGamepads(); const activePads = [];
// Pārlūkojiet un tveriet katra pievienotā spēļu paneļa stāvokli for (const gp of pads) { if (!gp) turpināt; // Izlaist tukšās vietas
activePads.push({ id: gp.id, // Kontrollera nosaukums/modelis laikspiedols: performance.now(), pogas: gp.buttons.map(b => ({ nospiests: b.nospiests, vērtība: b.vērtība })), asis: [...gp.axes] }); }
// Pārbaudiet, vai nav atrasti spēļu paneļi if (!activePads.length) { console.warn("Momentuzņēmumam nav pievienoti spēļu paneļi."); alert("Nav atrasts kontrolleris!"); atgriešanās; }
// Reģistrējieties un paziņojiet lietotājam console.log("Momentuzņēmums:", ActivePads); alert(Momentuzņēmums uzņemts! Uzņemts ${activePads.length} kontrolleris(-i).); });
Momentuzņēmumi vienā brīdī iesaldē precīzu jūsu kontrollera stāvokli. 4. Ghost Input Replay Tagad par jautrību: spoku ievades atkārtošana. Tas paņem žurnālu un vizuāli atskaņo to tā, it kā kontrolieris izmantotu fantoma atskaņotāju.
JavaScript atkārtošanai: // ==================================== // SPĒKU ATKĀRTOJUMS // ====================================
document.getElementById("atkārtot").addEventListener("klikšķis", () => { // Pārliecinieties, vai mums ir ieraksts, ko atkārtoti atskaņot if (!frames.length) { alert("Nav ieraksta, ko atkārtot!"); atgriešanās; }
console.log("Sākt spoku atkārtošanu...");
// Dziesmas laiks sinhronizētai atskaņošanai let startTime = performance.now(); lai frameIndex = 0;
// Atskaņot animācijas cilpu function step() { const tagad = performance.now(); const elapsed = tagad - startTime;
// Apstrādājiet visus kadrus, kuriem jau bija jānotiek while (frameIndex < frames.length && frames[frameIndex].t <= pagājuši) { const rāmis = kadri[frameIndex];
// Atjauniniet lietotāja interfeisu, izmantojot ierakstītās pogas statusus btnA.classList.toggle("active", frame.buttons[0].pressed); btnB.classList.toggle("active", frame.buttons[1].pressed); btnX.classList.toggle("active", frame.buttons[2].pressed);
// Atjaunināt statusa displeju let nospiests = []; frame.buttons.forEach((btn, i) => { if (btn.presed) pressed.push("Button " + i); }); if (nospiests.garums > 0) { status.textContent = "Spoks: " + pressed.join(", "); }
frameIndex++; }
// Turpināt cilpu, ja ir vairāk kadru if (frameIndex < frames.length) { requestAnimationFrame(solis); } cits { console.log ("Atskaņotpabeigts."); status.textContent = "Atkārtota atskaņošana pabeigta"; } }
// Sāciet atskaņošanu solis (); });
Lai padarītu atkļūdošanu mazliet praktiskāku, es pievienoju spoku atkārtojumu. Kad esat ierakstījis sesiju, varat nospiest atskaņošanu un skatīties, kā lietotāja interfeiss to izpilda, gluži kā fantoma atskaņotājs, kas darbojas. Šim nolūkam panelī tiek parādīta jauna poga Replay Ghost.
Nospiediet Ierakstīt, mazliet sajaucieties ar kontrolieri, apstājieties, pēc tam atskaņojiet vēlreiz. UI vienkārši atbalso visu, ko jūs darījāt, kā spoks, kas seko jūsu ievades datiem. Kāpēc uztraukties ar šīm ekstrām?
Ierakstīšana/eksportēšana ļauj testētājiem viegli parādīt, kas notika. Momentuzņēmumi uz brīdi sastingst, īpaši noderīgi, ja meklējat dīvainas kļūdas. Spoku atkārtošana ir lieliski piemērota apmācībai, pieejamības pārbaudēm vai vienkārši vadības iestatījumu salīdzināšanai blakus.
Šobrīd tā vairs nav tikai glīta demonstrācija, bet arī kaut kas tāds, ko jūs varētu likt lietā. Lietošanas gadījumi reālajā pasaulē Tagad mums ir šis atkļūdotājs, kas var paveikt daudz. Tas parāda tiešraides ievadi, ieraksta žurnālus, eksportē tos un pat atkārto saturu. Bet patiesais jautājums ir: kam tas patiesībā rūp? Kam tas noder? Spēļu izstrādātāji Kontrolieri ir daļa no darba, bet to atkļūdošana? Parasti sāpes. Iedomājieties, ka testējat cīņas spēles kombināciju, piemēram, ↓ → + sitiens. Tā vietā, lai lūgtu, jūs to divreiz nospiedāt vienādi, vienreiz ierakstāt un atskaņojat vēlreiz. Gatavs. Vai arī apmainiet JSON žurnālus ar komandas biedru, lai pārbaudītu, vai jūsu vairāku spēlētāju kods reaģē tāpat kā viņu datorā. Tas ir milzīgi. Pieejamības speciālisti Šis man ir pie sirds. Ne visi spēlē ar “standarta” kontrolieri. Adaptīvie kontrolieri dažreiz izdod dīvainus signālus. Izmantojot šo rīku, jūs varat precīzi redzēt, kas notiek. Skolotāji, pētnieki, neatkarīgi no tā. Viņi var satvert žurnālus, salīdzināt tos vai atskaņot ievades vienumus blakus. Pēkšņi neredzamas lietas kļūst acīmredzamas. Kvalitātes nodrošināšanas pārbaude Testētāji parasti raksta piezīmes, piemēram, “Es šeit saspiedu pogas, un tā salūza”. Ne pārāk palīdzēja. Tagad? Viņi var iegūt precīzas preses, eksportēt žurnālu un nosūtīt to. Bez minējumiem. Audzinātāji Ja veidojat apmācības vai YouTube videoklipus, spoku atkārtošana ir zelts. Varat burtiski teikt: “Lūk, ko es izdarīju ar kontrolieri”, kamēr lietotāja interfeiss parāda, ka tas notiek. Padara skaidrojumus daudz skaidrākus. Ārpus spēlēm Un jā, tas attiecas ne tikai uz spēlēm. Cilvēki ir izmantojuši kontrolierus robotiem, mākslas projektiem un pieejamības saskarnēm. Katru reizi viena un tā pati problēma: ko pārlūkprogramma patiesībā redz? Izmantojot šo, jums nav jāmin. Secinājums Kontrollera ievades atkļūdošana vienmēr ir bijusi kā akls. Atšķirībā no DOM vai CSS, spēļu paneļiem nav iebūvēta inspektora; tie ir tikai neapstrādāti skaitļi konsolē, kas viegli pazūd troksnī. Izmantojot dažus simtus HTML, CSS un JavaScript rindiņu, mēs izveidojām kaut ko citu:
Vizuāls atkļūdotājs, kas padara redzamas neredzamas ievades. Slāņaina CSS sistēma, kas nodrošina lietotāja saskarni tīru un atkļūdojamu. Uzlabojumu komplekts (ierakstīšana, eksportēšana, momentuzņēmumi, spoku atkārtošana), kas paaugstina to no demonstrācijas par izstrādātāja rīku.
Šis projekts parāda, cik tālu jūs varat iet, sajaucot tīmekļa platformas jaudu ar nelielu radošumu CSS kaskādes slāņos. Rīks, ko es tikko paskaidroju pilnībā, ir atvērtā koda. Varat klonēt GitHub repo un izmēģināt to pats. Bet vēl svarīgāk ir tas, ka jūs varat to padarīt par savu. Pievienojiet savus slāņus. Izveidojiet savu atkārtošanas loģiku. Integrējiet to ar savu spēles prototipu. Vai pat izmantot to tādos veidos, kādus nebiju iedomājies. Mācīšanai, pieejamībai vai datu analīzei. Galu galā tas neattiecas tikai uz spēļu paneļu atkļūdošanu. Tas ir saistīts ar slēpto ievades avotu apgaismošanu un pārliecību izstrādātājiem strādāt ar aparatūru, ko tīmeklis joprojām pilnībā neaptver. Tāpēc pievienojiet kontrolieri, atveriet redaktoru un sāciet eksperimentēt. Jūs varētu būt pārsteigts par to, ko patiešām var paveikt jūsu pārlūkprogramma un jūsu CSS.
