cssQuake: Playing Quake in the Browser via PolyCSS

cssQuake renders Quake using CSS

cssQuake is a technical experiment that allows users to play the shareware version of Quake (v1.06) directly in a web browser. The project is powered by the PolyCSS renderer (v0.2.6), which replaces traditional GPU-accelerated rendering methods like WebGL or HTML5 Canvas with CSS-based rendering techniques.

Technical Implementation and Features

cssQuake v0.223 integrates the original game logic with a custom rendering pipeline. The system loads the original id1/pak0.pak assets and manifests to recreate the 1996 id Software experience.

Core Gameplay Mechanics

  • Controls: Standard WASD for movement, mouse for looking, and space for jumping. Shift is used for running, and Ctrl for crouching.
  • Level Support: The game includes several classic maps, including E1M1 (The Slipgate Complex), E1M2 (Castle of the Damned), and others through E1M8 (Ziggurat).
  • Multiplayer: The interface includes options for creating and joining multiplayer sessions, including settings for frag limits, time limits, and max players.

Debugging and Customization

Users can toggle several technical overlays and gameplay modifiers via the options menu:

  • Visual Debugging: Options to show outlines, a stats panel, and an FPS panel.
  • Gameplay Modifiers: Toggles for dynamic lighting, particle effects, enemy visibility, and damage/movement/attack disabling.
  • Input: Support for mouse inversion.

Community Feedback and Performance

While the community views cssQuake as an impressive showcase of CSS capabilities, users have reported varying performance and stability results.

Performance Observations

Performance varies significantly across hardware. Some users on M1 MacBook Airs reported a smooth 60 FPS, while others on M1 Pro Macs noted that the game felt less smooth than it did on 1990s Pentium-133 hardware.

Technical Limitations and Bugs

Users have identified several "janky" behaviors and engine discrepancies:

  • Collision and Movement: Reports of getting stuck on corners, difficulty navigating slopes, and occasional "rubber banding" during movement.
  • Rendering Glitches: Some users experienced view clipping where the camera would snap ahead of the map and only reset upon firing a weapon.
  • Logic Discrepancies: Some users noted that certain game objects (like buttons or secret doors) behave differently than in the original game, requiring shooting instead of touching or vice versa.
  • Visual Artifacts: Reports of entities, such as dogs, floating in the air.

The Role of JavaScript

Despite the focus on CSS for rendering, the project requires JavaScript to function. The CSS handles the visual representation of the world, but JavaScript is necessary to drive the game engine logic and update the CSS properties in real-time.

Developer Resources

Sources