Голландский программист воссоздал Doom целиком на CSS и HTML без графического движка

Нидерландский разработчик Нильс Линхеер, известный по созданию сайта HTML5test.com, провернул необычный эксперимент – он воссоздал классическую Doom так, что все стены, полы, бочки и враги отрисовываются браузером через обычные HTML-элементы и CSS-стили. По сути, JavaScript в этой версии отвечает только за игровую логику (перемещение, стрельбу, поведение врагов), а всю визуальную часть берет на себя CSS – язык, который изначально придумали для оформления веб-страниц, а не для построения 3D-сцен.

Работает это так. Данные из оригинальных файлов Doom превращаются в тысячи HTML-блоков (так называемых div-элементов), каждый из которых получает свои координаты из оригинальной игры. Дальше браузер с помощью CSS-трансформаций и математических функций вроде вычисления углов и расстояний сам размещает эти блоки в трехмерном пространстве. Полы, например, представляют собой div-элементы, повернутые на 90 градусов, а их форма вырезается через специальные CSS-функции для создания сложных контуров.

Если вам хочется разобраться в этом подробнее, то можно прочитать статью на сайте Нильса. Она довольно дотошная.

Камеры в CSS не существует, поэтому Линхеер придумал обходной путь – при движении игрока двигается весь мир в противоположную сторону. JavaScript передаёт координаты и угол обзора игрока через CSS-переменные, а стили сами пересчитывают смещение сцены. Враги и снаряды всегда повёрнуты лицом к игроку благодаря так называемой технике "билборда", а анимации спрайтов прокручиваются через CSS-анимации.

Освещение, двери, лифты – все реализовано через CSS. Уровень света в каждом секторе хранится в переменной, которая применяет фильтр яркости ко всему содержимому, так что темные комнаты затемняются автоматически. Открытие двери – это просто CSS-переход по пользовательскому свойству, а JavaScript лишь переключает атрибут состояния. Линхеер даже сделал игру адаптивной для разных размеров экрана через Flexbox и добавил режим наблюдателя с камерой от третьего лица.

Разумеется, у подхода есть ограничения – на больших картах с тысячами 3D-элементов браузеры начинают тормозить, а мобильный Safari и вовсе может упасть. Некоторые визуальные приемы оригинальной Doom, например отрисовка неба, не переносятся в CSS напрямую и требуют дополнительных хитростей. Сам Линхеер признает, что это не замена полноценным графическим технологиям вроде WebGL.

Сыграйте в нее прямо сейчас.