Dolandyryjy dakanyňyzda, düwmeleri süpürýärsiňiz, taýaklary süýşürýärsiňiz, triggerleri çekýärsiňiz ... we dörediji hökmünde siz hiç birini görmeýärsiňiz. Brauzeriň ony alýandygy şübhesiz, ýöne konsolda san ýazmasaňyz, görünmeýär. “Gamepad API” bilen kelle agyry. Birnäçe ýyl bäri dowam edýär we hakykatdanam gaty güýçli. Düwmeleri, taýaklary, triggerleri, eserleri okap bilersiňiz. Emma köpler oňa degenok. Näme üçin? Sebäbi seslenme ýok. Öndüriji gurallarynda panel ýok. Gözegçiniň hatda pikir edýän zadyňyzy edýändigini ýa-da ýokdugyny bilmek üçin anyk ýol ýok. Özüni kör uçýan ýaly duýýar. Bu maňa azajyk gural gurmak üçin ýeterlik boldy: Gamepad Cascade Debugger. Konsol çykyşyna seretmegiň ýerine, kontrolleýjiniň göni, interaktiw görnüşini alarsyňyz. Bir zady basyň we ekranda reaksiýa berýär. CSS Cascade Layers bilen stil tertipli bolýar, şonuň üçin çözmek has arassa. Bu ýazgyda, düzediş gözegçileriniň näme üçin beýle agyrydygyny, CSS-iň arassalanmagyna nähili kömek edýändigini we öz taslamalaryňyz üçin gaýtadan ulanylýan wizual düzüjini nädip gurup boljakdygyny size görkezerin.
Bularyň hemmesini hasaba alyp bilseňizem, okalmaýan konsol spamy bilen çalt gutarsyňyz. Mysal üçin: [0,0,1,0,0,0.5,0, ...] [0,0,0,0,1,0,0, ...] [0,0,1,0,0,0,0, ...]
Haýsy düwmä basylandygyny aýdyp bilersiňizmi? Mümkin, ýöne diňe gözüňizi süzüp, birnäçe giriş ýitireniňizden soň. Diýmek, girişleri okamak meselesinde düzediş aňsatlaşmaýar. 3-nji mesele: gurluşyň ýoklugy Çalt wizualizatory bir ýere jemleseňizem, stiller çalt bulaşyp biler. Bellenen, işjeň we düzediş ýagdaýlary biri-birine gabat gelip biler we anyk gurluşy bolmazdan, CSS-iňiz döwülýär we uzaldylýar. CSS kaskad gatlaklary kömek edip biler. Olar stilleri ileri tutulýan tertip boýunça “gatlaklara” bölýärler, şonuň üçin siz aýratynlyga garşy göreşmegi bes edýärsiňiz we “Näme üçin düzediş stilim görkezilmeýär?” Diýip çaklaýarsyňyz. Munuň ýerine, aýratyn aladalary saklaýarsyňyz:
Esasy: Dolandyryjynyň standart, başlangyç görnüşi. Işjeň: Basylan düwmeler we göçürilen taýaklar üçin esasy pursatlar. Düzediş: Döredijiler üçin örtükler (meselem, san okaýyşlary, gollanmalar we ş.m.).
CSS-de gatlaklary şoňa görä kesgitlemeli bolsak, bizde: / * iň pes derejeden ileri tutulýan * / @ oýunçy bazasy, işjeň, düzediş;
@ oýunçy bazasy { / * ... * / }
@ oýunçy işjeň { / * ... * / }
@ oýunçy düzeltmek { / * ... * / }
Her gatlak öňünden kesgitlenýänligi sebäpli, haýsy düzgünleriň ýeňýändigini hemişe bilýärsiňiz. Bu öňünden aýdylýanlygy düzetmek diňe bir aňsat däl, aslynda dolandyryp bolýar. Meseläni (göze görünmeýän, bulaşyk giriş) we çemeleşmäni (Cascade Layers bilen gurlan wizual düzediji) ýapdyk. Indi düzediji gurmak üçin ädimme-ädim geçeris. Düzediş düşünjesi Gizlin girişi görkezmegiň iň aňsat usuly, ony diňe ekrana çekmekdir. Bu düzediji edýär. Düwmeler, triggerler we joýstikler hemmesi wizual bolýar.
A basyň: Tegelek ýakylýar. Taýagy ýapyň: Tegelek aýlanýar. Tüweleýi ýarym çekiň: Bar ýarym ýolda doldurylýar.
Indi 0s we 1s-e seredip durmaýarsyňyz, aslynda kontrolleýjiniň göni efirde tomaşa edişine tomaşa edýärsiňiz. Elbetde, deslapky, basylan, düzediş maglumatlary ýaly ýagdaýlara ýygnap başlanyňyzdan soň, hatda ýazgy tertibi hem CSS ulalyp, çylşyrymlaşyp başlaýar. Kaskad gatlaklary amatly bolýar. Ine, aşak düşürilen mysal: @ oýunçy bazasy { düwme { fon: # 222; serhet radiusy: 50%; ini: 40px; beýikligi: 40px; } }
@ oýunçy işjeň { .button.pressed { fon: # 0f0; / * açyk ýaşyl * / } }
@ oýunçy düzeltmek { düwme :: soň { mazmuny: attr (maglumat-baha); şrift ölçegi: 12px; reňk: #fff; } }
Gatlak tertibi möhümdir: esas → işjeň → düzediş.
esas kontrolleýeri çekýär. basylan ýagdaýlary işjeň dolandyrýar. düzedişleri örtmek.
Munuň ýaly bozulmagy, geň aýratynlyk uruşlary bilen göreşmeýändigiňizi aňladýar. Her gatyň öz orny bar we näme ýeňýändigini hemişe bilýärsiňiz. Gurmak Ilki ekranda bir zat alalyň. Gowy görünmek hökman däl - diňe bar bolmaly, şonuň üçin işlemeli zadymyz bar.
Gamepad kaskad düzediji
Bu sözüň doly manysynda gutular. Entek tolgundyryjy däl, ýöne soň CSS we JavaScript bilen ele almak üçin mümkinçilikler berýär. Bolýar, men bu ýerde kaskad gatlaklaryny ulanýaryn, sebäbi has köp ştat goşanyňyzdan soň zatlary tertipli saklaýar. Ine, gödek geçiş:
/ * =================================== KASKADE LAYERS GURAMASY Sargyt meselesi: esas → işjeň → düzediş =================================== * /
/ * Öňdäki gatlak tertibini kesgitläň * / @ oýunçy bazasy, işjeň, düzediş;
/ * 1-nji gatlak: Esasy stiller - deslapky görnüş * / @ oýunçy bazasy { düwme { fon: # 333; serhet radiusy: 50%; ini: 70px; beýikligi: 70px; displeý: flex; delil-mazmun: merkez; tekizlemek: merkez; }
arakesme { ini: 20px; beýikligi: 70px; fon: # 333; görkezmek: inline-blok; } }
/ * 2-nji gatlak: Işjeň ýagdaýlar - basylan düwmeleri dolandyrýar * / @ oýunçy işjeň { düwme.aktiw { fon: # 0f0; / * Basylanda açyk ýaşyl * / üýtgetmek: masştab (1.1); / * Düwmäni birneme ulaldyň * / }
.pause.active { fon: # 0f0; öwürmek: scaleY (1.1); / * Basylanda dikligine uzalýar * / } }
/ * 3-nji gatlak: Düzediş örtükleri - işläp düzüjiniň maglumatlary * / @ oýunçy düzeltmek { düwme :: soň { mazmuny: attr (maglumat-baha); / * San bahasyny görkezýär * / şrift ölçegi: 12px; reňk: #fff; } }
Bu çemeleşmäniň gözelligi, her gatlagyň anyk maksady bar. Esasy gatlak hiç haçan işjeňligi ýok edip bilmez, işjeňligi hiç haçan aýratynlyga garamazdan düzedişden çykyp bilmez. Bu, adatça düzediş gurallaryny agyrlaşdyrýan CSS aýratynlyk uruşlaryny ýok edýär. Indi käbir toparlar garaňky fonda oturan ýaly. Dogrymy aýtsam, gaty erbet däl.
JavaScript goşmak JavaScript wagty. Gözegçi hakykatdanam bir zat edýär. Bu ädimi ädimme-ädim gurarys. 1-nji ädim: Döwlet dolandyryşyny gurmak Ilki bilen, düzedişiň ýagdaýyny yzarlamak üçin üýtgeýjiler gerek: // =================================== // Döwlet dolandyryşy // ===================================
işlediň = ýalan; // Düzedişçiniň işjeňdigini ýa-da ýokdugyny yzarlaýar rafId goýsun; // cancelatyrmak üçin haýyşAnimationFrame ID-ni saklaýar
Bu üýtgeýjiler, gamepad girişini yzygiderli okaýan animasiýa aýlawyny dolandyrýarlar. 2-nji ädim: DOM salgylanmalaryny ele alyň Ondan soň, täzelenjek ähli HTML elementlerimize salgylanmalar alarys: // =================================== // DOM elementleriniň salgylanmalary // ===================================
const btnA = document.getElementById ("btn-a"); const btnB = document.getElementById ("btn-b"); const btnX = document.getElementById ("btn-x"); const pause1 = document.getElementById ("pauza1"); const pause2 = document.getElementById ("pauza2"); const status = document.getElementById ("status");
Bu salgylanmalary öňde saklamak, DOM-dan gaýtalap soramakdan has täsirli. 3-nji ädim: Klawiaturanyň yza gaýdyşyny goşuň Fiziki gözegçiliksiz synag etmek üçin düwmeleriň klawiatura düwmelerini karta ederis: // =================================== // Düwmeleriň ýykylmagy (gözegçiliksiz synag üçin) // ===================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' düwmesi iki pauza setirini dolandyrýar };
Bu, klawiaturadaky düwmeleri basyp UI-ni barlamaga mümkinçilik berýär. 4-nji ädim: Esasy täzelenme aýlawyny dörediň Jadygöýlik şu ýerde bolýar. Bu funksiýa yzygiderli işleýär we gamepad ýagdaýyny okaýar: // =================================== // IAM GOWY OAMUN GÖRNÜŞI // ===================================
funksiýa updateGamepad () { // connectedhli birikdirilen oýun oýunlaryny alyň const gamepads = navigator.getGamepads (); eger (! gamepadlar) gaýdyp gelse;
// Ilkinji birikdirilen oýun oýnuny ulanyň const gp = oýun oýunlary [0];
if (gp) { // "Işjeň" synpy üýtgetmek arkaly täzelenme düwmesi görkezilýär btnA.classList.toggle ("işjeň", gp.buttonlar [0]. basyldy); btnB.classList.toggle ("işjeň", gp.buttonlar [1]. basyldy); btnX.classList.toggle ("işjeň", gp.buttonlar [2]. basyldy);
// Arakesme düwmesini dolandyryň (dolandyryjylaryň köpüsinde 9-njy düwme) const pausePressed = gp.buttonlar [9]. basylan; pause1.classList.toggle ("işjeň", pausePressed); pause2.classList.toggle ("işjeň", pausePressed);
// statusy görkezmek üçin häzirki wagtda basylan düwmeleriň sanawyny düzüň basylmaly = []; gp.buttons.forEach ((btn, i) => { eger (btn.pressed)press.push ("Düwme" + i); });
// Düwmeler basylsa ýagdaý tekstini täzeläň eger (basylan.length> 0) { status.textContent = "Basyldy:" + basyldy.join (","); } }
// Düzediji işleýän bolsa, aýlawy dowam etdiriň if (işleýän) { rafId = haýyşAnimationFrame (updateGamepad); } }
ClassList.toggle () usuly, CSS gatlak stillerimizi herekete getirýän düwmäniň basylýandygyna ýa-da ýokdugyna esaslanyp işjeň synpy goşýar ýa-da aýyrýar. 5-nji ädim: Klawiatura wakalaryny dolandyryň Bu çäräni diňleýänler klawiaturanyň yza gaýdyp gelmegini üpjün edýärler: // =================================== // Düwmeleriň wakalary // ===================================
document.addEventListener ("açar düwmesi", (e) => { if (keyMap [e.key]) { // singleeke ýa-da birnäçe elementi dolandyryň eger (Array.isArray (keyMap [e.key])) { keyMap [e.key] .forEach (el => el.classList.add ("işjeň")); } else { keyMap [e.key] .classList.add ("işjeň"); } status.textContent = "Düwme basyldy:" + e.key.toUpperCase (); } });
document.addEventListener ("açar", (e) => { if (keyMap [e.key]) { // Düwme çykanda işjeň ýagdaýy aýyryň eger (Array.isArray (keyMap [e.key])) { keyMap [e.key] .forEach (el => el.classList.remove ("işjeň")); } else { keyMap [e.key] .classList.remove ("işjeň"); } status.textContent = "Açar goýberildi:" + e.key.toUpperCase (); } });
6-njy ädim: Başlamak / Stop Dolandyryşy goşuň Netijede, düzüjini açmagyň we öçürmegiň usuly gerek: // =================================== // ÖÇÜRMEK / Öçürmek // ===================================
document.getElementById ("üýtgetmek"). addEventListener ("basyň", () => { ylgamak =! ylgamak; // Işleýän ýagdaýy süýşüriň
if (işleýän) { status.textContent = "Düzediji işleýär ..."; updateGamepad (); // Täzelenme aýlawyny başlaň } else { status.textContent = "Düzediji hereketsiz"; CancAnimationFrame (rafId); // Aýlawy duruzyň } });
Hawa, bir düwmä basyň we ol ýalpyldaýar. Taýagy itekläň we hereket edýär. Bu. Moreene bir zat: çig gymmatlyklar. Käwagt diňe çyralary däl-de, sanlary görmek isleýärsiňiz.
Bu etapda görmeli:
Ekranda ýönekeý gözegçilik ediji, Olar bilen täsirleşeniňizde reaksiýa berýän düwmeler we Basylan düwme indekslerini görkezýän islege görä düzediş okalyşy.
Munuň has abstrakt bolmagy üçin, ekranda kontrolleýjiniň hakyky wagtda reaksiýasynyň çalt görkezilişi:
Indi, “ordingazga almagy bes et” düwmesine bassaňyz, Stopazga almagy bes edýänçäňiz hemme zady ýazýar. 2. CSV / JSON-a maglumatlary eksport etmek Gündeligimiz bar bolsa, ony ýatda saklamak isleýäris.
1-nji ädim: Downloadükleme kömekçisini dörediň Ilki bilen, brauzerde faýl ýüklemelerini dolandyrýan kömekçi funksiýa gerek: // =================================== // Kömekçi kömekçi faýly // ===================================
funksiýa downloadFile (faýlyň ady, mazmuny, görnüşi = "tekst / ýönekeý") { // Mazmundan bir bölek dörediň const blob = täze Blob ([mazmun], {görnüş}); const url = URL.createObjectURL (blob);
// Wagtlaýyn göçürip almak baglanyşygyny dörediň we basyň const a = document.createElement ("a"); a.href = url; a.download = faýlyň ady; a.click ();
// Göçürilenden soň obýektiň URL-ni arassalaň setTimeout (() => URL.revokeObjectURL (url), 100); }
Bu funksiýa, maglumatlaryňyzdan Blob (ikili uly obýekt) döretmek, onuň üçin wagtlaýyn URL döretmek we göçürip almak baglanyşygyna programma taýdan basmak arkaly işleýär. Arassalamak, ýadyň syzmazlygyny üpjün edýär. 2-nji ädim: JSON eksportyny dolandyryň JSON maglumatlaryň doly gurluşyny gorap saklamak üçin ajaýyp:
// =================================== // JSON ýaly eksport // ===================================
document.getElementById ("eksport-json"). addEventListener ("basyň", () => { // Eksport etjek zadyň bardygyny barlaň if (! frames.length) { console.warn ("Eksport üçin ýazgy ýok."); gaýdyp gelmek; }
// Metadata we çarçuwalar bilen ýük göteriji dörediň const ýüklemek = { döredildiAt: täze Sene (). toISOString (), çarçuwalar };
// Formatlanan JSON görnüşinde göçürip alyň DownloadFile ( "gamepad-log.json", JSON.stringify (ýük göteriji, null, 2), "programma / json" ); });
JSON formaty hemme zady gurluşly we aňsatlyk bilen deňeşdirip, dev gurallaryna gaýtadan ýüklemek ýa-da ýoldaşlar bilen paýlaşmak üçin amatly edýär. 3-nji ädim: CSV eksportyny dolandyryň CSV eksporty üçin iýerarhiki maglumatlary hatarlara we sütünlere tekizlemeli:
//=================================== // CSV görnüşinde eksport // ===================================
document.getElementById ("eksport-csv"). addEventListener ("basyň", () => { // Eksport etjek zadyň bardygyny barlaň if (! frames.length) { console.warn ("Eksport üçin ýazgy ýok."); gaýdyp gelmek; }
// CSV sözbaşy hataryny guruň (wagt belligi üçin sütünler, ähli düwmeler, ähli oklar) const sözbaşyButtons = ramkalar [0] .buttons.map ((_, i) => btn $ {i}); const headerAxes = ramkalar [0] .axes.map ((_, i) => ok $ {i}); const sözbaşy = ["t", ... sözbaşy düwmeleri, ... headerAxes] .join (",") + "\ n";
// CSV maglumat hatarlaryny guruň const hatarlary = çarçuwalar.map (f => { const btnVals = f.buttons.map (b => b.value); gaýdyp [f.t, ... btnVals, ... f.axes] .join (","); }) goşulmak ("\ n");
// CSV görnüşinde göçürip alyň downloadFile ("gamepad-log.csv", sözbaşy + hatar, "tekst / csv"); });
CSV maglumatlary derňemek üçin ajaýyp, sebäbi gönüden-göni Excel ýa-da Google Sheets-de açylýar, diagrammalary, maglumatlary süzgüçleri ýa-da nokat görnüşlerini döretmäge mümkinçilik berýär. Eksport düwmeleri girensoň, panelde iki sany täze warianty görersiňiz: Export JSON we Export CSV. Çig gündeligi öz gurallaryňyza taşlamak ýa-da gurluşyň içine sokmak isleseňiz JSON gowy. CSV, beýleki tarapdan, girişleri diagramma, süzgüç ýa-da deňeşdirmek üçin göni Excel ýa-da Google Sheets-e açylýar. Aşakdaky surat, goşmaça dolandyryşlar bilen paneliň nähili görünýändigini görkezýär.
3. Surata düşüriş ulgamy Käwagt doly ýazgy gerek däl, diňe giriş ýagdaýlarynyň çalt “skrinshoty”. “Snapshot” düwmesi kömek edýär.
JavaScript:
// =================================== // SNAPSHOT alyň // ===================================
document.getElementById ("gysgaça surat"). addEventListener ("basyň", () => { // connectedhli birikdirilen oýun oýunlaryny alyň const padler = navigator.getGamepads (); const activePads = [];
// Her birikdirilen oýun oýnunyň ýagdaýyny aýlaň we ele alyň üçin (const gp pad) { eger (! gp) dowam etse; // Boş ýerlerden geçiň
işjeňPads.push ({ id: gp.id, // Dolandyryjynyň ady / modeli wagt belligi: ýerine ýetiriş.now (), düwmeler: gp.buttons.map (b => ({ basyldy: b.pressed, bahasy: bahasy })), oklar: [... gp.axes] }); }
// Oýun oýunlarynyň tapylandygyny ýa-da ýokdugyny barlaň if (! activePads.length) { console.warn ("Surata düşürmek üçin oýun oýunlary ýok."); duýduryş ("Dolandyryjy tapylmady!"); gaýdyp gelmek; }
// Hasaba giriň we ulanyja habar beriň console.log ("Snapshot:", işjeňPadlar); duýduryş (Surata düşürildi! ele alnan $ {activePads.length} kontroller (ler).); });
Snapshots kontrolleýjiňiziň takyk ýagdaýyny bir pursatda doňdurýar. 4. Arwah girişini gaýtalamak Indi gyzykly biri üçin: arwah girişini gaýtalamak. Munuň üçin gündeligi alýar we fantastiki oýunçy kontrolleýeri ulanýan ýaly wizual görnüşde oýnaýar.
Gaýtadan görkezmek üçin JavaScript: // =================================== // GOST TERJIME // ===================================
document.getElementById ("gaýtalamak"). addEventListener ("basyň", () => { // Gaýtalamak üçin ýazgymyzyň bardygyna göz ýetiriň if (! frames.length) { duýduryş ("Gaýtadan ýazmak üçin ýazgy ýok!"); gaýdyp gelmek; }
console.log ("Arwah täzeden başlamaga ...");
// Sinhron oýnamak üçin wagty yzarlaň startTime = performance.now (); frameIndex = 0 bolsun;
// Animasiýa aýlawyny gaýtalaň funksiýa ädimi () { const indi = performance.now (); const geçdi = indi - startTime;
// Şu wagta çenli bolup geçen ähli ramkalary işlediň
şol bir wagtyň özünde (frameIndex // UI ýazgy düwmesiniň ýagdaýlary bilen täzeläň
btnA.classList.toggle ("işjeň", ramka.buttonlar [0]. basyldy);
btnB.classList.toggle ("işjeň", ramka.buttonlar [1]. basyldy);
btnX.classList.toggle ("işjeň", ramka.buttonlar [2]. basyldy); // statusagdaý ekranyny täzeläň
basylmaly = [];
frame.buttons.forEach ((btn, i) => {
eger (btn.pressed) basylan.push ("Düwme" + i);
});
eger (basylan.length> 0) {
status.textContent = "Arwah:" + basyldy.join (",");
} frameIndex ++;
} // Has köp ramka bar bolsa aýlawy dowam etdiriň
if (frameIndex // Gaýtalama başlaň
ädim ();
}); Düzedişleri birneme has gowulaşdyrmak üçin, arwah gaýtalamagyny goşdum. Bir sessiýa ýazga alanyňyzdan soň, gaýtalap basyp, UI-iň ýerine ýetirişine tomaşa edip bilersiňiz, edil fantastiki pleýer işleýän ýaly. Munuň üçin panelde täze “Ghost Replay” düwmesi görkezilýär. Recordazga basyň, dolandyryjy bilen azajyk bulaşdyryň, saklaň, soňra gaýtadan görkeziň. UI diňe girişleriňizi yzarlaýan arwah ýaly eden ähli işleriňizi gaýtalaýar.
Näme üçin bu goşmaçalar bilen biynjalyk bolýarsyňyz? Ordingazga almak / eksport etmek synagçylara näme bolandygyny anyk görkezmegi aňsatlaşdyrýar.
Snapshots bir salym doňýar, täsin kemçilikleri kowalanyňyzda gaty peýdaly.
Arwah gaýtalamak, okuw gollanmalary, elýeterliligi barlamak ýa-da diňe dolandyryş sazlamalaryny deňeşdirmek üçin ajaýyp. Bu pursatda ol diňe bir arassa demo däl, eýsem hakykatdanam işe girizip boljak zat.
Hakyky dünýä ulanylyş hadysalary
Indi köp zat edip bilýän bu düzediji aldyk. Göni giriş görkezýär, ýazgylary ýazga alýar, eksport edýär we hatda zatlary gaýtalaýar. Realöne asyl sorag: aslynda kimiň aladasy bar? Bu kim üçin peýdaly?
Oýun döredijiler
Dolandyryjylar işiň bir bölegi, ýöne olary düzetmek? Adatça agyry. ↓ → + punch ýaly söweş oýunlaryny synap görýändigiňizi göz öňüne getiriň. Namaz okamagyň ýerine, iki gezek birmeňzeş basdyňyz, bir gezek ýazga geçirýärsiňiz we gaýtadan gaýtalaýarsyňyz. Boldy. Ora-da köp oýunçy koduňyzyň enjamynda şol bir reaksiýa bardygyny ýa-da ýokdugyny barlamak üçin JSON surnallaryny ýoldaşyňyz bilen çalyşýarsyňyz. Bu gaty uly.
Elýeterlilik bilen meşgullanýanlar
Bu meniň ýüregime ýakyn. Hemmeler “standart” kontrolleýer bilen oýnanok. Uýgunlaşdyryjy dolandyryjylar käwagt geň signallary zyňýarlar. Bu gural bilen nämeleriň bolup geçýändigini anyk görüp bilersiňiz. Mugallymlar, gözlegçiler, kim bolsa-da. Surnallary alyp, deňeşdirip ýa-da girişleri gapdalyndan gaýtalap bilerler. Birden göze görünmeýän zatlar äşgär bolýar.
Hiliň barlagy
Synagçylar köplenç “Bu ýerde düwmeleri ýuwdum, ol döwüldi” ýaly bellikler ýazýarlar. Gaty peýdaly däl. Indi? Takyk pressleri ele alyp, gündeligi eksport edip we iberip bilerler. Hiç hili çaklama ýok.
Mugallymlar
Eger okuw sapaklaryny ýa-da “YouTube” wideolaryny taýýarlaýan bolsaňyz, arwahyň gaýtalanmagy altyn. UI munuň bolup geçýändigini görkezýän bolsa, göni manyda "Dolandyryjy bilen näme etdim" diýip bilersiňiz. Düşündirişleri has düşnükli edýär.
Oýunlaryň aňyrsynda
Hawa, bu diňe oýunlar hakda däl. Adamlar robotlar, çeper taslamalar we elýeterlilik interfeýsleri üçin dolandyryjylary ulandylar. Her gezek birmeňzeş mesele: brauzer aslynda näme görýär? Munuň bilen çaklamaly dälsiňiz.
Netije
Dolandyryjy girişini düzetmek elmydama kör uçýan ýaly duýulýar. DOM ýa-da CSS-den tapawutlylykda, oýun oýunlary üçin içerki inspektor ýok; konsoldaky diňe çig san, sesden aňsatlyk bilen ýitýär.
HTML, CSS we JavaScript-iň birnäçe ýüz setiri bilen başga bir zat gurduk: Görünmeýän girişleri görünýän wizual düzediji.
UI-ni arassa we düzedip bolýan gatlakly CSS ulgamy.
Ony demodan işläp düzüjiniň guralyna çenli ýokarlandyrýan goşmaçalar toplumy (ýazgy, eksport, suratlar, arwah gaýtalamak). Bu taslama, Web platformasynyň güýjüni CSS Cascade Layers-de azajyk döredijilik bilen garyşdyryp, näderejede gidip boljakdygyny görkezýär.
Justaňy doly düşündiren guralym açyk çeşmedir. GitHub reposyny klonlap, özüňiz synap bilersiňiz.
Moreöne has möhümi, ony özüňiz edip bilersiňiz. Öz gatlaklaryňyzy goşuň. Özüňiziň gaýtalaýan logikaňyzy guruň. Oýun prototipiňiz bilen birleşdiriň. Evena-da hatda göz öňüme getirmedik görnüşde ulanyň. Okatmak, elýeterlilik ýa-da maglumatlary derňemek üçin.
Günüň ahyrynda bu diňe oýun oýunlaryny düzetmek däl. Gizlin girişlere ýagtylyk bermek we döredijilere webiň henizem kabul edip bilmeýän enjamlary bilen işlemek üçin ynam döretmek.
Şeýlelik bilen, kontrolleýjiňizi dakyň, redaktoryňyzy açyň we synag geçirip başlaň. Brauzeriňiziň we CSS-iň hakykatdanam ýerine ýetirip biljek zatlaryna geň galyp bilersiňiz.
