cssQuake: Quake tarayıcıda HTML ve CSS ile çalışıyor, canvas yok

Layoutit Studio'nun projesi cssQuake, id Software'in 1996 yapımı nişancı oyunu Quake'i tarayıcıda çalıştırıyor — ama bu tür portların genelde yaptığı gibi değil. Burada ne bir WebGL bağlamı ne de canvas öğesi var: oyunun BSP dünya geometrisi, PolyCSS 3D motoru kullanılarak CSS matrix3d dönüşümleriyle konumlandırılmış gerçek HTML öğeleriyle ifade ediliyor. Proje Hacker News'te paylaşıldı ve 548 puan topladı.

Canvas yerine gerçek DOM

cssQuake'te dünya yüzeyleri DOM düğümlerine dönüşüyor: her biri CSS matrix3d dönüşümüyle konumlandırılıyor, pikselli CSS arka planlarıyla dokulanıyor ve canvas'a çizilmek yerine mesh'ler halinde gruplanıyor. Sonuç, tarayıcının geliştirici araçlarında herhangi bir sayfa gibi incelenebiliyor. Depo, projeyi BSP dünyalarını gerçek HTML/CSS 3D geometrisi olarak çizen ve TypeScript ile çalışan bir Quake portu olarak tanımlıyor.

Quake verilerinin ön işlenmesi

Çizimi CSS üstlendiği için oyun hazırlanmış varlıklarla geliyor. Bir ön işlemci, orijinal Quake verilerini tarayıcıya hazır JSON'a, görsel varlıklara ve PolyCSS render paketlerine dönüştürüyor. Dokular Quake paleti üzerinden PNG dosyalarına çözülüyor, animasyonlu doku dizileri CSS animasyon girdisine dönüşüyor ve bölüm haritaları önceden derlenmiş render paketleri alıyor; böylece tarayıcı başlangıçta her yüzeyi yeniden kurmak yerine hazır dünya DOM'unu ekliyor. Depodaki hazırlık adımı shareware veya yerel PAK dosyalarını okuyor; orijinal Quake oyun verileri depoya dahil değil.

Oynamak ve hata ayıklamak

Oyun standart klavye ve fare denetimlerini destekliyor — hareket için WASD, bakış için fare, ateş için tıklama, zıplamak için boşluk, koşmak için shift, çömelmek için ctrl — ve ok tuşlarıyla gezilen bir menüsü var. Hata ayıklama bölümü konturları, istatistik panelini ve FPS sayacını gösteriyor; anahtarlar dinamik ışıklandırma, parçacıklar, düşmanlar, nişangâh, hasar ve hareketi kapsıyor; bu da portu oyun kadar gösterim için de kullanışlı kılıyor. Ayrıca harita, fraglimit ve oyuncu sınırı seçilerek oda kurulabilen bir çok oyunculu ekran ve kayıt modu bulunuyor.

Gömme ve lisans

cssQuake bir iframe içinde çalışabiliyor; relayKeys=1 eklenmesi oyunun üst sayfaya filtrelenmiş oyun tuşu olaylarını cssquake:key mesajları olarak göndermesini sağlıyor ve üst sayfa bunları okumadan önce event.origin değerini doğrulamalı. Kaynak kodu GPL-2.0-only lisansıyla GitHub'da bulunuyor; depo 182 yıldız ve 292 commit topladı. Çizim işini tarayıcının kendi yerleşim motoru yaptığı için proje aynı zamanda CSS dönüşümlerinin sınırlarının bir sınavı: 1996'dan bir birinci şahıs nişancı, biçimlendirilmiş DOM düğümleri olarak çalışıyor.