cssQuake：透過 PolyCSS 在瀏覽器中玩 Quake

cssQuake 使用 CSS 渲染 Quake

cssQuake 是一個技術實驗，讓使用者可以直接在網頁瀏覽器中玩 Quake（分享版 v1.06）。此專案由 PolyCSS 渲染器（v0.2.6）提供動力，取代傳統的 GPU 加速渲染方式（如 WebGL 或 HTML5 Canvas），改以 CSS 為基礎的渲染技術。

技術實作與功能

cssQuake v0.223 將原始遊戲邏輯與自訂渲染管線結合。系統會載入原始 id1/pak0.pak 資源與清單，以重現 1996 年 id Software 的體驗。

核心遊戲機制

  • 控制：標準 WASD 移動，滑鼠觀察，空白鍵跳躍。Shift 用於奔跑，Ctrl 用於蹲下。
  • 關卡支援：遊戲包含多個經典地圖，包括 E1M1（滑門複合體）、E1M2（詛咒城堡）以及其他至 E1M8（金字塔）。
  • 多人遊戲：介面提供建立與加入多人會話的選項，包含擊殺上限、時間上限與最大玩家數設定。

除錯與自訂

使用者可透過選項選單切換多項技術覆蓋層與遊戲修改器：

  • 視覺除錯：顯示輪廓、統計面板與 FPS 面板的選項。
  • 遊戲修改器：切換動態光照、粒子效果、敵人可見性，以及傷害/移動/攻擊的禁用。
  • 輸入：支援滑鼠反向。

社群回饋與效能

雖然社群認為 cssQuake 是 CSS 能力的驚人展示，但使用者報告了不同的效能與穩定性結果。

效能觀察

效能在不同硬體上差異顯著。部分使用 M1 MacBook Air 的使用者報告流暢的 60 FPS，而使用 M1 Pro Mac 的使用者則指出遊戲感覺不如 1990 年代 Pentium-133 硬體那般流暢。

技術限制與錯誤

使用者已發現多項「不順」行為與引擎差異：

  • 碰撞與移動：報告卡在角落、坡道難以通過，以及移動時偶爾出現「彈回」現象。
  • 渲染異常：部分使用者遇到視角裁切，鏡頭會提前跳到地圖前方，且僅在開火時才重置。
  • 邏輯差異：有使用者指出某些遊戲物件（如按鈕或祕密門）行為與原版不同，需要射擊而非觸碰，或相反。
  • 視覺偽影：報告有實體（例如狗）漂浮在空中。

JavaScript 的角色

儘管渲染重點放在 CSS，專案仍需 JavaScript 才能運作。CSS 負責世界的視覺呈現，但 JavaScript 必須驅動遊戲引擎邏輯並即時更新 CSS 屬性。

開發者資源

SUMMARY: cssQuake 是一個基於瀏覽器的 Quake v0.223 實作，使用 PolyCSS 渲染器以 CSS 取代傳統的 Canvas 或 WebGL 來渲染遊戲圖形。

TITLE: cssQuake：透過 PolyCSS 在瀏覽器中玩 Quake

Sources