cssQuake：通过 PolyCSS 在浏览器中玩 Quake

cssQuake 使用 CSS 渲染 Quake

cssQuake 是一个技术实验，允许用户直接在网页浏览器中玩 Quake（v1.06）共享版。项目由 PolyCSS 渲染器 (v0.2.6) 提供支持，它用基于 CSS 的渲染技术取代了传统的 GPU 加速渲染方式，如 WebGL 或 HTML5 Canvas。

技术实现与特性

cssQuake v0.223 将原始游戏逻辑与自定义渲染管线相结合。系统加载原始的 id1/pak0.pak 资源和清单，以重现 1996 年 id Software 的体验。

核心游戏机制

  • 控制：标准 WASD 移动，鼠标观察，空格跳跃。Shift 用于奔跑，Ctrl 用于蹲下。
  • 关卡支持：游戏包含多个经典地图，包括 E1M1（Slipgate Complex）、E1M2（Castle of the Damned）以及一直到 E1M8（Ziggurat）。
  • 多人游戏：界面提供创建和加入多人会话的选项，可设置击杀上限、时间上限和最大玩家数。

调试与自定义

用户可以通过选项菜单切换多种技术叠加层和游戏玩法修改器：

  • 视觉调试：显示轮廓、统计面板和 FPS 面板的选项。
  • 玩法修改器：动态光照、粒子效果、敌人可见性以及伤害/移动/攻击禁用的切换开关。
  • 输入：支持鼠标反转。

社区反馈与性能

社区普遍认为 cssQuake 是 CSS 能力的精彩展示，但用户报告了不同的性能和稳定性表现。

性能观察

性能在不同硬件上差异显著。一些使用 M1 MacBook Air 的用户报告能够保持流畅的 60 FPS，而在 M1 Pro Mac 上的用户则觉得游戏的流畅度不如 1990 年代的 Pentium‑133 硬件。

技术限制与错误

用户发现了若干“卡顿”行为和引擎差异：

  • 碰撞与移动：卡在拐角、坡道难以通行，以及偶尔出现的“橡皮筋”效应。
  • 渲染故障：部分用户遇到视角裁剪，摄像机会提前跳到地图外，只有在开火时才会重置。
  • 逻辑差异：有些游戏对象（如按钮或秘密门）行为与原版不同，需要射击而不是触碰，或反之。
  • 视觉伪影：出现实体（例如狗）漂浮在空中的报告。

JavaScript 的作用

尽管渲染重点在 CSS 上，项目仍需 JavaScript 才能运行。CSS 负责世界的视觉呈现，而 JavaScript 则驱动游戏引擎逻辑并实时更新 CSS 属性。

开发者资源

Sources