CSS'te DOOM mu? Programcı, grafik motoru olmadan tarayıcıda nişancı oyunu oluşturuyor
Arkadiy Andrienko
Bir Hollandalı programcı klasik nişancı oyunundan bir versiyon yayınladı DOOM grafik motoru olmadan çalışıyor. Oyundaki tüm grafikler CSS ile oluşturuluyor ve javascript yalnızca mantığı, oyuncu hareketini ve canavar davranışını yönetiyor.
Projenin adı cssDoom ve bunu oluşturmak için yazar, 1993 versiyonundan orijinal WAD dosyalarını aldı ve her sahne öğesini HTML bloklarına dönüştürdü; bunların uzaydaki konumu CSS dönüşümleri ile tanımlandı. Ana teknik sorun: CSS'in kamerası yok, bu yüzden yazar klasik bir numara ile bunu aştı — oyuncu hareket etmiyor, etrafındaki tüm dünya hareket ediyor. javascript, CSS'ye dört parametre gönderiyor: oyuncunun X, Y, Z koordinatları ve görüş açısı, CSS motoru ise tüm sahneyi ters yönde kaydırıyor ve döndürüyor. Farklı cihazlarda DOOM çalıştırmak artık eski bir haber , ama böyle yeniden çalıştırmak daha ilginç.
Ana sorun, tarayıcıların binlerce 3D dönüştürülmüş öğe için optimize edilmemiş olması. Büyük haritalar, iOS'taki Safari'nin çökmesine neden oluyor, bu yüzden bir kesme sistemi eklendi: görüş alanının dışındaki veya çok uzaktaki öğeler gizleniyor. Oyundaki gökyüzü ile ilgili bir sorun vardı. Orijinal DOOM, gerçek geometrinin üzerine 2D duvarlarda gökyüzü dokusunu hile yaparak çizer. Dürüst 3D'de bu numara çalışmıyor ve pencerelerden olmaması gereken şeyler görünüyor.
cssDoom'da, ilk bölümün dokuz seviyesi ve beş zorluk seviyesi mevcut. Standart birinci şahıs görünümünün yanı sıra, kameranın tavana çıktığı bir mod ve tamamen CSS ile hesaplanan bir üçüncü şahıs takip modu var.
Sizce — bu tür deneyimlerin “CSS DOOM'u çalıştırabilir mi?” sorusunun ötesinde pratik bir kullanımı var mı? Yoksa gerçek geliştirmeyi etkilemeyen sadece teknik bir gösteri mi? Düşüncelerinizi yorumlarda paylaşın.