👨 💻 Программист воссоздал DOOM без графического движка. Игра работает на CSS! 👨 💻
Удивительно, но факт: DOOM десятилетиями вдохновляет народных умельцев на эксперименты с геймдизайном и технологиями. Один фанат, например, решил перенести легендарный шутер в браузер — но, разумеется, не как есть, а с «изюминкой».
Линхеер описал детали и необходимые для работы игры трюки в статье на собственном сайте. Например, из материала следует, что на самом деле в этом порте шутера движется и крутится не сам игрок, а мир вокруг него (кодеру пришлось создать эту иллюзию из-за того, что в CSS нет камеры). Специально для любопытствующих умелец выложил все файлы cssDoom на GitHub, ссылка - https://github.com/NielsLeenheer/cssDOOM
Нильс Линхеер, нидерландский разработчик, выпустил так называемую cssDoom — переиздание знаменитого FPS, в котором за рендеринг изображения отвечает язык CSS. Путём хитрых манипуляций Линхеер сумел превратить оригинальные файлы в HTML-блоки (так называемые элементы ), на базе которых и рисуется графика; при этом за AI, перемещение главного героя и внутреннюю логику экшена отвечает JavaScript.
Как это работает: мы начинаем с линейных, боковых и секторных параметров из WAD‑файла Doom и строим сцену, создавая элементы , размещённые в 3D‑пространстве с помощью CSS‑преобразований. Но мы не устанавливаем эти свойства напрямую из JavaScript. Вместо этого мы устанавливаем пользовательские свойства с помощью исходной геометрии вершин DOOM. Эти значения берутся непосредственно из WAD‑файла. CSS вычисляет правильную ширину, высоту и 3D‑преобразования с помощью тригонометрических функций.
Сыграть в необычную версию DOOM можно через браузер. В шутере доступны все 9 уровней первого эпизода (Knee-Deep in the Dead) и 5 уровней сложности (в том числе Nightmare!). Помимо стандартного вида от первого лица, в этом издании также присутствует возможность перенести камеру под потолок в стиле Take No Prisoners от Raven Software.