致敬《求生之路 2》的伪 3D 第一人称网页生存射击游戏——全部用浏览器原生能力手搓,单文件、零外部依赖、断网也能玩。
- 在线试玩:https://yueliup.github.io/dead-city/
- 直接下载本仓库的
index.html双击打开即可(推荐 Chrome / Edge)。
- 单文件 · 零依赖:整个游戏就是一个
index.html(约 570 KB),没有任何图片、音频、字体或第三方库;所有美术与音效都由代码在运行时实时生成。 - 手写 WebGL2 渲染引擎:5 套 GLSL 着色器(场景光照 / 公告板精灵 / 粒子 / 线段 / 程序化天空),交错顶点缓冲批处理,动态点光 + 聚光(手电)、指数雾、色调映射与伽马校正。
- 实时合成音频(Web Audio):枪声、换弹、命中、爆炸全部用振荡器 + 噪声 + 滤波器 + ADSR 包络合成;配乐是一个随事件切换节奏型的步进音序器(平静 / 尸潮 / 坦克 / 终局)。
- AI Director:借鉴 L4D 的"导演系统",根据玩家表现动态调节压力与噪声,投放游荡者、定时尸潮与特殊感染者,并自动切换配乐氛围。
- 4 人小队:你 + 3 个 AI 队友(自动索敌、救人、用医疗包),被特殊感染者控住时连点鼠标挣脱。
- 8 种特殊感染者 + 尸潮:猎人、冲锋汉、骑师、烟鬼、胖子、口水、坦克、女巫,各有独立状态机。
- 两种模式:战役(10 个区域、检查点存档、闸门与终局撤离)与生存(持续波次)。
| 类别 | 实现 |
|---|---|
| 语言 | 原生 JavaScript(ES6+,单文件内联) |
| 3D 渲染 | WebGL2(手写,无 Three.js / Babylon) |
| 纹理 | Canvas 2D 程序化绘制后上传为 GL 纹理 |
| 音频 | Web Audio API 实时合成(无音频文件) |
| HUD / 特效 | DOM + CSS3 叠加层 |
| 输入 | Pointer Lock API + 键鼠事件(带光标跟随降级) |
| 主循环 | requestAnimationFrame,固定时间步长截断 |
| 数学 | 自写 mat4(透视 / FPS 视图 / 求逆等) |
在线:直接打开 https://yueliup.github.io/dead-city/
本地:
- 下载
index.html; - 用 Chrome / Edge 双击打开(建议通过 http 本地服务器以获得完整 Pointer Lock 体验,例如
python -m http.server后访问http://localhost:8000/); - 点画面锁定鼠标,选择「开始战役」或「生存模式」。
说明:
file://直接打开也能玩,但部分浏览器的鼠标锁定在本地文件下受限,游戏内置了光标跟随降级方案。
| 按键 | 功能 | 按键 | 功能 |
|---|---|---|---|
W A S D |
移动 | Shift |
奔跑 |
| 鼠标左键 | 开火 / 连点挣脱 | 鼠标右键 | 推击(击退丧尸 / 解围) |
R |
换弹 | 1 ~ 5 |
切换武器 / 道具 |
E(按住) |
拾取 / 开门 / 救队友 | F |
手电筒 |
4 + 左键(按住) |
使用医疗包 | 5 |
吞止痛药 |
3 + 左键 |
投掷燃烧瓶 / 土制炸弹 | Ctrl |
蹲下(提高精度) |
空格 |
跳跃 | Esc |
暂停 |
- 枪声会吸引尸潮;爆头伤害 ×3。
- 胖子(Boomer)请远距离击杀,避免被胆汁糊一脸引来尸群。
- 女巫哭泣时绕行并关掉手电;用霰弹枪贴脸一枪秒杀可达成「加冕」。
- 被特殊感染者控住时连点鼠标挣脱,也可以用推击把猎人 / 骑师从队友身上打下来。
- 冲锋汉直线冲锋,侧身闪避;抓人后只能击杀解救。
- 已有手枪再捡一把 = 双持;胆汁罐扔向尸群或坦克,丧尸会围攻它。
- 被救起只有临时血量(白色斜纹),连倒两次进入黑白濒死,再倒必死——医疗包可以清除。
- 拿着医疗包对受伤队友按住
E可为 TA 包扎;桥边被强力击飞挂边时,按住E把队友拉回;肾上腺素可加速包扎 / 救援。 - 专家难度友伤更高、补给更少,小心走火。
街区 → 隧道 → 调车场 → 公园 → 霓虹街 → 跨河大桥 → CEDA 检疫营 → 地下泵站 → 集装箱码头 → 撤离广场,沿途有检查点存档。
dead-city/
└── index.html # 游戏本体(单文件,包含全部逻辑 / 着色器 / 音频合成)
本仓库仅用于托管这一个文件并通过 GitHub Pages 发布,没有构建步骤。
本仓库已开启 GitHub Pages(source = main 分支根目录)。如需自行重新发布:
- 修改
index.html后提交:git add -A && git commit -m "..." - 推送:
git push - GitHub Pages 会在数十秒内自动重新构建并生效。