Skip to content

Latest commit

 

History

5 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 

Repository files navigation

DEAD CITY

致敬《求生之路 2》的伪 3D 第一人称网页生存射击游戏——全部用浏览器原生能力手搓,单文件、零外部依赖、断网也能玩。


特性

  • 单文件 · 零依赖:整个游戏就是一个 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/

本地:

  1. 下载 index.html;
  2. 用 Chrome / Edge 双击打开(建议通过 http 本地服务器以获得完整 Pointer Lock 体验,例如 python -m http.server 后访问 http://localhost:8000/);
  3. 点画面锁定鼠标,选择「开始战役」或「生存模式」。

说明: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)

本仓库已开启 GitHub Pages(source = main 分支根目录)。如需自行重新发布:

  1. 修改 index.html 后提交:git add -A && git commit -m "..."
  2. 推送:git push
  3. GitHub Pages 会在数十秒内自动重新构建并生效。

About

DEAD CITY - single-file WebGL2 web game

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages