Kur futni një kontrollues, shtypni butonat, lëvizni shkopinjtë, tërhiqni këmbëzat… dhe si zhvillues, nuk shihni asgjë. Shfletuesi po e merr atë, sigurisht, por nëse nuk po regjistroni numra në tastierë, është i padukshëm. Kjo është dhimbja e kokës me API-në e Gamepad. Ka vite që ekziston dhe në fakt është mjaft i fuqishëm. Mund të lexoni butona, shkopinj, këmbëza, vepra. Por shumica e njerëzve nuk e prekin atë. Pse? Sepse nuk ka reagime. Nuk ka panel në mjetet e zhvilluesit. Nuk ka mënyrë të qartë për të ditur nëse kontrolluesi po bën atë që mendoni ju. Ndjehet si fluturimi i verbër. Kjo më ngacmoi mjaftueshëm për të krijuar një mjet të vogël: Gamepad Cascade Debugger. Në vend që të shikoni daljen e konsolës, ju merrni një pamje të drejtpërdrejtë dhe interaktive të kontrolluesit. Shtypni diçka dhe ajo reagon në ekran. Dhe me CSS Cascade Layers, stilet qëndrojnë të organizuara, kështu që është më e pastër për të korrigjuar gabimet. Në këtë postim, unë do t'ju tregoj pse korrigjimi i kontrolluesve është kaq i vështirë, si CSS ndihmon në pastrimin e tij dhe si mund të ndërtoni një korrigjues vizual të ripërdorshëm për projektet tuaja.
Edhe nëse jeni në gjendje t'i regjistroni të gjitha, do të përfundoni shpejt me spam të palexueshëm të konsolës. Për shembull: [0,0,1,0,0,0.5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
A mund të thoni se çfarë butoni është shtypur? Ndoshta, por vetëm pasi t'i tendosni sytë dhe t'ju mungojnë disa hyrje. Pra, jo, korrigjimi nuk vjen lehtë kur bëhet fjalë për leximin e hyrjeve. Problemi 3: Mungesa e strukturës Edhe nëse bashkoni një vizualizues të shpejtë, stilet mund të bëhen shpejt të çrregullt. Gjendjet e parazgjedhura, aktive dhe korrigjimi mund të mbivendosen, dhe pa një strukturë të qartë, CSS-ja juaj bëhet e brishtë dhe e vështirë për t'u zgjeruar. CSS Cascade Layers mund të ndihmojë. Ata grupojnë stilet në "shtresa" që janë të renditura sipas përparësisë, kështu që ju ndaloni së luftuari specifikën dhe supozoni, "Pse nuk shfaqet stili im i korrigjimit?" Në vend të kësaj, ju mbani shqetësime të veçanta:
Baza: Standardi, pamja fillestare e kontrolluesit. Aktive: Pikat kryesore për butonat e shtypur dhe shkopinjtë e lëvizur. Korrigjimi: Mbivendosjet për zhvilluesit (p.sh., leximet numerike, udhëzuesit, etj.).
Nëse do të përcaktonim shtresat në CSS sipas kësaj, do të kishim: /* prioriteti më i ulët në më të lartë */ bazë @layer, aktive, debug;
bazë e shtresës { /* ... */ }
@shtresa aktive { /* ... */ }
korrigjimi i @shtresës { /* ... */ }
Për shkak se çdo shtresë grumbullohet në mënyrë të parashikueshme, ju gjithmonë e dini se cilat rregulla fitojnë. Kjo parashikueshmëri e bën korrigjimin jo vetëm më të lehtë, por në fakt të menaxhueshëm. Ne kemi mbuluar problemin (hyrje të padukshme, të çrregullt) dhe qasjen (një korrigjues vizual i ndërtuar me shtresat Cascade). Tani do të ecim përmes procesit hap pas hapi për të ndërtuar korrigjuesin. Koncepti i korrigjuesit Mënyra më e lehtë për ta bërë të dukshme hyrjen e fshehur është thjesht ta vizatoni atë në ekran. Kjo është ajo që bën ky korrigjues. Butonat, këmbëzat dhe levërat marrin një pamje vizuale.
Shtypni A: Ndizet një rreth. Shtyni shkopin: Rrethi rrëshqet përreth. Tërhiqni një këmbëzë përgjysmë: Një shirit mbushet përgjysmë.
Tani nuk po shikoni 0 dhe 1, por në fakt po shikoni kontrolluesin të reagojë drejtpërdrejt. Sigurisht, sapo të filloni të grumbulloni gjendje si të paracaktuara, të shtypura, të korrigjimit të informacionit, ndoshta edhe një modalitet regjistrimi, CSS fillon të bëhet më i madh dhe më kompleks. Kjo është ajo ku shtresat e kaskadës vijnë në ndihmë. Këtu është një shembull i zhveshur: bazë e shtresës { .buton { sfond: #222; kufi-rrezja: 50%; gjerësia: 40 px; lartësia: 40 px; } }
@shtresa aktive { .buton.shtypet { sfond: #0f0; /* jeshile e ndezur */ } }
korrigjimi i @shtresës { .buton::pas { përmbajtja: attr(vlera e të dhënave); madhësia e shkronjave: 12 px; ngjyra: #fff; } }
Rendi i shtresave ka rëndësi: bazë → aktiv → korrigjim.
baza tërheq kontrolluesin. aktive trajton gjendjet e shtypura. debug hedh në mbivendosje.
Thyerja e tij në këtë mënyrë do të thotë që nuk po luftoni luftëra të çuditshme specifike. Çdo shtresë ka vendin e vet, dhe ju gjithmonë e dini se çfarë fiton. Ndërtimi i saj Le të marrim diçka në ekran së pari. Nuk ka nevojë të duket mirë - thjesht duhet të ekzistojë që të kemi me çfarë të punojmë.
Gamepad Cascade Debugger
Këto janë fjalë për fjalë vetëm kuti. Ende jo emocionuese, por na jep doreza për t'u rrëmbyer më vonë me CSS dhe JavaScript. Në rregull, unë po përdor shtresa kaskade këtu sepse i mban gjërat të organizuara sapo të shtoni më shumë gjendje. Këtu është një kalim i përafërt:
/* =================================== KONTROLLI I SHTRESAVE KASKADE Rendi ka rëndësi: bazë → aktiv → korrigjim =================================== */
/* Përcaktoni rendin e shtresave përpara */ bazë @layer, aktive, debug;
/* Shtresa 1: Stilet bazë - pamja e paracaktuar */ bazë e shtresës { .buton { sfond: #333; kufi-rrezja: 50%; gjerësia: 70 px; lartësia: 70 px; shfaqja: flex; justify-content: qendër; align-items: qendër; }
.pauzë { gjerësia: 20 px; lartësia: 70 px; sfond: #333; ekrani: inline-block; } }
/* Shtresa 2: Gjendjet aktive - trajton butonat e shtypur */ @shtresa aktive { .button.aktive { sfond: #0f0; /* Jeshile e ndezur kur shtypet */ transformimi: shkalla (1.1); /* Zmadhon pak butonin */ }
.pause.aktive { sfond: #0f0; transformimi: scaleY(1.1); /* Zgjatet vertikalisht kur shtypet */ } }
/* Shtresa 3: Korrigjimi i mbivendosjeve - informacioni i zhvilluesit */ korrigjimi i @shtresës { .buton::pas { përmbajtja: attr(vlera e të dhënave); /* Tregon vlerën numerike */ madhësia e shkronjave: 12 px; ngjyra: #fff; } }
E bukura e kësaj qasjeje është se çdo shtresë ka një qëllim të qartë. Shtresa bazë nuk mund të anashkalojë asnjëherë aktivin dhe aktivi nuk mund të anashkalojë kurrë korrigjimin e gabimeve, pavarësisht nga specifika. Kjo eliminon luftërat e specifikave të CSS që zakonisht dëmtojnë mjetet e korrigjimit. Tani duket sikur disa grupime janë ulur në një sfond të errët. Sinqerisht, jo shumë keq.
Shtimi i JavaScript Koha e JavaScript. Këtu kontrolluesi bën diçka. Ne do ta ndërtojmë këtë hap pas hapi. Hapi 1: Vendosni menaxhimin e shtetit Së pari, na duhen variabla për të gjurmuar gjendjen e korrigjuesit: // =================================== // MENAXHIMI SHTETËROR // ===================================
le running = false; // Gjurmon nëse korrigjuesi është aktiv le rafId; // Ruan ID-në e requestAnimationFrame për anulim
Këto variabla kontrollojnë ciklin e animacionit që lexon vazhdimisht hyrjen e tastierës së lojës. Hapi 2: Kap Referencat DOM Më pas, marrim referenca për të gjithë elementët HTML që do të përditësojmë: // =================================== // REFERENCAT E DOM ELEMENTIT // ===================================
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");
Ruajtja e këtyre referencave përpara është më efikase sesa kërkimi i përsëritur i DOM-it. Hapi 3: Shtoni kthimin e tastierës Për testim pa një kontrollues fizik, ne do t'i lidhim tastet e tastierës në butona: // =================================== // KRYESORE E KYBOARDIT (për testim pa kontrollues) // ===================================
harta e çelësit konst = { "a": btnA, "b": btnB, "x": btnX, "p": [pauzë1, pauzë2] // tasti 'p' kontrollon të dy shiritat e pauzës };
Kjo na lejon të testojmë ndërfaqen e përdoruesit duke shtypur tastet në një tastierë. Hapi 4: Krijo ciklin kryesor të përditësimit Ja ku ndodh magjia. Ky funksion funksionon vazhdimisht dhe lexon gjendjen e tastierës së lojës: // =================================== // LAKTI KRYESOR I PËRDITËSIMIT TË GAMEPADIT // ===================================
funksion updateGamepad() { // Merrni të gjitha tastierat e lidhura të lojës const gamepads = navigator.getGamepads(); nëse kthehen (!gamepads);
// Përdorni tastierën e parë të lidhur të lojës const gp = tastierë lojërash[0];
nëse (gp) { // Gjendjet e butonit të përditësimit duke ndryshuar klasën "aktive". btnA.classList.toggle("aktive", gp.buttons[0].shtypet); btnB.classList.toggle("aktiv", gp.buttons[1].shtypet); btnX.classList.toggle("aktiv", gp.buttons[2].shtypet);
// Butoni i dorëzimit të pauzës (indeksi i butonit 9 në shumicën e kontrollorëve) const pauseShtyp = gp.butons[9].shtypet; pause1.classList.toggle("aktive", pauseShtypur); pause2.classList.toggle("aktive", pauseShtypur);
// Ndërtoni një listë të butonave të shtypur aktualisht për shfaqjen e statusit le të shtypura = []; gp.buttons.forEach((btn, i) => { nëse (btn.shtypet)shtypur.shty ("Butoni " + i); });
// Përditëso tekstin e statusit nëse shtypet ndonjë buton nëse (shtypet.gjatësia > 0) { status.textContent = "Shtypet: " + shtypur.join(", "); } }
// Vazhdo ciklin nëse korrigjuesi po funksionon nëse (vrapon) { rafId = requestAnimationFrame (updateGamepad); } }
Metoda classList.toggle() shton ose heq klasën aktive bazuar në nëse butoni është shtypur, gjë që aktivizon stilet tona të shtresave CSS. Hapi 5: Trajtoni ngjarjet e tastierës Këta dëgjues të ngjarjeve bëjnë që kthimi i tastierës të funksionojë: // =================================== // TRAJTUESIT E NGJARJEVE TË TASTAJEVE // ===================================
document.addEventListener("keydown", (e) => { nëse (keyMap[e.key]) { // Trajtoni elemente të vetme ose të shumëfishta if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forSec (el => el.classList.add ("aktive")); } tjeter { keyMap[e.key].classList.add("aktive"); } status.textContent = "Testi i shtypur: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { nëse (keyMap[e.key]) { // Hiq gjendjen aktive kur lirohet tasti if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("aktiv")); } tjeter { keyMap[e.key].classList.remove("aktiv"); } status.textContent = "Çelësi i lëshuar: " + e.key.toUpperCase(); } });
Hapi 6: Shtoni kontrollin e fillimit/ndalimit Më në fund, na duhet një mënyrë për të ndezur dhe fikur korrigjuesin: // =================================== // AKTIVIZO/FIKUR DEBAGERIN // ===================================
document.getElementById("toggle").addEventListener("kliko", () => { vrapim = !vrapim; // Kthejeni gjendjen e funksionimit
nëse (vrapon) { status.textContent = "Debuguesi po funksionon..."; updateGamepad(); // Filloni ciklin e përditësimit } tjeter { status.textContent = "Debuguesi joaktiv"; anulojAnimationFrame(rafId); // Ndalo ciklin } });
Pra, po, shtypni një buton dhe ai shkëlqen. Shtyni shkopin dhe ai lëviz. Kjo është ajo. Edhe një gjë: vlerat e papërpunuara. Ndonjëherë ju thjesht dëshironi të shihni numrat, jo dritat.
Në këtë fazë, duhet të shihni:
Një kontrollues i thjeshtë në ekran, Butonat që reagojnë ndërsa ndërveproni me ta, dhe Një lexim opsional i korrigjimit të gabimeve që tregon indekset e butonit të shtypur.
Për ta bërë këtë më pak abstrakte, këtu është një demonstrim i shpejtë i kontrolluesit në ekran që reagon në kohë reale:
Tani, duke shtypur "Fillimi i regjistrimit" regjistron gjithçka derisa të shtypni "Ndalo regjistrimin". 2. Eksportimi i të dhënave në CSV/JSON Pasi të kemi një regjistër, ne do të duam ta ruajmë atë.
Hapi 1: Krijoni Ndihmësin e Shkarkimit Së pari, na duhet një funksion ndihmës që trajton shkarkimet e skedarëve në shfletues: // =================================== // NDIHMËSI I SHKARKIMIT TË FILE // ===================================
funksioni shkarkoFile (emri i skedarit, përmbajtja, lloji = "tekst/i thjeshtë") { // Krijo një pikë nga përmbajtja const blob = blob i ri ([përmbajtja], { lloji }); const url = URL.createObjectURL(blob);
// Krijoni një lidhje të përkohshme shkarkimi dhe klikoni mbi të const a = dokument.createElement("a"); a.href = url; a.shkarkim = emri i skedarit; a.kliko();
// Pastroni URL-në e objektit pas shkarkimit setTimeout(() => URL.revokeObjectURL(url), 100); }
Ky funksion funksionon duke krijuar një Blob (objekt i madh binar) nga të dhënat tuaja, duke gjeneruar një URL të përkohshme për të dhe duke klikuar në mënyrë programore një lidhje shkarkimi. Pastrimi siguron që ne të mos rrjedhim memorie. Hapi 2: Trajtoni JSON Export JSON është perfekt për të ruajtur strukturën e plotë të të dhënave:
// =================================== // EKSPORT SI JSON // ===================================
document.getElementById("export-json").addEventListener("kliko", () => { // Kontrolloni nëse ka ndonjë gjë për të eksportuar nëse (!korniza.gjatësia) { console.warn("Nuk disponohet regjistrim për eksport."); kthimi; }
// Krijoni një ngarkesë me meta të dhëna dhe korniza ngarkesë e vazhdueshme = { krijuar në: data e re().toISOSstring(), korniza };
// Shkarko si JSON të formatuar shkarko skedarin ( "gamepad-log.json", JSON.stringify (ngarkesë me pagesë, null, 2), "application/json" ); });
Formati JSON mban gjithçka të strukturuar dhe lehtësisht të analizueshme, duke e bërë atë ideal për t'u ngarkuar përsëri në mjetet e zhvillimit ose për t'u ndarë me shokët e skuadrës. Hapi 3: Trajtoni Eksportin CSV Për eksportet CSV, ne duhet të rrafshojmë të dhënat hierarkike në rreshta dhe kolona:
//=================================== // EKSPORT AS CSV // ===================================
document.getElementById("export-csv").addEventListener("kliko", () => { // Kontrolloni nëse ka ndonjë gjë për të eksportuar nëse (!korniza.gjatësia) { console.warn("Nuk disponohet regjistrim për eksport."); kthimi; }
// Ndërtoni rreshtin e kokës CSV (kolonat për vulën kohore, të gjithë butonat, të gjitha boshtet) const headerButtons = korniza[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => boshti${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Ndërtimi i rreshtave të të dhënave CSV rreshtat const = frames.map(f => { const btnVals = f.buttons.map(b => b.vlera); kthej [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Shkarko si CSV shkarkoFile ("gamepad-log.csv", kokë + rreshta, "tekst/csv"); });
CSV është e shkëlqyer për analizën e të dhënave sepse hapet drejtpërdrejt në Excel ose Google Sheets, duke ju lejuar të krijoni grafikët, të filtroni të dhënat ose të dalloni vizualisht modele. Tani që butonat e eksportit janë futur, do të shihni dy opsione të reja në panel: Eksporto JSON dhe Eksporto CSV. JSON është i këndshëm nëse doni të hidhni regjistrin e papërpunuar përsëri në veglat tuaja të zhvilluesit ose të hidhni rreth strukturës. CSV, nga ana tjetër, hapet direkt në Excel ose Google Sheets në mënyrë që të mund të grafikoni, filtroni ose krahasoni hyrjet. Figura e mëposhtme tregon se si duket paneli me ato kontrolle shtesë.
3. Sistemi i fotografive Ndonjëherë nuk keni nevojë për një regjistrim të plotë, vetëm një "screenshot" i shpejtë i gjendjeve të hyrjes. Këtu ndihmon një buton Merr fotografinë.
Dhe JavaScript:
// =================================== // BREJ FOTOGRAFI // ===================================
document.getElementById("snapshot").addEventListener("kliko", () => { // Merrni të gjitha tastierat e lidhura të lojës const pads = navigator.getGamepads(); const activePads = [];
// Shikoni dhe kapni gjendjen e çdo loje të lidhur për (konst gp të pads) { nëse (!gp) vazhdon; // Kapërceni lojërat e zbrazëta
activePads.push({ id: gp.id, // Emri/modeli i kontrolluesit vula kohore: performance.tani(), butonat: gp.buttons.map(b => ({ shtypur: b.shtypur, vlera: b.vlera })), akset: [...gp.akset] }); }
// Kontrollo nëse është gjetur ndonjë tastierë lojërash nëse (!activePads.length) { console.warn("Nuk ka tastierë lojërash të lidhura për fotografinë e çastit."); alarm ("Nuk u zbulua asnjë kontrollues!"); kthimi; }
// Regjistrohu dhe njofto përdoruesin console.log ("Snapshot:", ActivePads); alert(Pamja e marrë! Kontrollues i kapur ${activePads.length}); });
Fotot e çastit ngrijnë gjendjen e saktë të kontrolluesit tuaj në një moment në kohë. 4. Përsëritje e hyrjes së fantazmës Tani për atë argëtuese: rishikim i hyrjes së fantazmave. Kjo merr një regjistër dhe e luan atë vizualisht sikur një lojtar fantazmë të ishte duke përdorur kontrolluesin.
JavaScript për rishikim: // =================================== // PËRSËRITJE GHOST // ===================================
document.getElementById("riplay").addEventListener("kliko", () => { // Sigurohuni që të kemi një regjistrim për të riprodhuar nëse (!korniza.gjatësia) { alarm ("Nuk ka regjistrim për të riprodhuar!"); kthimi; }
console.log("Fillimi i riprodhimit të fantazmave...");
// Ndiqni kohën për riprodhimin e sinkronizuar le startTime = performance.tani(); le të kornizëIndeksi = 0;
// Riprodhimi i animacionit hapi i funksionit () { const tani = performanca.tani(); const elapsed = tani - start Time;
// Përpunoni të gjitha kornizat që duhet të kishin ndodhur deri tani ndërsa (frameIndex < frames.length && frames[frameIndex].t <= ka kaluar) { korniza konst = korniza[Indeksi i kornizës];
// Përditëso UI me gjendjet e butonit të regjistruar btnA.classList.toggle("aktiv", frame.butons[0].shtypet); btnB.classList.toggle("aktiv", frame.butons[1].shtypet); btnX.classList.toggle("aktiv", frame.butons[2].shtypet);
// Përditëso shfaqjen e statusit le të shtypura = []; frame.buttons.forEach((btn, i) => { nëse (btn.shtypet) shtypet.shty ("Butoni " + i); }); nëse (shtypet.gjatësia > 0) { status.textContent = "Ghost: " + shtypur.join(", "); }
frameIndex++; }
// Vazhdo ciklin nëse ka më shumë korniza if (frameIndex < frames.length) { requestAnimationFrame(hapi); } tjeter { console.log ("Riluajpërfunduar."); status.textContent = "Riluajtja përfundoi"; } }
// Filloni përsëritjen hap (); });
Për ta bërë korrigjimin pak më praktik, shtova një rishikim fantazmë. Pasi të keni regjistruar një seancë, mund të shtypni riprodhimin dhe të shikoni ndërfaqen e përdoruesit që e interpreton atë, pothuajse si një lojtar fantazmë që drejton bllokun. Një buton i ri Replay Ghost shfaqet në panel për këtë.
Shtypni Regjistro, ngatërroni pak me kontrolluesin, ndaloni dhe më pas riluajeni. UI thjesht i bën jehonë gjithçkaje që keni bërë, si një fantazmë që ndjek hyrjet tuaja. Pse të shqetësoheni me këto shtesa?
Regjistrimi/eksporti e bën të lehtë për testuesit të tregojnë saktësisht se çfarë ka ndodhur. Fotot e çastit ngrijnë një moment në kohë, super të dobishme kur jeni duke ndjekur defekte të çuditshme. Riprodhimi i fantazmave është i shkëlqyeshëm për mësime, kontrolle të aksesueshmërisë ose thjesht krahasimin e konfigurimeve të kontrollit krah për krah.
Në këtë pikë, nuk është më thjesht një demo e pastër, por diçka që mund ta vini në punë. Rastet e përdorimit të botës reale Tani kemi këtë korrigjues që mund të bëjë shumë. Ai tregon të dhëna të drejtpërdrejta, regjistron regjistrat, i eksporton ato dhe madje rishikon gjëra. Por pyetja e vërtetë është: kujt i intereson në të vërtetë? Për kë është kjo e dobishme? Zhvilluesit e lojërave Kontrollorët janë pjesë e punës, por korrigjimi i tyre? Zakonisht një dhimbje. Imagjinoni që po testoni një kombinim të lojës luftarake, si ↓ → + grusht. Në vend që të lutesh, e shtype dy herë në të njëjtën mënyrë, e regjistron një herë dhe e riprodhon. U krye. Ose ndërroni regjistrat e JSON me një shok ekipi për të kontrolluar nëse kodi juaj i shumë lojtarëve reagon njësoj në kompjuterin e tyre. Kjo është e madhe. Praktikuesit e aksesueshmërisë Kjo më është afër zemrës. Jo të gjithë luajnë me një kontrollues "standard". Kontrollorët përshtatës hedhin sinjale të çuditshme ndonjëherë. Me këtë mjet, ju mund të shihni saktësisht se çfarë po ndodh. Mësues, studiues, kushdo qoftë. Ata mund të kapin regjistrat, t'i krahasojnë ato ose të rishikojnë hyrjet krah për krah. Papritur, gjërat e padukshme bëhen të dukshme. Testimi i Sigurimit të Cilësisë Testuesit zakonisht shkruajnë shënime si "Kam bërë pure butonat këtu dhe u thyen". Jo shumë e dobishme. Tani? Ata mund të kapin shtypjet e sakta, të eksportojnë regjistrin dhe ta dërgojnë atë. Asnjë hamendje. Edukatoret Nëse jeni duke bërë mësime ose video në YouTube, riprodhimi i fantazmave është i artë. Ju mund të thoni fjalë për fjalë, "Ja çfarë bëra me kontrolluesin", ndërsa UI tregon se po ndodh. I bën shpjegimet shumë më të qarta. Përtej Lojërave Dhe po, kjo nuk ka të bëjë vetëm me lojërat. Njerëzit kanë përdorur kontrollues për robotët, projektet e artit dhe ndërfaqet e aksesueshmërisë. E njëjta çështje çdo herë: çfarë po sheh në të vërtetë shfletuesi? Me këtë, nuk keni pse të merrni me mend. konkluzioni Korrigjimi i një hyrjeje kontrolluesi është ndjerë gjithmonë si fluturim i verbër. Ndryshe nga DOM ose CSS, nuk ka inspektor të integruar për tastierë lojërash; janë thjesht numra të papërpunuar në tastierë, që humbasin lehtësisht në zhurmë. Me disa qindra rreshta HTML, CSS dhe JavaScript, ne ndërtuam diçka ndryshe:
Një korrigjues vizual që i bën të dukshme hyrjet e padukshme. Një sistem CSS me shtresa që e mban ndërfaqen të pastër dhe të korrigjueshme. Një grup përmirësimesh (regjistrimi, eksportimi, fotografitë e çastit, riprodhimi i fantazmave) që e ngritin atë nga demo në mjet zhvilluesi.
Ky projekt tregon se sa larg mund të shkoni duke përzier fuqinë e Platformës së Uebit me pak kreativitet në shtresat e kaskadës së CSS. Mjeti që sapo shpjegova në tërësi është me burim të hapur. Mund të klononi repon e GitHub dhe ta provoni vetë. Por më e rëndësishmja, ju mund ta bëni atë tuajën. Shtoni shtresat tuaja. Ndërtoni logjikën tuaj të riprodhimit. Integrojeni atë me prototipin tuaj të lojës. Ose edhe ta përdor në mënyra që nuk e kam imagjinuar. Për mësimdhënien, aksesueshmërinë ose analizën e të dhënave. Në fund të fundit, kjo nuk ka të bëjë vetëm me korrigjimin e tastierëve të lojës. Bëhet fjalë për ndriçimin e inputeve të fshehura dhe për t'u dhënë zhvilluesve besimin për të punuar me pajisje që ueb-i ende nuk e përqafon plotësisht. Pra, futni kontrolluesin tuaj, hapni redaktorin tuaj dhe filloni të eksperimentoni. Ju mund të habiteni se çfarë mund të arrijnë vërtet shfletuesi juaj dhe CSS juaj.
