Голландский программист воссоздал 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.
- Культовую DOOM запустили на беспроводных наушниках, чтобы вы могли поиграть в нее удаленно
- Крысы научились стрелять в Doom после четырех лет экспериментов
- Почти все сотрудники id Software проголосовали за создание профсоюза после массовых сокращений внутри Microsoft
Об авторе
