Kai prijungiate valdiklį, sutrinate mygtukus, judinate lazdeles, traukiate gaidukus… ir kaip kūrėjas to nematote. Žinoma, naršyklė jį paima, bet nebent konsolėje registruojate numerius, jis nematomas. Tai galvos skausmas dėl Gamepad API. Jis gyvuoja daugelį metų ir iš tikrųjų yra gana galingas. Galite skaityti mygtukus, lazdeles, gaidukus, kūrinius. Tačiau dauguma žmonių to neliečia. Kodėl? Nes atsiliepimų nėra. Kūrėjo įrankiuose nėra skydelio. Nėra aiškaus būdo sužinoti, ar valdytojas netgi daro tai, ką manote. Toks jausmas, lyg skristum aklas. Tai mane pakankamai suglumino, kad galėčiau sukurti nedidelį įrankį: Gamepad Cascade Debugger. Užuot žiūrėję į konsolės išvestį, gausite tiesioginį interaktyvų valdiklio vaizdą. Paspauskite ką nors ir jis sureaguos ekrane. O naudojant CSS kaskadinius sluoksnius stiliai išlieka tvarkingi, todėl lengviau derinti. Šiame įraše parodysiu, kodėl valdiklių derinimas yra toks sunkus, kaip CSS padeda jį išvalyti ir kaip galite sukurti daugkartinį vaizdinį derintuvą savo projektams.
Net jei galėsite juos visus užregistruoti, greitai atsiras neįskaitomas pulto šlamštas. Pavyzdžiui: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Ar galite pasakyti, koks mygtukas buvo paspaustas? Galbūt, bet tik įtempus akis ir pritrūkus kelių įėjimų. Taigi, ne, derinti nėra lengva, kai reikia skaityti įvestis. 3 problema: struktūros trūkumas Net jei surinksite greitą vizualizavimo priemonę, stiliai gali greitai susigadinti. Numatytoji, aktyvioji ir derinimo būsenos gali sutapti, o be aiškios struktūros jūsų CSS tampa trapus ir sunkiai išplečiamas. CSS kaskados sluoksniai gali padėti. Jie sugrupuoja stilius į „sluoksnius“, kurie yra išdėstyti pagal prioritetą, todėl nustojate kovoti su konkretumu ir spėlioti: „Kodėl nerodomas mano derinimo stilius? Vietoj to jūs išlaikote atskirus rūpesčius:
Pagrindas: standartinė valdiklio, pradinė išvaizda. Aktyvus: paspaustų mygtukų ir perkeltų lazdelių akcentai. Derinimas: kūrėjams skirtos perdangos (pvz., skaitiniai rodmenys, vadovai ir pan.).
Jei pagal tai apibrėžtume sluoksnius CSS, turėtume: /* nuo žemiausio iki aukščiausio prioriteto */ @layer base, aktyvus, derinti;
@sluoksnio bazė { /* ... */ }
@sluoksnis aktyvus { /* ... */ }
@sluoksnio derinimas { /* ... */ }
Kadangi kiekvienas sluoksnis kaupiasi nuspėjamai, visada žinote, kurios taisyklės laimi. Dėl šio nuspėjamumo derinimas yra ne tik lengvesnis, bet ir valdomas. Aptarėme problemą (nematoma, netvarkinga įvestis) ir metodą (vizualinis derinimo įrankis, sukurtas naudojant „Cascade Layers“). Dabar žingsnis po žingsnio apžvelgsime derinimo priemonės kūrimo procesą. Debugger koncepcija Lengviausias būdas paslėptą įvestį padaryti matomą – tiesiog nupiešti ją ekrane. Būtent tai daro šis derintuvas. Mygtukai, paleidikliai ir vairasvirtės suteikia vaizdą.
Paspauskite A: užsidega apskritimas. Pastumkite lazdą: ratas slysta aplinkui. Patraukite gaiduką iki pusės: juosta prisipildo iki pusės.
Dabar žiūrite ne į 0 ir 1, o iš tikrųjų stebite valdiklio reakciją tiesiogiai. Žinoma, pradėjus kaupti tokias būsenas kaip numatytasis, paspaustas, derinimo informacija, galbūt net įrašymo režimas, CSS pradeda didėti ir sudėtingėti. Štai čia praverčia kaskadiniai sluoksniai. Čia yra sutrumpintas pavyzdys: @sluoksnio bazė { .button { fonas: #222; sienos spindulys: 50%; plotis: 40px; aukštis: 40px; } }
@sluoksnis aktyvus { .button.pressed { fonas: #0f0; /* ryškiai žalia */ } }
@sluoksnio derinimas { .button::after { turinys: attr(duomenų vertė); šrifto dydis: 12 pikselių; spalva: #fff; } }
Svarbi sluoksnių tvarka: bazė → aktyvus → derinimas.
bazė traukia valdiklį. aktyvios rankenos prispaustas būsenas. derinimo metimai ant perdangų.
Taip suskaidydami, jūs nekariaujate keistų specifiškumo karų. Kiekvienas sluoksnis turi savo vietą, ir jūs visada žinote, kas laimi. Sukurti jį Pirmiausia ką nors parodykime ekrane. Tai neturi atrodyti gerai – tiesiog turi egzistuoti, kad turėtume su kuo dirbti.
Žaidimų pultelio pakopinis derinimo įrankis
Tai tiesiog dėžės. Kol kas neįdomu, bet tai suteikia mums rankenėlių, kurias vėliau galima patraukti naudojant CSS ir JavaScript. Gerai, čia naudoju pakopinius sluoksnius, nes pridėjus daugiau būsenų viskas sutvarkyta. Štai apytikslis leidimas:
/* ==================================== KASKADINIŲ sluoksnių NUSTATYMAS Tvarkos reikalai: bazė → aktyvus → derinimas ==================================== */
/* Iš anksto apibrėžkite sluoksnių tvarką */ @layer base, aktyvus, derinti;
/* 1 sluoksnis: pagrindiniai stiliai – numatytoji išvaizda */ @sluoksnio bazė { .button { fonas: #333; sienos spindulys: 50%; plotis: 70px; aukštis: 70px; ekranas: lankstus; pateisinti-turinys: centras; lygiuoti elementus: centre; }
.pause { plotis: 20px; aukštis: 70px; fonas: #333; ekranas: eilutinis blokas; } }
/* 2 sluoksnis: aktyvios būsenos – paspaudžiami mygtukai */ @sluoksnis aktyvus { .button.active { fonas: #0f0; /* Paspaudus ryškiai žalia */ transformuoti: mastelis(1.1); /* Šiek tiek padidina mygtuką */ }
.pause.active { fonas: #0f0; transformuoti: skalėY(1.1); /* Paspaudus išsitempia vertikaliai */ } }
/* 3 sluoksnis: derinimo perdangos – informacija apie kūrėją */ @sluoksnio derinimas { .button::after { turinys: attr(duomenų vertė); /* Rodo skaitinę reikšmę */ šrifto dydis: 12 pikselių; spalva: #fff; } }
Šio požiūrio grožis yra tas, kad kiekvienas sluoksnis turi aiškų tikslą. Bazinis sluoksnis niekada negali nepaisyti aktyvaus, o aktyvus niekada negali nepaisyti derinimo, neatsižvelgiant į specifiškumą. Tai pašalina CSS specifiškumo karus, kurie paprastai vargina derinimo įrankius. Dabar atrodo, kad kai kurios klasteriai sėdi tamsiame fone. Sąžiningai, nėra labai blogai.
„JavaScript“ pridėjimas JavaScript laikas. Čia valdiklis iš tikrųjų kažką daro. Mes tai sukursime žingsnis po žingsnio. 1 veiksmas: nustatykite valstybės valdymą Pirma, mums reikia kintamųjų, kad galėtume stebėti derintuvo būseną: // ==================================== // VALSTYBĖS VALDYMAS // ====================================
tegul veikia = false; // Stebi, ar derinimo priemonė yra aktyvi tegul rafId; // Saugo requestAnimationFrame ID atšaukimui
Šie kintamieji valdo animacijos kilpą, kuri nuolat skaito žaidimų pulto įvestį. 2 veiksmas: paimkite DOM nuorodas Tada gauname nuorodas į visus HTML elementus, kuriuos atnaujinsime: // ==================================== // KULO ELEMENTŲ NUORODOS // ====================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pauzė1"); const pause2 = document.getElementById("pauzė2"); const status = document.getElementById("statusas");
Šių nuorodų saugojimas iš anksto yra efektyvesnis nei pakartotinis DOM užklausų pateikimas. 3 veiksmas: pridėkite atsarginę klaviatūrą Jei norite išbandyti be fizinio valdiklio, klaviatūros klavišus susiesime su mygtukais: // ==================================== // KLAVIATŪROS ATGALINIMAS (tikrinimui be valdiklio) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pauzė1, pauzė2] // klavišas 'p' valdo abi pauzės juostas };
Tai leidžia išbandyti vartotojo sąsają paspausdami klaviatūros klavišus. 4 veiksmas: sukurkite pagrindinę naujinimo kilpą Štai kur vyksta magija. Ši funkcija veikia nuolat ir nuskaito žaidimų pulto būseną: // ==================================== // PAGRINDINĖ ŽAIDIMO ĮRENGINIO NAUJINIMO KILPA // ====================================
function updateGamepad() { // Gaukite visas prijungtas žaidimų pultelius const gamepads = navigator.getGamepads(); if (!gamepad) grįžti;
// Naudokite pirmą prijungtą žaidimų pultą const gp = žaidimų pultai[0];
if (gp) { // Atnaujinkite mygtuko būsenas perjungdami „aktyvią“ klasę btnA.classList.toggle("aktyvus", gp.buttons[0].pressed); btnB.classList.toggle("aktyvus", gp.buttons[1].pressed); btnX.classList.toggle("aktyvus", gp.buttons[2].pressed);
// Laikykite pauzės mygtuką (9 mygtuko indeksas daugelyje valdiklių) const pausePressed = gp.mygtukai[9].paspausta; pause1.classList.toggle("aktyvus", pausePressed); pause2.classList.toggle("aktyvus", pausePressed);
// Sudarykite šiuo metu paspaustų mygtukų sąrašą būsenai rodyti tegul paspaustas = []; gp.buttons.forEach((btn, i) => { jei (btn.pressed)paspaustas.push("Mygtukas " + i); });
// Atnaujinkite būsenos tekstą, jei paspaudžiami mygtukai if (paspaustas.ilgis > 0) { status.textContent = "Paspausta: " + pressed.join(", "); } }
// Tęskite ciklą, jei veikia derinimo priemonė if (bėga) { rafId = requestAnimationFrame(atnaujintiGamepad); } }
Metodas classList.toggle() prideda arba pašalina aktyvią klasę pagal tai, ar mygtukas paspaustas, o tai suaktyvina mūsų CSS sluoksnių stilius. 5 veiksmas: tvarkykite klaviatūros įvykius Dėl šių įvykių klausytojų atsarginė klaviatūra veikia: // ==================================== // KLAVIATŪROS RENGINIŲ TVARKYTOJAI // ====================================
document.addEventListener("keydown", (e) => { if (keyMap[e.key]) { // Tvarkyti vieną arba kelis elementus if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("aktyvus")); } dar { keyMap[e.key].classList.add("aktyvus"); } status.textContent = "Paspaustas klavišas: " + e.key.toUpperCase(); } });
document.addEventListener("raktas", (e) => { if (keyMap[e.key]) { // Pašalinkite aktyvią būseną, kai atleidžiamas klavišas if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("aktyvus")); } dar { keyMap[e.key].classList.remove("aktyvus"); } status.textContent = "Raktas paleistas: " + e.key.toUpperCase(); } });
6 veiksmas: pridėkite paleidimo / sustabdymo valdiklį Galiausiai mums reikia būdo, kaip įjungti ir išjungti derintuvą: // ==================================== // ĮJUNGTI DERINČIŲ ĮJUNGTI / IŠJUNGTI // ====================================
document.getElementById("toggle").addEventListener("click", () => { bėgimas = !bėgimas; // Apverskite veikimo būseną
if (bėga) { status.textContent = "Derinimo priemonė veikia..."; updateGamepad (); // Pradėkite atnaujinimo ciklą } dar { status.textContent = "Debugger neaktyvus"; cancelAnimationFrame(rafId); // Sustabdykite kilpą } });
Taip, paspauskite mygtuką ir jis šviečia. Pastumkite lazdą ir ji juda. tai viskas. Dar vienas dalykas: neapdorotos vertybės. Kartais norisi matyti tik skaičius, o ne šviesas.
Šiame etape turėtumėte pamatyti:
Paprastas ekrano valdiklis, Mygtukai, kurie reaguoja jums sąveikaujant su jais ir Pasirenkamas derinimo rodinys, rodantis paspaustų mygtukų indeksus.
Kad tai būtų mažiau abstraktu, pateikiame trumpą ekrano valdiklio, reaguojančio realiuoju laiku, demonstraciją:
Dabar paspaudus Pradėti įrašymą viskas registruojama, kol paspausite Stop Recording. 2. Duomenų eksportavimas į CSV / JSON Kai turėsime žurnalą, norėsime jį išsaugoti.
1 veiksmas: sukurkite atsisiuntimo pagalbininką Pirmiausia mums reikia pagalbinės funkcijos, kuri tvarko failų atsisiuntimą naršyklėje: // ==================================== // FAILŲ ATSISIUNTIMO PAGALBINĖLIS // ====================================
function downloadFile(failo pavadinimas, turinys, tipas = "tekstas/paprastas") { // Sukurkite dėmę iš turinio const blob = new Blob ([turinys], { tipas }); const url = URL.createObjectURL(blob);
// Sukurkite laikiną atsisiuntimo nuorodą ir spustelėkite ją const a = document.createElement("a"); a.href = url; a.download = failo pavadinimas; a.click();
// Atsisiuntę išvalykite objekto URL setTimeout(() => URL.revokeObjectURL(url), 100); }
Ši funkcija veikia sukuriant Blob (dvejetainį didelį objektą) iš jūsų duomenų, sugeneruojant jam laikiną URL ir programiškai spustelėjus atsisiuntimo nuorodą. Išvalymas užtikrina, kad nenutekėtų atminties. 2 veiksmas: tvarkykite JSON eksportavimą JSON puikiai tinka norint išsaugoti visą duomenų struktūrą:
// ==================================== // EKSPORTUOTI KAIP JSON // ====================================
document.getElementById("export-json").addEventListener("click", () => { // Patikrinkite, ar yra ką eksportuoti if (!frames.length) { console.warn("Negalima eksportuoti įrašų."); grąžinti; }
// Sukurkite naudingą apkrovą su metaduomenimis ir rėmeliais const apkrova = { sukurta: nauja data().toISOString(), rėmeliai };
// Atsisiųsti kaip suformatuotą JSON atsisiųsti failą ( "gamepad-log.json", JSON.stringify(naudinga apkrova, null, 2), "application/json" ); });
JSON formatu viskas yra struktūrizuota ir lengvai išanalizuojama, todėl puikiai tinka įkelti atgal į kūrimo įrankius arba dalytis su komandos draugais. 3 veiksmas: tvarkykite CSV eksportavimą Norėdami eksportuoti CSV, turime suploti hierarchinius duomenis į eilutes ir stulpelius:
//==================================== // EKSPORTUOTI KAIP CSV // ====================================
document.getElementById("export-csv").addEventListener("click", () => { // Patikrinkite, ar yra ką eksportuoti if (!frames.length) { console.warn("Negalima eksportuoti įrašų."); grąžinti; }
// Sukurti CSV antraštės eilutę (laiko žymos stulpeliai, visi mygtukai, visos ašys) const headerButtons = rėmeliai[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Sukurkite CSV duomenų eilutes const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); return [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Atsisiųsti kaip CSV downloadFile("gamepad-log.csv", antraštė + eilutės, "text/csv"); });
CSV puikiai tinka duomenų analizei, nes jis atidaromas tiesiogiai „Excel“ arba „Google“ skaičiuoklėse, todėl galite kurti diagramas, filtruoti duomenis arba vizualiai nustatyti šablonus. Dabar, kai yra eksportavimo mygtukai, skydelyje pamatysite dvi naujas parinktis: Eksportuoti JSON ir Eksportuoti CSV. JSON puikiai tinka, jei norite grąžinti neapdorotą žurnalą į savo kūrimo įrankius arba apžvelgti struktūrą. Kita vertus, CSV atidaromas tiesiai į „Excel“ arba „Google“ skaičiuokles, kad galėtumėte sudaryti diagramas, filtruoti arba palyginti įvestis. Toliau pateiktame paveikslėlyje parodyta, kaip skydelis atrodo su šiais papildomais valdikliais.
3. Momentinių nuotraukų sistema Kartais jums nereikia viso įrašo, užtenka greitos įvesties būsenų „ekrano kopijos“. Čia padeda mygtukas Take Snapshot.
Ir JavaScript:
// ==================================== // TAKE SNAPSHOT // ====================================
document.getElementById("snapshot").addEventListener("click", () => { // Gaukite visas prijungtas žaidimų pultelius const pads = navigator.getGamepads(); const activePads = [];
// Peržiūrėkite ir užfiksuokite kiekvieno prijungto žaidimų pulto būseną for (const gp of pads) { if (!gp) tęsti; // Praleisti tuščias vietas
activePads.push({ id: gp.id, // Valdiklio pavadinimas/modelis laiko žyma: performance.now(), mygtukai: gp.buttons.map(b => ({ paspaustas: b.paspaustas, vertė: b.vertė })), ašys: [...gp.axes] }); }
// Patikrinkite, ar nerasta žaidimų pultelių if (!activePads.length) { console.warn("Jokių žaidimų pultelių neprijungta momentinei nuotraukai."); alert("Neaptiktas joks valdiklis!"); grąžinti; }
// Prisijunkite ir praneškite vartotojui console.log ("Momentinė nuotrauka:", aktyviosios plokštės); alert (Snapshot padaryta! Užfiksuotas ${activePads.length} valdiklis (-iai).); });
Momentinės nuotraukos vienu metu užfiksuoja tikslią valdiklio būseną. 4. Ghost Input Replay Dabar įdomus dalykas: vaiduoklio įvesties atkūrimas. Tai paima žurnalą ir atkuria jį vizualiai, tarsi valdiklį naudotų fantominis grotuvas.
„JavaScript“ pakartojimui: // ==================================== // GROST REPLAY // ====================================
document.getElementById("pakartoti").addEventListener("click", () => { // Įsitikinkite, kad turime įrašą, kurį norite atkurti if (!frames.length) { alert("Nėra įrašymo, kurį būtų galima pakartoti!"); grąžinti; }
console.log("Pradedamas vaiduoklio pakartojimas...");
// Sinchronizuoto atkūrimo takelio laikas tegul startTime = performance.now(); tegul frameIndex = 0;
// Pakartoti animacijos kilpą function step() { const now = performance.now(); const praėjo = dabar - startTime;
// Apdorokite visus kadrus, kurie jau turėjo įvykti while (frameIndex < frames.length && frames[frameIndex].t <= praėjo) { const kadras = kadrai[frameIndex];
// Atnaujinkite vartotojo sąsają naudodami įrašytų mygtukų būsenas btnA.classList.toggle("aktyvus", rėmas.mygtukai[0].paspaustas); btnB.classList.toggle("aktyvus", rėmas.mygtukai[1].paspaustas); btnX.classList.toggle("aktyvus", rėmas.mygtukai[2].paspaustas);
// Atnaujinti būsenos rodymą tegul paspaustas = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push("Button " + i); }); if (paspaustas.ilgis > 0) { status.textContent = "Vaiduoklis: " + pressed.join(", "); }
frameIndex++; }
// Tęsti kilpą, jei yra daugiau kadrų if (frameIndex < frames.length) { requestAnimationFrame(žingsnis); } dar { console.log ("Pakartotibaigta."); status.textContent = "Atkūrimas baigtas"; } }
// Pradėkite kartojimą žingsnis (); });
Kad derinimas būtų šiek tiek praktiškesnis, pridėjau vaiduoklio pakartojimą. Įrašę seansą, galite spustelėti pakartojimą ir žiūrėti, kaip vartotojo sąsaja tai atlieka, beveik taip, lyg fantominis grotuvas paleistų pultą. Tam skydelyje pasirodo naujas mygtukas „Replay Ghost“.
Spustelėkite Įrašyti, šiek tiek pavaldykite valdiklį, sustokite, tada paleiskite iš naujo. NS tiesiog kartoja viską, ką darėte, kaip vaiduoklis, sekantis jūsų įvestis. Kam nerimauti dėl šių priedų?
Įrašydami / eksportuodami testuotojai gali lengvai parodyti, kas tiksliai atsitiko. Momentinės nuotraukos akimirksniu užstringa, o tai labai naudinga, kai ieškote keistų klaidų. Vaiduoklių pakartojimas puikiai tinka mokymo programoms, prieinamumo patikrinimams ar tiesiog valdymo sąrankų palyginimui.
Šiuo metu tai nebėra tik tvarkinga demonstracinė versija, bet tai, ką iš tikrųjų galite pritaikyti. Realaus pasaulio naudojimo atvejai Dabar turime šį derintuvą, kuris gali daug nuveikti. Tai rodo tiesioginę įvestį, įrašo žurnalus, eksportuoja juos ir netgi atkuria dalykus. Tačiau tikrasis klausimas yra toks: kam iš tikrųjų tai rūpi? Kam tai naudinga? Žaidimo kūrėjai Valdikliai yra darbo dalis, bet juos derinti? Paprastai skausmas. Įsivaizduokite, kad išbandote kovinio žaidimo kombinaciją, pvz., ↓ → + smūgis. Užuot meldęsi, du kartus paspaudei taip pat, vieną kartą įrašai ir pakartoji. Atlikta. Arba pakeisite JSON žurnalus su komandos draugu, kad patikrintumėte, ar jūsų kelių žaidėjų kodas reaguoja taip pat jų kompiuteryje. Tai didžiulis. Prieinamumo specialistai Šitas man prie širdies. Ne visi žaidžia su „standartiniu“ valdikliu. Prisitaikantys valdikliai kartais skleidžia keistus signalus. Naudodami šį įrankį galite tiksliai pamatyti, kas vyksta. Mokytojai, tyrėjai, bet kas. Jie gali paimti žurnalus, juos palyginti arba atkurti įvestis greta. Staiga nematomi dalykai tampa akivaizdūs. Kokybės užtikrinimo testavimas Bandytojai paprastai rašo pastabas, pvz., „Aš čia sutryniau mygtukus ir jis sugedo“. Nelabai naudinga. Dabar? Jie gali užfiksuoti tikslius presus, eksportuoti žurnalą ir išsiųsti. Jokių spėlionių. Pedagogai Jei kuriate mokymo programas ar „YouTube“ vaizdo įrašus, vaiduoklio atkūrimas yra auksinis. Galite tiesiogine prasme pasakyti: „Štai ką aš padariau su valdikliu“, o vartotojo sąsaja rodo, kad tai vyksta. Paaiškinimai tampa aiškesni. Be žaidimų Ir taip, tai ne tik žaidimai. Žmonės naudojo valdiklius robotams, meno projektams ir prieinamumo sąsajoms. Kiekvieną kartą ta pati problema: ką iš tikrųjų mato naršyklė? Turėdami tai, jums nereikia spėlioti. Išvada Valdiklio įvesties derinimas visada atrodė kaip aklas. Skirtingai nei DOM ar CSS, nėra įmontuoto žaidimų pultelių inspektoriaus; tai tik neapdoroti skaičiai konsolėje, lengvai pasimeta triukšme. Su keliais šimtais HTML, CSS ir JavaScript eilučių sukūrėme kažką kitokio:
Vaizdinis derinimo įrankis, kuris daro nematomas įvestis matomas. Sluoksniuota CSS sistema, kuri palaiko švarią vartotojo sąsają ir leidžia ją derinti. Patobulinimų rinkinys (įrašymas, eksportavimas, momentinės nuotraukos, vaiduoklio atkūrimas), kurie pakelia jį nuo demonstracinės versijos iki kūrėjo įrankio.
Šis projektas parodo, kiek toli galite nueiti sumaišę žiniatinklio platformos galią ir šiek tiek kūrybiškumo CSS kaskados sluoksniuose. Įrankis, kurį ką tik paaiškinau, yra atvirojo kodo. Galite klonuoti „GitHub“ repo ir išbandyti patys. Bet dar svarbiau, kad galite tai padaryti patys. Pridėkite savo sluoksnius. Sukurkite savo pakartojimo logiką. Integruokite jį su žaidimo prototipu. Arba netgi panaudoti tai būdais, kurių neįsivaizdavau. Mokymui, prieinamumui ar duomenų analizei. Galų gale, tai ne tik žaidimų skydelių derinimas. Tai yra paslėptų įvesties apšvietimas ir pasitikėjimo kūrėjams suteikimas dirbti su aparatine įranga, kurios žiniatinklis vis dar visiškai neapima. Taigi, prijunkite valdiklį, atidarykite redaktorių ir pradėkite eksperimentuoti. Galbūt nustebsite, ką iš tikrųjų gali pasiekti jūsų naršyklė ir jūsų CSS.
