DOOM di CSS? Programmer membuat browser merender penembak tanpa mesin grafis
Arkadiy Andrienko
A programmer from the Netherlands merilis versi dari penembak klasik DOOM yang berjalan tanpa mesin grafis. Semua grafik dalam permainan dirender melalui CSS, dan javascript hanya menangani logika, pergerakan pemain, dan perilaku monster.
Proyek ini disebut cssDoom, dan untuk membuatnya, penulis mengambil file WAD asli dari versi 1993 dan mengubah setiap elemen adegan menjadi blok HTML, dengan posisi mereka di ruang didefinisikan melalui transformasi CSS. Masalah teknis utama: CSS tidak memiliki kamera, jadi penulis mengakalinya dengan trik klasik — pemain tidak bergerak, seluruh dunia di sekitarnya yang bergerak. javascript mengirimkan empat parameter ke CSS: koordinat X, Y, Z pemain dan sudut pandang, dan mesin CSS menggeser dan memutar seluruh adegan ke arah yang berlawanan. Menjalankan DOOM di berbagai perangkat adalah berita lama sekarang, tetapi mengubahnya seperti ini lebih menarik.
Masalah utama adalah bahwa browser tidak dioptimalkan untuk ribuan elemen yang ditransformasi 3D. Peta besar menyebabkan Safari di iOS mengalami crash, jadi sistem pengurangan ditambahkan: elemen di luar bidang pandang atau terlalu jauh disembunyikan. Ada masalah dengan langit dalam permainan. Karena DOOM asli menipu dan menggambar tekstur langit di dinding 2D di atas geometri nyata. Dalam 3D yang jujur, trik itu tidak berfungsi, dan melalui jendela Anda dapat melihat hal-hal yang seharusnya tidak ada di sana.
Di cssDoom, semua sembilan level dari episode pertama dan lima tingkat kesulitan tersedia. Selain tampilan orang pertama standar, ada mode di mana kamera naik ke langit-langit, serta mode mengikuti orang ketiga — dan posisi kamera di sana dihitung sepenuhnya dalam CSS.
Kode sumber ada di GitHub dan siapa pun dapat memainkan versi browser.
Apa pendapat Anda — apakah eksperimen seperti ini memiliki kegunaan praktis di luar "bisakah CSS menjalankan DOOM?" Atau apakah ini hanya aksi teknis yang tidak mempengaruhi pengembangan nyata? Bagikan pemikiran Anda di kolom komentar.