cssQuake: Quake brauzerdə HTML və CSS ilə işləyir, canvas yoxdur

Layoutit Studio-nun layihəsi cssQuake, id Software-in 1996-cı il atıcı oyunu Quake-i brauzerdə işlədir — amma bu cür portların adətən etdiyi kimi deyil. Burada nə WebGL konteksti, nə də canvas elementi var: oyunun BSP dünya həndəsəsi PolyCSS 3D mühərrikindən istifadə edilərək CSS matrix3d çevrilmələri ilə yerləşdirilmiş əsl HTML elementləri ilə ifadə olunur. Layihə Hacker News-da paylaşıldı və 548 bal topladı.

Canvas yerinə əsl DOM

cssQuake-də dünya səthləri DOM düyünlərinə çevrilir: hər biri CSS matrix3d çevrilməsi ilə yerləşdirilir, pikselvari CSS fonları ilə teksturalanır və canvas üzərinə çəkilmək əvəzinə mesh-lərə qruplaşdırılır. Nəticəni brauzerin tərtibatçı alətlərində istənilən adi səhifə kimi incələmək mümkündür. Repozitoriya layihəni BSP dünyalarını əsl HTML/CSS 3D həndəsəsi kimi göstərən və TypeScript ilə işləyən Quake portu kimi təsvir edir.

Quake məlumatlarının ilkin emalı

Renderingi CSS etdiyi üçün oyun hazır resurslarla gəlir. İlkin emal komponenti Quake-in orijinal məlumatlarını brauzer üçün hazır JSON-a, şəkil resurslarına və PolyCSS render paketlərinə çevirir. Teksturalar Quake palitrası vasitəsilə PNG fayllarına çözülür, animasiyalı tekstura ardıcıllıqları CSS animasiya girişinə çevrilir, epizod xəritələri isə əvvəlcədən yığılmış render paketləri alır; beləcə brauzer hər səthi başlanğıcda yenidən qurmaq əvəzinə hazır dünya DOM-unu birləşdirir. Repozitoriyadakı hazırlıq addımı shareware və ya yerli PAK fayllarını oxuyur; Quake-in orijinal oyun məlumatları repozitoriyaya daxil deyil.

Oynamaq və sazlamaq

Oyun standart klaviatura və siçan idarəetməsini dəstəkləyir — hərəkət üçün WASD, baxmaq üçün siçan, atəş üçün klik, tullanmaq üçün boşluq, qaçmaq üçün shift, çömmək üçün ctrl — həmçinin ox düymələri ilə idarə olunan menyu var. Sazlama bölməsi konturları, statistika panelini və FPS sayğacını göstərir; açarlar isə dinamik işıqlandırma, hissəciklər, düşmənlər, nişangah, zərər və hərəkəti əhatə edir ki, bu da portu oyun qədər nümayiş üçün də faydalı edir. Bundan başqa, xəritə, fraglimit və oyunçu limiti seçilərək otaq yaratmaq üçün multiplayer ekranı və yazma rejimi mövcuddur.

Yerləşdirmə və lisenziya

cssQuake iframe içində işləyə bilər; relayKeys=1 əlavə etməklə oyun valideyn səhifəyə süzülmüş oyun düymə hadisələrini cssquake:key mesajları kimi göndərir və valideyn səhifə onları oxumazdan əvvəl event.origin dəyərini yoxlamalıdır. Mənbə kodu GPL-2.0-only lisenziyası ilə yayımlanır və GitHub-da yerləşir; repozitoriya 182 ulduz və 292 commit toplayıb. Çəkilişi brauzerin öz yerləşdirmə mühərriki etdiyi üçün layihə həm də CSS çevrilmələrinin hüdudlarının sınağıdır: 1996-cı ilin birinci şəxs atıcısı üslublandırılmış DOM düyünləri kimi işləyir.