Bir denetleyiciyi taktığınızda, düğmeleri ezersiniz, çubukları hareket ettirirsiniz, tetikleyicileri çekersiniz… ve bir geliştirici olarak bunların hiçbirini göremezsiniz. Tarayıcı elbette bunu algılıyor, ancak sayıları konsola kaydetmediğiniz sürece görünmez. Gamepad API'sinin baş ağrısı da bu. Yıllardır ortalıkta dolaşıyor ve aslında oldukça güçlü. Düğmeleri, çubukları, tetikleyicileri, işleri okuyabilirsiniz. Ama çoğu insan ona dokunmuyor. Neden? Çünkü geri dönüş yok. Geliştirici araçlarında panel yok. Kontrolörün düşündüğünüz şeyi yapıp yapmadığını bilmenin net bir yolu yok. Kör uçuyormuş gibi hissettiriyor. Bu beni küçük bir araç geliştirecek kadar rahatsız etti: Gamepad Cascade Debugger. Konsol çıktısına bakmak yerine denetleyicinin canlı, etkileşimli bir görünümünü elde edersiniz. Bir şeye bastığınızda ekranda tepki verir. CSS Basamak Katmanları sayesinde stiller düzenli kalır, böylece hata ayıklamak daha kolay olur. Bu yazıda size denetleyicilerde hata ayıklamanın neden bu kadar zor olduğunu, CSS'nin bunu temizlemeye nasıl yardımcı olduğunu ve kendi projeleriniz için nasıl yeniden kullanılabilir bir görsel hata ayıklayıcı oluşturabileceğinizi göstereceğim.
Hepsini günlüğe kaydedebilseniz bile, kısa sürede okunamayan konsol spam'leriyle karşılaşırsınız. Örneğin: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Hangi düğmeye basıldığını söyleyebilir misiniz? Belki, ama ancak gözlerinizi yorduktan ve birkaç girişi kaçırdıktan sonra. Yani hayır, konu girdileri okumaya geldiğinde hata ayıklamak kolay olmuyor. Sorun 3: Yapı Eksikliği Hızlı bir görselleştiriciyi bir araya getirseniz bile stiller hızla dağınık hale gelebilir. Varsayılan, etkin ve hata ayıklama durumları çakışabilir ve net bir yapı olmazsa CSS'niz kırılgan hale gelir ve genişletilmesi zorlaşır. CSS Basamak Katmanları yardımcı olabilir. Stilleri önceliğe göre sıralanan "katmanlar" halinde gruplandırırlar, böylece spesifiklikle mücadele etmeyi ve "Hata ayıklama stilim neden görünmüyor?" diye tahmin etmeyi bırakırsınız. Bunun yerine ayrı endişelerinizi sürdürüyorsunuz:
Temel: Kontrolörün standart, ilk görünümü. Etkin: Basılan düğmeler ve taşınan çubuklar için vurgular. Hata Ayıklama: Geliştiriciler için kaplamalar (örneğin, sayısal okumalar, kılavuzlar vb.).
CSS'de katmanları buna göre tanımlayacak olsaydık: /* en düşükten en yükseğe öncelik */ @katman tabanı, aktif, hata ayıklama;
@katman tabanı { /* ... */ }
@katman etkin { /* ... */ }
@katman hata ayıklaması { /* ... */ }
Her katman tahmin edilebileceği şekilde istiflendiğinden hangi kuralların kazanacağını her zaman bilirsiniz. Bu öngörülebilirlik, hata ayıklamayı yalnızca kolaylaştırmakla kalmaz, aslında yönetilebilir hale getirir. Sorunu (görünmez, dağınık girdi) ve yaklaşımı (Cascade Layers ile oluşturulmuş görsel bir hata ayıklayıcı) ele aldık. Şimdi hata ayıklayıcıyı oluşturmak için adım adım süreci izleyeceğiz. Hata Ayıklayıcı Konsepti Gizli girişi görünür hale getirmenin en kolay yolu, onu ekrana çizmektir. Bu hata ayıklayıcının yaptığı budur. Düğmeler, tetikleyiciler ve oyun çubuklarının tümü görsel hale gelir.
A'ya basın: Bir daire yanar. Çubuğu itin: Daire etrafında kayar. Tetiği yarıya kadar çekin: Çubuk yarıya kadar dolar.
Artık 0'lara ve 1'lere bakmıyorsunuz, aslında kontrol cihazının canlı tepkisini izliyorsunuz. Elbette, varsayılan, basılmış, hata ayıklama bilgileri ve hatta belki bir kayıt modu gibi durumları bir araya getirmeye başladığınızda, CSS büyümeye ve daha karmaşık hale gelmeye başlar. Kademeli katmanların kullanışlı olduğu yer burasıdır. İşte sadeleştirilmiş bir örnek: @katman tabanı { .düğme { arka plan: #222; sınır yarıçapı: %50; genişlik: 40 piksel; yükseklik: 40 piksel; } }
@katman etkin { .button.basıldı { arka plan: #0f0; /* parlak yeşil */ } }
@katman hata ayıklaması { .button::sonra { içerik: attr(veri-değeri); yazı tipi boyutu: 12 piksel; renk: #fff; } }
Katman sırası önemlidir: temel → etkin → hata ayıklama.
taban denetleyiciyi çizer. active basılan durumları yönetir. kaplamalarda hata ayıklama atılır.
Bunu bu şekilde bölmek, tuhaf özgüllük savaşlarıyla savaşmadığınız anlamına gelir. Her katmanın kendine ait bir yeri vardır ve neyin kazanacağını her zaman bilirsiniz. İnşa Etmek Önce ekrana bir şeyler koyalım. İyi görünmesine gerek yok; üzerinde çalışabileceğimiz bir şey olması için var olması yeterli.
Oyun Kumandası Kademeli Hata Ayıklayıcı
Bunlar kelimenin tam anlamıyla sadece kutular. Henüz heyecan verici değil, ancak bize daha sonra CSS ve JavaScript ile kavrayabileceğimiz tanıtıcılar veriyor. Tamam, burada basamaklı katmanlar kullanıyorum çünkü daha fazla durum eklediğinizde bu, her şeyin düzenli kalmasını sağlar. İşte kaba bir geçiş:
/* ==================================== KASKAT KATMANLARI KURULUMU Sıralama önemlidir: temel → etkin → hata ayıklama =================================== */
/* Katman sırasını önceden tanımlayın */ @katman tabanı, aktif, hata ayıklama;
/* Katman 1: Temel stiller - varsayılan görünüm */ @katman tabanı { .düğme { arka plan: #333; sınır yarıçapı: %50; genişlik: 70 piksel; yükseklik: 70 piksel; ekran: esnek; yasla-içerik: merkez; hizalama öğeleri: merkez; }
.duraklatma { genişlik: 20 piksel; yükseklik: 70 piksel; arka plan: #333; ekran: satır içi blok; } }
/* Katman 2: Etkin durumlar - basılan düğmeleri yönetir */ @katman etkin { .button.active { arka plan: #0f0; /* Basıldığında parlak yeşil */ dönüşüm: ölçek(1.1); /* Düğmeyi biraz büyütür */ }
.pause.active { arka plan: #0f0; dönüşüm: ölçekY(1.1); /* Basıldığında dikey olarak uzar */ } }
/* Katman 3: Kaplamalarda hata ayıklama - geliştirici bilgisi */ @katman hata ayıklaması { .button::sonra { içerik: attr(veri-değeri); /* Sayısal değeri gösterir */ yazı tipi boyutu: 12 piksel; renk: #fff; } }
Bu yaklaşımın güzelliği, her katmanın net bir amacı olmasıdır. Temel katman hiçbir zaman etkin katmanı geçersiz kılamaz ve etkin, özgüllükten bağımsız olarak hiçbir zaman hata ayıklamayı geçersiz kılamaz. Bu, genellikle hata ayıklama araçlarını rahatsız eden CSS özgüllüğü savaşlarını ortadan kaldırır. Şimdi bazı kümelerin karanlık bir arka plan üzerinde oturduğu görülüyor. Dürüst olmak gerekirse çok da kötü değil.
JavaScript'i ekleme JavaScript zamanı. Burası denetleyicinin aslında bir şeyler yaptığı yerdir. Bunu adım adım inşa edeceğiz. 1. Adım: Durum Yönetimini Ayarlayın Öncelikle hata ayıklayıcının durumunu izlemek için değişkenlere ihtiyacımız var: // ==================================== // DEVLET YÖNETİMİ // ====================================
çalıştıralım = false; // Hata ayıklayıcının etkin olup olmadığını izler izin ver rafId; // iptal için requestAnimationFrame kimliğini saklar
Bu değişkenler sürekli olarak oyun kumandası girişini okuyan animasyon döngüsünü kontrol eder. 2. Adım: DOM Referanslarını Alın Daha sonra güncelleyeceğimiz tüm HTML öğelerine referanslar alacağız: // ==================================== // DOM ELEMAN REFERANSLARI // ====================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const duraklatma1 = document.getElementById("pause1"); const duraklatma2 = document.getElementById("pause2"); const durumu = document.getElementById("durum");
Bu referansları önceden saklamak, DOM'u tekrar tekrar sorgulamaktan daha etkilidir. 3. Adım: Yedek Klavye Ekleme Fiziksel denetleyici olmadan test yapmak için klavye tuşlarını düğmelerle eşleştireceğiz: // ==================================== // KLAVYE GERİ DÖNÜŞÜ (kontrolör olmadan test etmek için) // ====================================
const anahtar Haritası = { "a": btnA, "b": btnB, "x": btnX, "p": [duraklatma1, duraklatma2] // 'p' tuşu her iki duraklatma çubuğunu da kontrol eder };
Bu, klavyedeki tuşlara basarak kullanıcı arayüzünü test etmemizi sağlar. Adım 4: Ana Güncelleme Döngüsünü Oluşturun İşte sihrin gerçekleştiği yer burası. Bu işlev sürekli olarak çalışır ve oyun kumandasının durumunu okur: // ==================================== // ANA OYUN APARATI GÜNCELLEME DÖNGÜSÜ // ====================================
işlev güncellemeGamepad() { // Bağlı tüm oyun kumandalarını al const oyun kumandaları = navigator.getGamepads(); if (!gamepad'ler) geri dönerse;
// İlk bağlanan gamepad'i kullan const gp = oyun kumandaları[0];
eğer (gp) { // "Aktif" sınıfı değiştirerek düğme durumlarını güncelleyin btnA.classList.toggle("aktif", gp.buttons[0].pressed); btnB.classList.toggle("etkin", gp.buttons[1].pressed); btnX.classList.toggle("etkin", gp.buttons[2].pressed);
// Tutamaç duraklatma düğmesi (çoğu denetleyicide düğme dizini 9) const duraklatmaBasıldı = gp.buttons[9].basıldı; Pause1.classList.toggle("etkin", PausePressed); Pause2.classList.toggle("etkin", PausePressed);
// Durum ekranı için o anda basılan düğmelerin bir listesini oluşturun basalım = []; gp.buttons.forEach((btn, i) => { if (btn.pressed)press.push("Düğme " + i); });
// Herhangi bir tuşa basıldığında durum metnini güncelle if (basılan.uzunluk > 0) { status.textContent = "Basıldı: " + basıldı.join(", "); } }
// Hata ayıklayıcı çalışıyorsa döngüye devam et eğer (çalışıyor) { rafId = requestAnimationFrame(updateGamepad); } }
classList.toggle() yöntemi, CSS katman stillerimizi tetikleyen, düğmeye basılıp basılmadığına bağlı olarak aktif sınıfı ekler veya kaldırır. Adım 5: Klavye Olaylarını Yönetme Bu olay dinleyicileri klavye geri dönüşünün çalışmasını sağlar: // ==================================== // KLAVYE OLAY İŞLEYİCİLERİ // ====================================
document.addEventListener("tuş aşağı", (e) => { if (anahtar Haritası[e.anahtar]) { // Tekli veya çoklu elemanları ele al if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("aktif")); } başka { keyMap[e.key].classList.add("aktif"); } status.textContent = "Tuşa basıldı: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { if (anahtar Haritası[e.anahtar]) { // Anahtar bırakıldığında aktif durumu kaldır if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("aktif")); } başka { keyMap[e.key].classList.remove("aktif"); } status.textContent = "Anahtar serbest bırakıldı: " + e.key.toUpperCase(); } });
Adım 6: Başlat/Durdur Denetimini Ekleyin Son olarak hata ayıklayıcıyı açıp kapatmanın bir yoluna ihtiyacımız var: // ==================================== // HATA AYIKLAYICIYI AÇMA/KAPATMA // ====================================
document.getElementById("toggle").addEventListener("tıklayın", () => { koşuyor = !koşuyor; //Çalışma durumunu çevir
eğer (çalışıyor) { status.textContent = "Hata ayıklayıcı çalışıyor..."; updateGamepad(); // Güncelleme döngüsünü başlat } başka { status.textContent = "Hata ayıklayıcı etkin değil"; cancelAnimationFrame(rafId); // Döngüyü durdur } });
Yani evet, bir düğmeye basın ve parlıyor. Çubuğu ittiğinizde hareket eder. İşte bu. Bir şey daha: ham değerler. Bazen ışıkları değil sadece sayıları görmek istersiniz.
Bu aşamada şunları görmelisiniz:
Basit bir ekran denetleyicisi, Etkileşim kurduğunuzda tepki veren düğmeler ve Basılan düğme endekslerini gösteren isteğe bağlı bir hata ayıklama okuması.
Bunu daha az soyut hale getirmek için, gerçek zamanlı tepki veren ekran denetleyicisinin hızlı bir demosunu burada bulabilirsiniz:
Artık Kaydı Başlat'a basmak, Kaydı Durdur'a basana kadar her şeyi günlüğe kaydeder. 2. Verileri CSV/JSON'a Aktarma Bir günlüğümüz olduğunda, onu kaydetmek isteriz.
1. Adım: İndirme Yardımcısını Oluşturun Öncelikle tarayıcıda dosya indirme işlemlerini gerçekleştirecek bir yardımcı fonksiyona ihtiyacımız var: // ==================================== // DOSYA İNDİRME YARDIMCISI // ====================================
function downloadFile(dosya adı, içerik, tür = "metin/düz") { // İçerikten bir blob oluştur const blob = new Blob([içerik], { tür }); const url = URL.createObjectURL(blob);
// Geçici bir indirme bağlantısı oluşturun ve tıklayın const a = document.createElement("a"); a.href = url; a.indirme = dosya adı; a.tıkla();
// İndirme sonrasında nesne URL'sini temizleyin setTimeout(() => URL.revokeObjectURL(url), 100); }
Bu işlev, verilerinizden bir Blob (ikili büyük nesne) oluşturarak, bunun için geçici bir URL oluşturarak ve programlı olarak bir indirme bağlantısına tıklayarak çalışır. Temizleme, bellek sızıntısı yaşamamamızı sağlar. 2. Adım: JSON Dışa Aktarmayı İşleyin JSON, veri yapısının tamamını korumak için mükemmeldir:
// ==================================== // JSON OLARAK DIŞA AKTAR // ====================================
document.getElementById("export-json").addEventListener("tıklayın", () => { // Dışa aktarılacak bir şey olup olmadığını kontrol edin if (!kareler.uzunluk) { console.warn("Dışa aktarılacak kayıt yok."); dönüş; }
// Meta veriler ve çerçeveler içeren bir veri yükü oluşturun sabit yük = { createdAt: new Date().toISOString(), çerçeveler };
// Formatlanmış JSON olarak indir dosya indir( "gamepad-log.json", JSON.stringify(yük, boş, 2), "uygulama/json" ); });
JSON formatı her şeyin yapılandırılmış ve kolayca ayrıştırılabilir olmasını sağlar; bu da onu geliştirme araçlarına geri yüklemek veya ekip arkadaşlarıyla paylaşmak için ideal kılar. 3. Adım: CSV Dışa Aktarmayı İşleyin CSV dışa aktarmaları için hiyerarşik verileri satırlar ve sütunlar halinde düzleştirmemiz gerekir:
//=================================== // CSV OLARAK DIŞA AKTAR // ====================================
document.getElementById("export-csv").addEventListener("tıklayın", () => { // Dışa aktarılacak bir şey olup olmadığını kontrol edin if (!kareler.uzunluk) { console.warn("Dışa aktarılacak kayıt yok."); dönüş; }
// CSV başlık satırını oluşturun (zaman damgası sütunları, tüm düğmeler, tüm eksenler) const başlıkButtons = çerçeveler[0].buttons.map((_, i) => btn${i}); const başlıkAxes = çerçeveler[0].axes.map((_, i) => eksen${i}); const başlık = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// CSV veri satırları oluştur const satırlar = çerçeveler.map(f => { const btnVals = f.buttons.map(b => b.değer); return [f.t, ...btnVals, ...f.axes].join("); }).join("\n");
// CSV olarak indir downloadFile("gamepad-log.csv", başlık + satırlar, "metin/csv"); });
CSV, veri analizi için mükemmeldir çünkü doğrudan Excel veya Google E-Tablolar'da açılarak grafikler oluşturmanıza, verileri filtrelemenize veya desenleri görsel olarak belirlemenize olanak tanır. Artık dışa aktarma düğmeleri bulunduğuna göre panelde iki yeni seçenek göreceksiniz: JSON'u Dışa Aktar ve CSV'yi Dışa Aktar. Ham günlüğü geliştirme araçlarınıza geri atmak veya yapıyı kurcalamak istiyorsanız JSON güzeldir. Öte yandan CSV, doğrudan Excel veya Google E-Tablolar'da açılarak girdilerin grafiğini çizebilir, filtreleyebilir veya karşılaştırabilirsiniz. Aşağıdaki şekil, bu ekstra kontrollerle panelin nasıl göründüğünü göstermektedir.
3. Anlık Görüntü Sistemi Bazen tam bir kayda ihtiyacınız olmaz, yalnızca giriş durumlarının hızlı bir "ekran görüntüsüne" ihtiyacınız olur. Anlık Görüntü Al düğmesinin yardımcı olduğu yer burasıdır.
Ve JavaScript:
// ==================================== // ANLIK GÖRÜNTÜ AL // ====================================
document.getElementById("anlık görüntü").addEventListener("tıklayın", () => { // Bağlı tüm oyun kumandalarını al const pedleri = navigator.getGamepads(); const activePad'ler = [];
// Bağlı her gamepad'in durumunu döngüleyin ve yakalayın for (pedlerin sabit gp'si) { eğer (!gp) devam ederse; // Boş slotları atla
activePads.push({ kimlik: gp.id, // Denetleyici adı/modeli zaman damgası: performans.now(), düğmeler: gp.buttons.map(b => ({ basıldı: b. basıldı, değer: b.değer })), eksenler: [...gp.axes] }); }
// Gamepad'in bulunup bulunmadığını kontrol edin if (!activePads.length) { console.warn("Anlık görüntü için bağlı oyun kumandası yok."); warning("Kontrol cihazı algılanmadı!"); dönüş; }
// Log'layıp kullanıcıyı bilgilendiriyoruz console.log("Anlık Görüntü:", activePad'ler); alarm(Anlık görüntü alındı! Yakalanan ${activePads.length} denetleyici(ler).); });
Anlık görüntüler, kontrol cihazınızın tam durumunu belirli bir anda dondurur. 4. Hayalet Giriş Tekrarı Şimdi eğlenceli olana geçelim: Hayalet giriş tekrarı. Bu, bir günlüğü alır ve sanki bir hayalet oynatıcı denetleyiciyi kullanıyormuş gibi görsel olarak oynatır.
Tekrar oynatmak için JavaScript: // ==================================== // HAYALET TEKRARI // ====================================
document.getElementById("tekrar oynat").addEventListener("tıklayın", () => { // Tekrar oynatılacak bir kaydımız olduğundan emin olun if (!kareler.uzunluk) { warning("Tekrar oynatılacak kayıt yok!"); dönüş; }
console.log("Hayalet tekrarı başlatılıyor...");
// Senkronize oynatma için zamanlamayı izle let startTime = performans.now(); çerçeveIndex = 0 olsun;
// Animasyon döngüsünü tekrar oynat fonksiyon adımı() { const şimdi = performans.now(); const geçen = şimdi - startTime;
// Şu ana kadar oluşması gereken tüm kareleri işliyoruz while (frameIndex < kareler.uzunluk && kareler[frameIndex].t <= geçen) { const çerçeve = çerçeveler[frameIndex];
// Kullanıcı arayüzünü kaydedilen düğme durumlarıyla güncelleyin btnA.classList.toggle("etkin", çerçeve.buttons[0].pressed); btnB.classList.toggle("etkin", çerçeve.buttons[1].basıldı); btnX.classList.toggle("etkin", çerçeve.buttons[2].pressed);
// Durum gösterimini güncelle basalım = []; çerçeve.buttons.forEach((btn, i) => { if (btn.pressed) basıldı.push("Düğme " + i); }); if (basılan.uzunluk > 0) { status.textContent = "Hayalet: " + baskılı.join(", "); }
çerçeveIndex++; }
// Daha fazla kare varsa döngüye devam et if (frameIndex < kare.uzunluk) { requestAnimationFrame(adım); } başka { console.log("Tekrar oynatbitti."); status.textContent = "Tekrar oynatma tamamlandı"; } }
// Tekrar oynatmayı başlat adım(); });
Hata ayıklamayı biraz daha pratik hale getirmek için hayalet tekrarı ekledim. Bir oturumu kaydettikten sonra, tekrar oynat tuşuna basabilir ve kullanıcı arayüzünün, sanki pad'i çalıştıran bir hayalet oyuncu gibi, bunu gerçekleştirmesini izleyebilirsiniz. Bunun için panelde yeni bir Hayaleti Yeniden Oynat düğmesi görünüyor.
Kaydet'e basın, denetleyiciyle biraz uğraşın, durun ve tekrar oynatın. Kullanıcı arayüzü, girdilerinizi takip eden bir hayalet gibi, yaptığınız her şeyi yansıtır. Neden bu ekstralarla uğraşasınız ki?
Kaydetme/dışa aktarma, test uzmanlarının tam olarak ne olduğunu göstermesini kolaylaştırır. Anlık görüntüler, zamanın bir anını dondurur; tuhaf hataların peşindeyken son derece kullanışlıdır. Hayalet tekrarı, eğitimler, erişilebilirlik kontrolleri veya yalnızca kontrol kurulumlarını yan yana karşılaştırmak için mükemmeldir.
Bu noktada, bu artık sadece düzgün bir demo değil, gerçekten uygulamaya koyabileceğiniz bir şey. Gerçek Dünya Kullanım Durumları Artık çok şey yapabilen bu hata ayıklayıcıya sahibiz. Canlı girişi gösterir, günlükleri kaydeder, bunları dışa aktarır ve hatta bazı şeyleri tekrar oynatır. Ama asıl soru şu: Aslında kimin umurunda? Bu kimin işine yarar? Oyun Geliştiricileri Denetleyiciler işin bir parçası, ancak hata ayıklamak mı? Genellikle bir ağrı. ↓ → + yumruk gibi bir dövüş oyunu kombinasyonunu test ettiğinizi hayal edin. Dua etmek yerine aynı şekilde iki kez basarsınız, bir kez kaydedersiniz ve tekrar oynatırsınız. Bitti. Veya çok oyunculu kodunuzun onun makinesinde de aynı şekilde tepki verip vermediğini kontrol etmek için bir takım arkadaşınızla JSON günlüklerini değiştirirsiniz. Bu çok büyük. Erişilebilirlik Uygulayıcıları Bu kalbime yakın. Herkes “standart” bir kontrol cihazıyla oynamaz. Uyarlanabilir denetleyiciler bazen tuhaf sinyaller verir. Bu araçla tam olarak ne olduğunu görebilirsiniz. Öğretmenler, araştırmacılar, kim olursa olsun. Günlükleri alabilir, karşılaştırabilir veya girdileri yan yana tekrar oynatabilirler. Bir anda görünmez şeyler ortaya çıkıyor. Kalite Güvence Testi Testçiler genellikle "Buradaki düğmeleri ezdim ve kırıldı" gibi notlar yazarlar. Pek yararlı değil. Şimdi mi? Presleri tam olarak yakalayabilir, günlüğü dışa aktarabilir ve gönderebilirler. Tahmin yok. Eğitimciler Öğretici videolar veya YouTube videoları hazırlıyorsanız hayalet tekrar oynatma altın değerindedir. Kullanıcı arayüzü bunun gerçekleştiğini gösterirken kelimenin tam anlamıyla "İşte denetleyiciyle şunu yaptım" diyebilirsiniz. Açıklamaları çok daha net hale getiriyor. Oyunların Ötesinde Ve evet, bu sadece oyunlarla ilgili değil. İnsanlar robotlar, sanat projeleri ve erişilebilirlik arayüzleri için denetleyicileri kullandı. Her seferinde aynı sorun: Tarayıcı gerçekte ne görüyor? Bununla tahmin etmenize gerek yok. Sonuç Bir denetleyici girişinde hata ayıklamak her zaman kör uçmak gibi hissettirdi. DOM veya CSS'den farklı olarak oyun kumandaları için yerleşik bir denetleyici yoktur; bunlar yalnızca konsoldaki ham sayılardır ve gürültüde kolayca kaybolur. Birkaç yüz satırlık HTML, CSS ve JavaScript ile farklı bir şey oluşturduk:
Görünmez girişleri görünür kılan görsel bir hata ayıklayıcı. Kullanıcı arayüzünü temiz ve hata ayıklanabilir tutan katmanlı bir CSS sistemi. Onu demodan geliştirici aracına yükselten bir dizi geliştirme (kaydetme, dışa aktarma, anlık görüntüler, hayalet tekrar oynatma).
Bu proje, Web Platformunun gücünü CSS Cascade Katmanlarında biraz yaratıcılıkla birleştirerek ne kadar ileri gidebileceğinizi gösteriyor. Az önce bütünüyle anlattığım araç açık kaynaklıdır. GitHub deposunu kopyalayıp kendiniz deneyebilirsiniz. Ama daha da önemlisi bunu kendinize ait hale getirebilirsiniz. Kendi katmanlarınızı ekleyin. Kendi tekrar mantığınızı oluşturun. Bunu oyun prototipinize entegre edin. Hatta onu hayal bile etmediğim şekillerde kullanıyorum. Öğretim, erişilebilirlik veya veri analizi için. Günün sonunda bu sadece oyun kumandalarında hata ayıklamakla ilgili değil. Bu, gizli girdilere ışık tutmak ve geliştiricilere web'in hâlâ tam olarak benimsemediği donanımlarla çalışma konusunda güven vermekle ilgilidir. O halde denetleyicinizi takın, düzenleyicinizi açın ve denemeye başlayın. Tarayıcınızın ve CSS'nizin gerçekten neler başarabileceğine şaşırabilirsiniz.
