# CSSQuake

> Clean Markdown view of GeekNews topic #30678. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=30678](https://news.hada.io/topic?id=30678)
- GeekNews Markdown: [https://news.hada.io/topic/30678.md](https://news.hada.io/topic/30678.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-06-21T09:41:11+09:00
- Updated: 2026-06-21T09:41:11+09:00
- Original source: [cssquake.com](https://cssquake.com/)
- Points: 1
- Comments: 1

## Topic Body

- 브라우저에서 Quake를 실행하는 **CSSQuake** 데모로, 페이지에는 `cssQuake v0.230` 초기화와 `coming soon!` 상태가 함께 표시됨
- 렌더링은 **PolyCSS renderer v0.2.6**이 맡으며, manifest·progs·definitions·weapon model·`id1/pak0.pak` 자산 로드 로그를 확인할 수 있음
- 포함된 게임은 **Quake Shareware version 1.06**이며, `Quake (C) 1996 id Software, Inc.` 저작권 표기가 표시됨
- 멀티플레이어 화면은 이름, 색상, 맵, fraglimit, timelimit, 최대 플레이어 설정과 **Create**, **Join**, **Copy Link** 동작을 제공함
- 조작 안내와 디버그 토글까지 노출되어 있어, 현재 페이지는 실행 데모와 설정 UI를 함께 보여주는 상태임

---

### 브라우저에서 초기화되는 Quake 데모
- 페이지 제목은 **cssQuake - Powered by PolyCSS**이며, 본문에는 `v0.230`과 `coming soon!`이 표시됨
- 하단 로그에는 `=== cssQuake v0.230 initialized ===`가 나타남
- 로드 상태는 다음 순서로 표시됨
  - `Host_Init`
  - `Loaded manifest`
  - `Loaded progs`
  - `Loaded definitions`
  - `Weapon model`
  - `Assets from id1/pak0.pak`
- 성능 표시 영역에는 **0 FPS**와 **0 MS**가 표시됨
- 관련 링크는 [cssQuake GitHub](https://github.com/LayoutitStudio/cssQuake), [id Software Quake GitHub](https://github.com/id-Software/Quake), [Layoutit](https://layoutit.com/)임

### 멀티플레이어와 조작 설정
- **Multiplayer** 메뉴에서 이름, 색상, 맵, fraglimit, timelimit, 최대 플레이어 수를 설정할 수 있음
  - 기본 맵 표시는 `E1M1 the Slipgate Complex`
  - 동작 버튼은 `Create`, `Join`, `Copy Link`
- 맵 목록에는 다음 항목이 표시됨
  - `E1M1 the Slipgate Complex`
  - `E1M2 Castle of the Damned`
  - `E1M3 the Necropolis`
  - `E1M4 the Grisly Grotto`
  - `E1M5 Gloom Keep`
  - `E1M6 The Door To Chthon`
  - `E1M7 The House of Chthon`
  - `E1M8 Ziggurat Vertigo`
- 조작 안내는 **Gameplay**와 **Menu**로 나뉨
  - Gameplay: WASD 이동, Mouse 시점, Click 발사, Space 점프, Shift 달리기, Ctrl 웅크리기
  - Menu: 방향키 탐색, Enter 선택, Esc 뒤로 가기
- Debug와 Gameplay 설정에는 다음 토글이 표시됨
  - Show outlines, Show stats panel, Show FPS panel
  - Crosshair 조정
  - Dynamic lighting, Mute sounds, Show particles, Show enemies
  - Disable damage, Disable movement, Disable attacks, Invert mouse

## Comments



### Comment 60048

- Author: neo
- Created: 2026-06-21T09:41:12+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=48608223) 
- 대단한 성과지만, **90년대 Pentium-133 PC**에서 돌리던 Quake가 내 Mac M1 Pro에서보다 더 부드러웠던 것 같아 신경 쓰임
  - 이 엔진은 **성능 최적화**가 된 게 아님. 결국 CSS를 쓰고 있으니까
  - 참고로 M2의 Chrome에서는 버터처럼 부드럽게 돌아가는데, Safari에서는 버벅이고 많이 잘리는 듯함
  - Firefox + Linux에서는 전혀 문제 없음. 다만 Gnome Web은 끊기고 이상함. **WebKit/Safari 쪽 문제** 같음
  - C로 컴파일한 Quake라면 M1에서 **8K 전체 해상도**로도 엄청 빠르게 돌 것임
  - 잠깐, Quack이 Pentium-133에서 돌아갔나? Pentium MMX 233MHz를 썼는데 잘 안 돌아갈 거라고 생각해서 구해볼 생각도 안 했음

- 멋짐. **vim보다 종료하기 어려움**
  - 메뉴를 보고 싶으면 Tab을 누르면 됨. 게임으로 돌아가려면 메뉴 항목 바깥을 클릭하면 됨
  - 어떻게 종료했음? 아무것도 먹히는 게 없어 보임

- 인상적임. 이건 CSS를 쓰도록 만든 렌더러뿐 아니라, **엔진과 게임 로직 전체를 재구현**한 것 맞나? 원작과 다르게 동작하는 부분이 꽤 있어서 그렇게 보임  
  예를 들면 어떤 버튼은 닿는 대신 쏴야 작동하고, 어떤 비밀문은 쏘는 대신 닿으면 열림
  - 안녕하세요! 제보 고맙고, 버튼은 이제 제대로 동작할 것임  
    게임 로직 쪽은 빌드 단계에서 QuakeC/progs.dat 위에 작은 **JS 추출기**를 돌려 상태, 모델, 공격, 소리 같은 원천 정보를 JSON으로 생성함. 브라우저 런타임은 TypeScript이고, 그 정보를 사용해 Quake 비슷한 플레이를 구현함
  - 아니, 렌더러만 그런 것임. 게임 자체는 **TypeScript**임

- 오랫동안 인터넷에서 본 것 중 처음으로 진심으로 웃게 만든 물건임  
  [https://cssdoom.wtf/](<https://cssdoom.wtf/>)도 확인해 봤는데 이것도 좋았음. 둘 다 요즘 시사 뉴스보다 훨씬 가볍고 좋음 \o/

- 이 **CSS Quake**는 실행하려면 JS가 필요한 것 같음
  - [https://lyra.horse/x86css/](<https://lyra.horse/x86css/>)로 가능할지도?
  - CSS는 렌더링을 하고, 게임 로직은 **TypeScript**임

- CSS라는 **해킹 위에 해킹을 쌓은 것**의 확산, 그리고 CSS/JS/HTML이라는 웹 스택을 열렬히 싫어하는 입장이지만, 이건 CSS의 훌륭하고 정당한 사용 사례라고 봄 :)

- 이거 [https://github.com/NielsLeenheer/cssDOOM](<https://github.com/NielsLeenheer/cssDOOM>)에서 가져온 건가?
  - 별도 프로젝트임. CSS Doom을 만든 Niels Leenheer도 Agustin Capeletto의 **CSS Quake**를 봤음  
    [https://bsky.app/profile/html5test.com/post/3mok5febchs2g](<https://bsky.app/profile/html5test.com/post/3mok5febchs2g>)
  - 소스는 <[https://github.com/LayoutitStudio/cssQuake](<https://github.com/LayoutitStudio/cssQuake>)>로 보임

- 아주 멋짐. 한계가 어디까지인지 궁금함. 쏜 **개가 공중에 떠 있는** 게 보이는데, 이게 CSS 때문일까 아니면 고칠 수 있는 걸까?
  - `.dog { display: float; }`

- 인상적이긴 하지만, 이런 건 **선언형 스타일 언어**로 가능하면 안 되는 일 같음
  - 게임 로직이 아니라 렌더링에만 CSS를 쓰는 것임

- 와, 정말 멋짐. 정말 부드럽게 돌아감. **25년쯤 지나도 근육 기억**이 그대로 남아 있다는 게 말도 안 되게 신기함