cssQuake: Quake працює в браузері на HTML і CSS, без canvas

cssQuake — проєкт студії Layoutit — запускає шутер id Software Quake 1996 року в браузері, але не так, як це зазвичай роблять подібні порти. Тут немає ні контексту WebGL, ні елемента canvas: геометрія BSP-світу гри подана справжніми HTML-елементами, розставленими CSS-трансформаціями matrix3d за допомогою 3D-рушія PolyCSS. Проєкт опублікували на Hacker News, де він зібрав 548 балів.

Справжній DOM замість canvas

У cssQuake поверхні світу стають DOM-вузлами: кожна розставляється CSS-трансформацією matrix3d, текстурується піксельованими CSS-фонами та групується в меші, а не малюється на canvas. Результат можна оглянути в інструментах розробника браузера, як будь-яку іншу сторінку. Репозиторій описує проєкт як порт Quake, що відображає BSP-світи як справжню HTML/CSS 3D-геометрію та працює на TypeScript.

Попередня обробка даних Quake

Оскільки рендерингом займається CSS, гра постачається з підготовленими ресурсами. Препроцесор перетворює оригінальні дані Quake на готовий для браузера JSON, зображення та пакети рендерингу PolyCSS. Текстури декодуються через палітру Quake у PNG-файли, послідовності анімованих текстур стають вхідними даними CSS-анімацій, а карти епізодів отримують попередньо зібрані пакети, щоб браузер підключав готовий DOM світу, а не перебудовував кожну поверхню під час запуску. Крок підготовки читає shareware- або локальні PAK-файли; оригінальних ігрових даних Quake в репозиторії немає.

Гра та налагодження

Гра підтримує стандартне керування клавіатурою та мишею — WASD для руху, миша для огляду, клік для пострілу, пробіл для стрибка, shift для бігу, ctrl для присідання — і меню, яким керують стрілками. Розділ налагодження показує контури, панель статистики та лічильник FPS, а перемикачі охоплюють динамічне освітлення, частинки, ворогів, приціл, шкоду та рух, що робить порт корисним і для демонстрацій, і для гри. Є також екран мультиплеєра для створення кімнат із вибором карти, fraglimit і ліміту гравців, та режим запису.

Вбудовування та ліцензія

cssQuake може працювати в iframe; додавання relayKeys=1 змушує гру надсилати батьківській сторінці відфільтровані ігрові події клавіш як повідомлення cssquake:key, і перед їх читанням сторінка має перевіряти event.origin. Код поширюється за ліцензією GPL-2.0-only і лежить на GitHub, де репозиторій зібрав 182 зірки та 292 коміти. Оскільки рендерером є власний рушій верстки браузера, проєкт також перевіряє межі CSS-трансформацій: шутер від першої особи 1996 року, що працює як стилізовані DOM-вузли.