Nəzarətçini qoşduqda düymələri döyürsünüz, çubuqları hərəkət etdirirsiniz, tətikləri çəkirsiniz... və bir tərtibatçı olaraq bunların heç birini görmürsünüz. Brauzer onu götürür, əlbəttə, amma konsolda nömrələri qeyd etməsəniz, o, görünməzdir. Bu, Gamepad API ilə baş ağrısıdır. Bu, illərdir mövcuddur və əslində olduqca güclüdür. Siz düymələri, çubuqları, tetikleyicileri, işləri oxuya bilərsiniz. Amma insanların çoxu ona toxunmur. Niyə? Çünki rəy yoxdur. Tərtibatçı alətlərində panel yoxdur. Nəzarətçinin düşündüyünüzü belə edib-etmədiyini bilmək üçün aydın bir yol yoxdur. Kor uçmaq kimi hiss olunur. Bu, bir az alət yaratmaq üçün məni kifayət qədər narahat etdi: Gamepad Cascade Debugger. Konsol çıxışına baxmaq əvəzinə siz nəzarətçinin canlı, interaktiv görünüşünü əldə edirsiniz. Bir şeyə basın və ekranda reaksiya verir. CSS Cascade Layers ilə üslublar mütəşəkkil qalır, ona görə də sazlamaq daha təmizdir. Bu yazıda sizə sazlama nəzarətçilərinin niyə belə bir ağrı olduğunu, CSS-nin onu təmizləməyə necə kömək etdiyini və öz layihələriniz üçün təkrar istifadə edilə bilən vizual sazlayıcı qura biləcəyinizi göstərəcəyəm.
Onların hamısını daxil edə bilsəniz belə, tez bir zamanda oxunmayan konsol spamları ilə nəticələnəcəksiniz. Məsələn: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Hansı düymənin basıldığını deyə bilərsinizmi? Ola bilər, ancaq gözlərinizi sıxdıqdan və bir neçə girişi qaçırdıqdan sonra. Beləliklə, yox, girişləri oxumağa gəldikdə sazlama asan deyil. Problem 3: Strukturun çatışmazlığı Sürətli vizualizatoru bir yerə yığsanız belə, üslublar tez bir zamanda qarışıq ola bilər. Defolt, aktiv və debug vəziyyətləri üst-üstə düşə bilər və aydın struktur olmadan CSS-iniz kövrək olur və genişləndirilməsi çətinləşir. CSS Cascade Layers kömək edə bilər. Onlar üslubları prioritetlərə görə sıralanan "qatlara" qruplaşdırırlar, buna görə də siz spesifikliklə mübarizəni dayandırırsınız və "Niyə mənim debug stilim göstərilmir?" Bunun əvəzinə, siz ayrı-ayrı narahatlıqları qoruyursunuz:
Baza: Nəzarətçinin standart, ilkin görünüşü. Aktiv: Basılan düymələr və daşınan çubuqlar üçün vurğulanır. Debug: Tərtibatçılar üçün üst-üstə düşmələr (məsələn, rəqəmli oxunuşlar, təlimatlar və s.).
Buna uyğun olaraq CSS-də təbəqələri təyin etsək, aşağıdakılara sahib olardıq: /* ən aşağıdan ən yüksək prioritetə */ @layer bazası, aktiv, debug;
@layer bazası { /* ... */ }
@qat aktiv { /* ... */ }
@layer debug { /* ... */ }
Hər bir təbəqə proqnozlaşdırıla bilən şəkildə yığıldığından, siz həmişə hansı qaydaların qalib gəldiyini bilirsiniz. Bu proqnozlaşdırıla bilənlik sazlamağı nəinki asanlaşdırır, həm də əslində idarə oluna bilir. Problemi (görünməz, qarışıq giriş) və yanaşmanı (Cascade Layers ilə qurulmuş vizual sazlayıcı) əhatə etdik. İndi sazlayıcı qurmaq üçün addım-addım prosesi keçəcəyik. Debugger Konsepti Gizli daxiletmənin görünməsinin ən asan yolu onu sadəcə ekranda çəkməkdir. Bu sazlayıcının etdiyi budur. Düymələr, tetikler və joystiklər hamısı vizual olur.
A düyməsini basın: Dairə yanır. Çubuğu sürüşdürün: Dairə ətrafında sürüşür. Tətiyi yarıya qədər çəkin: çubuq yarıya qədər doldurulur.
İndi siz 0 və 1-lərə baxmırsınız, amma əslində nəzarətçinin canlı reaksiyasını izləyirsiniz. Əlbəttə ki, siz standart, sıxılmış, debug məlumatı, hətta qeyd rejimi kimi vəziyyətləri yığmağa başladıqdan sonra CSS daha böyük və mürəkkəb olmağa başlayır. Kaskad təbəqələrinin lazımlı olduğu yer budur. Budur soyulmuş bir nümunə: @layer bazası { .düyməsinə { fon: #222; sərhəd radiusu: 50%; eni: 40px; hündürlük: 40px; } }
@qat aktiv { .düyməsinə.basılı { fon: #0f0; /* parlaq yaşıl */ } }
@layer debug { .button::sonra { məzmun: attr(məlumat dəyəri); şrift ölçüsü: 12px; rəng: #fff; } }
Qat sırası vacibdir: əsas → aktiv → debug.
baza nəzarətçini çəkir. aktiv basılmış vəziyyətləri idarə edir. debug üst-üstə düşür.
Bunu bu şəkildə parçalamaq o deməkdir ki, qəribə spesifiklik müharibələri ilə mübarizə aparmırsınız. Hər təbəqənin öz yeri var və siz həmişə nəyin qalib gəldiyini bilirsiniz. Onu qurmaq Əvvəlcə ekranda bir şey əldə edək. Bunun yaxşı görünməsinə ehtiyac yoxdur - sadəcə mövcud olmalıdır ki, işləyə biləcəyimiz bir şey var.
Gamepad Cascade Debugger
Bu, sözün əsl mənasında, sadəcə qutulardır. Hələ maraqlı deyil, lakin bu, bizə daha sonra CSS və JavaScript ilə tutmaq üçün tutacaqlar verir. Yaxşı, mən burada kaskad təbəqələrindən istifadə edirəm, çünki daha çox vəziyyət əlavə etdikdən sonra materialları nizamlı saxlayır. Budur kobud keçid:
/* ==================================== KASKAD QATLARININ QURULMUŞU Sifariş vacibdir: əsas → aktiv → debug ===================================== */
/* Qat sırasını əvvəlcədən müəyyənləşdirin */ @layer bazası, aktiv, debug;
/* Layer 1: Əsas üslublar - standart görünüş */ @layer bazası { .düyməsinə { fon: #333; sərhəd radiusu: 50%; eni: 70px; hündürlük: 70px; ekran: flex; əsaslandırmaq-məzmun: mərkəz; align-elementlər: mərkəz; }
.pauza { eni: 20px; hündürlük: 70px; fon: #333; ekran: inline-blok; } }
/* Layer 2: Aktiv vəziyyətlər - basılan düymələri idarə edir */ @qat aktiv { .button.active { fon: #0f0; /* Basıldıqda parlaq yaşıl */ çevirmək: miqyas (1.1); /* Düyməni bir qədər böyüdür */ }
.fasilə.aktiv { fon: #0f0; çevirmək: miqyasY(1.1); /* Basıldıqda şaquli olaraq uzanır */ } }
/* Layer 3: Debug overlays - developer information */ @layer debug { .button::sonra { məzmun: attr(məlumat dəyəri); /* Rəqəmsal dəyəri göstərir */ şrift ölçüsü: 12px; rəng: #fff; } }
Bu yanaşmanın gözəlliyi ondadır ki, hər təbəqənin aydın məqsədi var. Əsas təbəqə heç vaxt aktivi ləğv edə bilməz və aktiv spesifiklikdən asılı olmayaraq heç vaxt debugı ləğv edə bilməz. Bu, adətən sazlama vasitələrinə təsir edən CSS spesifikliyi müharibələrini aradan qaldırır. İndi bəzi klasterlər qaranlıq fonda oturmuş kimi görünür. Düzünü desəm, çox da pis deyil.
JavaScript əlavə edilməsi JavaScript vaxtı. Bu, nəzarətçinin həqiqətən bir şey etdiyi yerdir. Bunu addım-addım quracağıq. Addım 1: Dövlət İdarəçiliyini qurun Əvvəlcə sazlayıcının vəziyyətini izləmək üçün dəyişənlərə ehtiyacımız var: // ==================================== // DÖVLƏT İDARƏETMƏSİ // ====================================
let run = false; // Sazlayıcının aktiv olub olmadığını izləyir qoy rafId; // Ləğv etmək üçün requestAnimationFrame ID-ni saxlayır
Bu dəyişənlər gamepad daxiletməsini davamlı olaraq oxuyan animasiya dövrəsini idarə edir. Addım 2: DOM Referanslarını götürün Sonra, yeniləyəcəyimiz bütün HTML elementlərinə istinadlar alırıq: // ==================================== // DOM ELEMENTİ İSTİFADƏLƏR // ====================================
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");
Bu arayışları qabaqda saxlamaq DOM-u dəfələrlə sorğulamaqdan daha səmərəlidir. Addım 3: Keyboard Fallback əlavə edin Fiziki nəzarətçi olmadan sınaq üçün biz klaviatura düymələrini düymələrə uyğunlaşdıracağıq: // ==================================== // KLAVYƏTƏNİN GERİ DÖNÜŞÜ (kontroller olmadan sınaq üçün) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pause1, pause2] // 'p' düyməsi hər iki fasilə zolağına nəzarət edir };
Bu, klaviaturadakı düymələri basaraq istifadəçi interfeysini sınamağa imkan verir. Addım 4: Əsas Yeniləmə Döngəsini yaradın Burada sehr baş verir. Bu funksiya davamlı işləyir və gamepad vəziyyətini oxuyur: // ==================================== // ƏSAS OYUN PADDASI YENİLƏNMƏSİ DÖNGÜ // ====================================
funksiyası updateGamepad() { // Bütün qoşulmuş gamepadları əldə edin const gamepads = navigator.getGamepads(); əgər (!gamepads) qayıdırsa;
// İlk qoşulmuş gamepaddan istifadə edin const gp = gamepadlar[0];
əgər (gp) { // "aktiv" sinfi dəyişdirərək düyməni vəziyyətlərini yeniləyin btnA.classList.toggle("aktiv", gp.buttons[0].basılı); btnB.classList.toggle("aktiv", gp.buttons[1].basılı); btnX.classList.toggle("aktiv", gp.buttons[2].basılı);
// Pauza düyməsini idarə edin (əksər nəzarətçilərdə düymə indeksi 9) const pausePressed = gp.buttons[9].pressed; pause1.classList.toggle("aktiv", pausePressed); pause2.classList.toggle("aktiv", pausePressed);
// Vəziyyəti göstərmək üçün hazırda basılan düymələrin siyahısını yaradın basılsın = []; gp.buttons.forEach((btn, i) => { əgər (btn.basılır)pressed.push("Düymə" + i); });
// Hər hansı bir düymə basılıbsa, status mətnini yeniləyin əgər (basın.uzunluq > 0) { status.textContent = "Basıldı: " + pressed.join(", "); } }
// Sazlayıcı işləyirsə, döngəni davam etdirin əgər (çalışır) { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() metodu düymənin basılıb-basılmamasından asılı olaraq aktiv sinfi əlavə edir və ya silir ki, bu da bizim CSS qat üslublarımızı işə salır. Addım 5: Klaviatura hadisələrini idarə edin Bu hadisə dinləyiciləri klaviaturanın geri qaytarılmasını təmin edir: // ==================================== // KLAVVİA HADİSƏLƏRİ // ====================================
document.addEventListener("keydown", (e) => { əgər (keyMap[e.key]) { // Tək və ya çoxlu elementləri idarə edin əgər (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("aktiv")); } başqa { keyMap[e.key].classList.add("aktiv"); } status.textContent = "Düymə basıldı: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { əgər (keyMap[e.key]) { // Açar buraxıldıqda aktiv vəziyyəti silin əgər (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("aktiv")); } başqa { keyMap[e.key].classList.remove("aktiv"); } status.textContent = "Açar buraxıldı: " + e.key.toUpperCase(); } });
Addım 6: Start/Stop Control əlavə edin Nəhayət, sazlayıcını işə salmaq və söndürmək üçün bir yola ehtiyacımız var: // ==================================== // SAHİB AYARÇINI AKTİV/SÖVDÜR // ====================================
document.getElementById("keçid").addEventListener("klik", () => { çalışan = !qaçış; // Çalışan vəziyyəti çevirin
əgər (çalışır) { status.textContent = "Debugger çalışır..."; yeniləməGamepad(); // Yeniləmə dövrəsinə başlayın } başqa { status.textContent = "Debugger qeyri-aktiv"; cancelAnimationFrame(rafId); // Döngəni dayandırın } });
Beləliklə, bəli, bir düyməni basın və o, parlayır. Çubuğu itələyin və hərəkət edir. bu qədər. Daha bir şey: xam dəyərlər. Bəzən sadəcə rəqəmləri görmək istəyirsən, işıqları deyil.
Bu mərhələdə siz görməlisiniz:
Sadə ekran nəzarətçisi, Onlarla qarşılıqlı əlaqədə olduğunuz zaman reaksiya verən düymələr və Basılan düymə indekslərini göstərən isteğe bağlı sazlama oxunuşu.
Bunu daha az mücərrəd etmək üçün real vaxt rejimində reaksiya verən ekran nəzarətçisinin sürətli demosunu təqdim edirik:
İndi, "Start Recording" düyməsini basaraq, "Stop Recording" düyməsini vurana qədər hər şeyi qeyd edir. 2. Məlumatların CSV/JSON-a ixracı Bir jurnalımız olduqda, onu saxlamaq istəyəcəyik.
Addım 1: Download Helper yaradın Birincisi, bizə brauzerdə fayl yükləmələrini idarə edən köməkçi funksiya lazımdır: // ==================================== // FAYI YÜKLƏMƏ KÖMƏKÇİSİ // ====================================
faylı yükləmə funksiyası (fayl adı, məzmun, növü = "mətn/düz") { // Məzmundan blob yaradın const blob = yeni Blob([məzmun], {növ }); const url = URL.createObjectURL(blob);
// Müvəqqəti yükləmə linki yaradın və üzərinə klikləyin const a = document.createElement("a"); a.href = url; a.download = fayl adı; a.click();
// Yüklədikdən sonra obyektin URL-sini təmizləyin setTimeout(() => URL.revokeObjectURL(url), 100); }
Bu funksiya məlumatlarınızdan Blob (ikili böyük obyekt) yaratmaq, onun üçün müvəqqəti URL yaratmaq və proqramlı şəkildə yükləmə linkinə klikləməklə işləyir. Təmizləmə yaddaşın sızmamasını təmin edir. Addım 2: JSON İxracını idarə edin JSON tam məlumat strukturunu qorumaq üçün mükəmməldir:
// ==================================== // JSON KİMİ İXRAC EDİN // ====================================
document.getElementById("export-json").addEventListener("klik", () => { // İxrac ediləcək bir şeyin olub olmadığını yoxlayın əgər (!çərçivələr.uzunluq) { console.warn("İxrac etmək üçün heç bir qeyd yoxdur."); qayıtmaq; }
// Metadata və çərçivələrlə faydalı yük yaradın const yükü = { yaradıldı: new Date().toISOString(), çərçivələr };
// Formatlanmış JSON kimi yükləyin faylı yükləyin( "gamepad-log.json", JSON.stringify(faydalı yük, null, 2), "tətbiq/json" ); });
JSON formatı hər şeyi strukturlaşdırılmış və asanlıqla təhlil edilə bilən saxlayır, bu onu yenidən inkişaf alətlərinə yükləmək və ya komanda yoldaşları ilə paylaşmaq üçün ideal edir. Addım 3: CSV İxracını idarə edin CSV ixracı üçün iyerarxik məlumatları sətirlərə və sütunlara düzəltməliyik:
//===================================== // CSV KİMİ İXRAC EDİN // ====================================
document.getElementById("export-csv").addEventListener("klik", () => { // İxrac ediləcək bir şeyin olub olmadığını yoxlayın əgər (!çərçivələr.uzunluq) { console.warn("İxrac etmək üçün heç bir qeyd yoxdur."); qayıtmaq; }
// CSV başlıq sırasını yaradın (zaman damğası üçün sütunlar, bütün düymələr, bütün oxlar) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV məlumat sətirləri yaradın const sətirlər = frames.map(f => { const btnVals = f.buttons.map(b => b.value); return [f.t, ...btnVals, ...f.axes].join(","); }).qoşulmaq("\n");
// CSV olaraq yükləyin downloadFile("gamepad-log.csv", başlıq + sətirlər, "mətn/csv"); });
CSV verilənlərin təhlili üçün əladır, çünki o, birbaşa Excel və ya Google Cədvəldə açılır və sizə vizual olaraq qrafiklər, məlumatları süzgəcdən keçirmə və ya ləkə nümunələri yaratmağa imkan verir. İndi ixrac düymələri daxil olduqdan sonra paneldə iki yeni seçim görəcəksiniz: JSON-u ixrac et və CSV-ni ixrac et. Xam jurnalı yenidən inkişaf etdirmə alətlərinizə atmaq və ya strukturun ətrafında gəzmək istəyirsinizsə, JSON gözəldir. Digər tərəfdən CSV birbaşa Excel və ya Google Cədvəllərə açılır ki, siz daxil edilmiş məlumatları qrafikləşdirə, süzə və ya müqayisə edə biləsiniz. Aşağıdakı şəkildə panelin bu əlavə idarəetmələrlə necə göründüyü göstərilir.
3. Snapshot Sistemi Bəzən tam qeydə ehtiyacınız yoxdur, sadəcə giriş vəziyyətlərinin sürətli "ekran görüntüsü". Snapshot çək düyməsi burada kömək edir.
Və JavaScript:
// ==================================== // FOTO ÇƏKİL // ====================================
document.getElementById("snapshot").addEventListener("klik", () => { // Bütün qoşulmuş gamepadları əldə edin const pedlər = navigator.getGamepads(); const activePads = [];
// Hər bir qoşulmuş gamepadın vəziyyətini keçin və ələ keçirin üçün (sabit gp yastiqciqlar) { (!gp) davam edərsə; // Boş yerləri keçin
activePads.push({ id: gp.id, // Nəzarətçinin adı/modeli vaxt damgası: performance.now(), düymələr: gp.buttons.map(b => ({ basdı: b.basıldı, dəyər: b.dəyər })), baltalar: [...gp.axes] }); }
// Hər hansı gamepad tapılıb-tapılmadığını yoxlayın əgər (!activePads.length) { console.warn("Snapshot üçün heç bir gamepad qoşulmayıb."); alert("Heç bir nəzarətçi aşkarlanmadı!"); qayıtmaq; }
// Daxil edin və istifadəçiyə bildirin console.log("Snapshot:", activePads); xəbərdarlıq (Şəkil çəkildi! ${activePads.length} nəzarətçi(lər)i çəkildi); });
Snapshotlar nəzarət cihazınızın dəqiq vəziyyətini bir anda dondurur. 4. Ghost Input Replay İndi əyləncə üçün: xəyal girişinin təkrarı. Bu, log götürür və sanki fantom oyunçu nəzarətçidən istifadə edirmiş kimi onu vizual olaraq oxuyur.
Təkrar oxutma üçün JavaScript: // ==================================== // GHOST TEKRAR // ====================================
document.getElementById("replay").addEventListener("klik", () => { // Yenidən oxutmaq üçün qeydimiz olduğundan əmin olun əgər (!çərçivələr.uzunluq) { alert("Təkrar oxutmaq üçün qeyd yoxdur!"); qayıtmaq; }
console.log("Ghost replay başlayır...");
// Sinxronlaşdırılmış oxutma üçün izləmə vaxtı let startTime = performance.now(); qoy frameIndex = 0;
// Animasiya döngəsini təkrarlayın funksiya addım() { const now = performance.now(); const keçdi = indi - startTime;
// İndiyə qədər baş verməli olan bütün çərçivələri emal edin isə (frameIndex < frames.length && frames[frameIndex].t <= keçdi) { const çərçivə = çərçivələr[frameIndex];
// UI-ni qeydə alınmış düymə vəziyyətləri ilə yeniləyin btnA.classList.toggle("aktiv", frame.buttons[0].pressed); btnB.classList.toggle("aktiv", frame.buttons[1].pressed); btnX.classList.toggle("aktiv", frame.buttons[2].pressed);
// Status ekranını yeniləyin basılsın = []; frame.buttons.forEach((btn, i) => { əgər (btn.pressed) basılırsa.push("Button" + i); }); əgər (basın.uzunluq > 0) { status.textContent = "Ghost: " + pressed.join(", "); }
frameIndex++; }
// Əgər daha çox çərçivə varsa, döngəni davam etdirin əgər (frameIndex < frames.length) { requestAnimationFrame(addım); } başqa { console.log("Təkrarbitdi."); status.textContent = "Təkrar oynatmaq tamamlandı"; } }
// Təkrarlamağa başlayın addım(); });
Sazlamağı bir az daha praktik etmək üçün mən xəyal təkrarı əlavə etdim. Bir seansı qeyd etdikdən sonra təkrar oynatma düyməsini vura və UI-nin onun hərəkətini izləyə bilərsiniz. Bunun üçün paneldə yeni Replay Ghost düyməsi görünür.
Record düyməsini basın, nəzarətçi ilə bir az dolaşın, dayandırın, sonra təkrar oxuyun. UI, girişlərinizi izləyən bir xəyal kimi etdiyiniz hər şeyi əks etdirir. Bu əlavələrlə niyə narahat olursunuz?
Qeyd/ixrac test edənlərin baş verənləri dəqiq göstərməsini asanlaşdırır. Anlık görüntülər bir anda donur, qəribə səhvləri təqib edərkən çox faydalıdır. Ghost replay dərsliklər, əlçatanlığı yoxlamaq və ya sadəcə nəzarət parametrlərini yan-yana müqayisə etmək üçün əladır.
Bu nöqtədə, bu, artıq sadəcə səliqəli bir demo deyil, əslində işə sala biləcəyiniz bir şeydir. Real Dünya İstifadəsi halları İndi çox şey edə bilən bu sazlayıcıya sahibik. O, canlı girişi göstərir, qeydləri qeyd edir, ixrac edir və hətta materialları təkrarlayır. Ancaq əsl sual budur: əslində kimin qayğısı var? Bu kimə faydalıdır? Oyun Tərtibatçıları Nəzarətçilər işin bir hissəsidir, lakin onları düzəldirsiniz? Adətən ağrı. Təsəvvür edin ki, ↓ → + yumruq kimi döyüş oyunu kombinasiyasını sınaqdan keçirirsiniz. Namaz qılmaq əvəzinə iki dəfə eyni şəkildə basıb, bir dəfə yazıb təkrar oxuyursan. Bitdi. Və ya çox oyunçu kodunuzun onların maşınında eyni reaksiya verib-vermədiyini yoxlamaq üçün JSON qeydlərini komanda yoldaşınızla dəyişdirirsiniz. Bu böyükdür. Əlçatanlıq Təcrübəçiləri Bu mənim ürəyimə yaxındır. Hər kəs "standart" nəzarətçi ilə oynamır. Adaptiv nəzarətçilər bəzən qəribə siqnallar atır. Bu alətlə siz nə baş verdiyini dəqiq görə bilərsiniz. Müəllimlər, tədqiqatçılar, kim olursa olsun. Onlar qeydləri tuta, müqayisə edə və ya girişləri yan-yana təkrarlaya bilərlər. Birdən gözəgörünməz şeylər üzə çıxır. Keyfiyyət Təminatı Testi Sınaqçılar adətən “burada düymələri əzdim və o, qırıldı” kimi qeydlər yazır. Çox faydalı deyil. İndi? Onlar dəqiq presləri tuta, jurnalı ixrac edə və göndərə bilərlər. Təxmin etmə. Tərbiyəçilər Dərsliklər və ya YouTube videoları hazırlayırsınızsa, xəyalların təkrarı qızıldır. UI bunun baş verdiyini göstərərkən, sözün əsl mənasında "Budur, nəzarətçi ilə nə etdim" deyə bilərsiniz. İzahları daha aydın edir. Oyunlardan kənar Bəli, bu təkcə oyunlara aid deyil. İnsanlar robotlar, sənət layihələri və əlçatanlıq interfeysləri üçün nəzarətçilərdən istifadə ediblər. Hər dəfə eyni problem: brauzer əslində nə görür? Bununla, təxmin etmək lazım deyil. Nəticə Nəzarətçi girişinin sazlanması həmişə kor uçmaq kimi hiss olunub. DOM və ya CSS-dən fərqli olaraq, gamepadlar üçün daxili inspektor yoxdur; bu, sadəcə səs-küydə asanlıqla itirilən konsoldakı xam nömrələrdir. Bir neçə yüz sətir HTML, CSS və JavaScript ilə biz fərqli bir şey qurduq:
Görünməz girişləri görünən edən vizual sazlayıcı. UI-ni təmiz və düzəldilə bilən laylı CSS sistemi. Onu demodan inkişaf etdirici alətə yüksəldən təkmilləşdirmələr dəsti (qeyd etmək, ixrac etmək, snapshotlar, xəyalların təkrarı).
Bu layihə CSS Cascade Layers-də Veb Platformanın gücünü bir az yaradıcılıqla qarışdırmaqla nə qədər irəli gedə biləcəyinizi göstərir. Tam olaraq izah etdiyim alət açıq mənbəlidir. GitHub repo-nu klonlaya və özünüz üçün cəhd edə bilərsiniz. Ancaq ən əsası, onu özünüz edə bilərsiniz. Öz təbəqələrinizi əlavə edin. Öz təkrar məntiqinizi yaradın. Onu oyun prototipinizlə birləşdirin. Və ya hətta təsəvvür etmədiyim şəkildə istifadə edin. Tədris, əlçatanlıq və ya məlumatların təhlili üçün. Günün sonunda, bu, yalnız gamepadların sazlanması ilə bağlı deyil. Bu, gizli girişlərə işıq salmaq və tərtibatçılara internetin hələ də tam əhatə etmədiyi aparatlarla işləmək üçün inam verməkdən ibarətdir. Beləliklə, nəzarət cihazınızı qoşun, redaktorunuzu açın və sınaqlara başlayın. Brauzerinizin və CSS-nin həqiqətən nəyə nail ola biləcəyinə təəccüblənə bilərsiniz.
