本游戏仅支持电脑端及Pad端Web游玩,如有bug、改进意见等请发邮件给我;或修改后提一版PR。
项目概述
《回声行者》(Echo-Walker)
采用纯前端零依赖原生架构(Vanilla JavaScript + WebGL GLSL + Web Audio API + HTML5 Canvas)
“在漆黑寂静的深渊中,声音是唯一的双眼;但潜伏在暗处的捕食者,也是听觉的信徒。”
游戏将玩家置于常态绝对黑暗(Pitch Black)的地下废墟迷宫中。所有墙体、陷阱碎石、发条机关以及嗜血的潜伏猎手平时均 100% 隐形不可见。玩家只能依靠自己行动所激发的声波扩散波前(脚步声、手杖敲击、投石声东击西)照亮周围的环境线框;然而,声波既是照亮生路的唯一双眼,也是将致命捕食者引向自身的危险信标。
✨ 核心功能与特色
1. 绝对黑暗与声学射线波前 (Echolocation & Acoustic Wavefront)
- 绝对隐形与声纳唤醒:迷宫世界处于纯黑态,无光照概念。任何声学事件均会在局部激发向外扩散的高频声波环。
- 2D 射线投射与声学阴影 (Raycasting & Occlusion):声波在实体墙壁阻隔下产生真实的声学阴影,门洞与转角处具备自然的几何衍射计算,绝无穿墙视线透视透音漏洞。
- 动态荧光余晖衰减 (Phosphor Bloom & Decay):被声波扫掠的物体与墙体产生高亮线框,并在 1~2 秒内伴随指数衰减平滑淡出,重归虚无黑暗。
2. 100% 程序化 Web Audio 声音引擎 (Procedural Sound Engine)
- 零外部音频资源依赖:无需请求任何外部 mp3/wav 音频素材,全部音效基于浏览器底层
AudioContext数学物理算法实时合成,支持离线与瞬间加载。 - 丰富物理声学合成通道:
- 手杖敲击 (Cane Tap):高频触地撞击脉冲 + 轴身空腔物理共鸣 + 指数衰减房间反射尾音;
- 潜行与脚步 (Footsteps):高斯白噪声微扰 + 动态低通滤波地表踩踏摩擦;
- 投掷石子 (Pebble Throw):空气穿透呼啸声 + 陶瓷双重弹跳清脆撞击;
- 听觉潜伏者 (Predator Growl):低频调频锯齿波咆哮 + 沉重震地巡猎踏步;
- 发条齿轮与碎石陷阱:金属发条咔哒回响与地面脆裂惊险声响。
- 生物反馈心率音效系统 (Dynamic Heartbeat System):
- 基于玩家与最近怪物的距离及危险度,程序化动态调谐真实的收缩期/舒张期(Lub-Dub)双跳心音,心率从平静 60 BPM 极速飙升至濒死 160 BPM。
3. WebGL 距离场与空间折射后处理管线 (Shader Pipeline)
利用 GLSL 编写的高性能片元着色器管线,以 60 FPS 渲染极富冲击力的声纳波浪:
- 波前曲率与波动公式 (Wavefront Curvature):多声源并行计算(支持高达 16 组声波同时扰动),基于高斯环形函数与行波物理实时生成同心波。
- 声波冲击折射扰动 (Shockwave Refraction):声波前沿对离屏纹理产生轻度法线偏移与折射拉伸,还原真实空气受迫震动扭曲。
- 声纳色散棱镜效果 (Chromatic Aberration):波前微离散 RGB 频率分量,呈现类似高端声纳仪器的色散边缘。
- CRT 显像管与暗夜暗角 (CRT Vignette & Scanlines):全屏幽微水平扫描线与深邃地下边缘暗角,极具暗黑氛围感。
- 健壮的移动端 GPU 防御:集成
webglcontextlost与webglcontextrestored自动上下文恢复机制,并针对移动端浮点溢出提供数值保护。
4. 听觉捕食者行为状态机 (Acoustic Predator AI)
- 全盲感知与声源定向:潜伏者完全双目退化,依据声波震动等级与射线视线(Line-of-Sight)阻尼判定玩家方位。
- 三段式猎杀状态机:
- 巡逻态 (PATROL):沿既定迷宫路径盲巡;
- 警觉怀疑态 (SUSPICIOUS):捕捉到可疑声响后驻足转向声源,发出低频警示微鸣;
- 狂暴追猎态 (HUNT):锁定猎物后发出高频震慑咆哮,以双倍移速朝最后声源点发起致命冲刺。
- 声东击西战术博弈:利用投掷石子或触发发条齿轮吸引怪物前往特定声响点,为玩家潜行突破创造致命时机。
5. 战术 HUD 仪表与生物遥测系统 (Tactical Telemetry HUD)
- 声级分贝仪 (Sound Decibel Meter):顶部实时柱状图量化当前行动的分贝数(18 dB 静步 ~ 95 dB 猛击),直观反馈暴露风险。
- 动态心电监视器 (ECG Monitor):随心跳频率同步跳动,实时呈现“平静”、“戒备”、“过速”等心理与生存状态。
- 战术弹药与搜集品监控:实时呈现石子剩余量(可随时间缓慢补给)以及逃生所需的共鸣水晶(💎 0/2)收集进度。
6. 跨平台触控适配与 5 大递进声学关卡 (Mobile Controls & Levels)
- 全平台自适应输入:PC 键盘鼠标(WASD/空格/Shift/F)与移动端触控无缝适配,内置 360° 模拟推力虚拟摇杆与触控功能气泡。
- 5 级深度机制递进关卡:
- 第 1 关 · 醒于深渊 (Awakening in the Abyss):基础回声定位教学,熟悉声波照亮墙体与出口搜索;
- 第 2 关 · 潜伏之耳 (The Blind Stalker):引入首只听觉捕食者,教学轻步潜行与投石调虎离山;
- 第 3 关 · 回音齿轮 (Echo Machinery):复杂十字机关,利用发条机械持续吸引怪物,避开易碎碎石地面;
- 第 4 关 · 双重回响 (Duality of Echoes):双怪物交叉巡回,潜伏搜寻 2 颗共鸣水晶破解逃生门锁;
- 第 5 关 · 迷津终局 (The Echo Gauntlet):立柱反射走廊、脆石陷阱、发条机关与双猎手联合围剿的声学大逃杀。
🛠️ 技术架构与实现细节
| 技术维度 | 实现方案 | 架构考量与优势 |
|---|---|---|
| 基础架构 | 原生 ES6+ JavaScript + HTML5 Canvas | 零打包工具链依赖(无 Webpack/Vite),即开即玩,跨平台轻量秒开 |
| 图形渲染管线 | 2D 离屏线框生成 + WebGL 片元着色器后处理 | 兼具 2D 几何绘制灵活性与 GPU 并行波前扰动/折射着色器的高性能(满帧 60FPS) |
| 空间声学计算 | 2D 极坐标射线投射(Raycasting)+ 空间网格分割 | 毫秒级计算封闭遮挡多边形(Visibility Polygon),精准呈现声学阴影与拐角衍射 |
| 程序化音频引擎 | Web Audio API (AudioContext) 纯代码物理合成 | 零外部音效文件,消除网络加载卡顿;支持随距离/危险度实时动态调制心率与音色 |
| 移动跨端交互 | Touch Events + 虚拟摇杆 + 视口安全区 (SafeArea) 适配 | 针对 iOS Safari / Android 优化触控防误触与 Web Audio 静音自动解锁机制 |
⌨️ 快捷键与操作指南
| 键盘按键 / 按钮 | 触控端对应 | 触发动作 | 视听反馈效果 |
|---|---|---|---|
| W / A / S / D 或 方向键 | 虚拟摇杆滑动 | 行走移动 | 发出轻微脚步声(波半径 180px, 35dB) + 地表摩擦微弱音效 |
| 按住 Shift 键 | 点击【🥾 潜行】按钮 | 静步潜行 | 移速减半,声波极弱(波半径 80px, 18dB),可安全绕过巡逻猎手 |
| Space (空格) / 鼠标左键 | 点击【🦯 敲击】/ 单击画布 | 手杖敲击 | 释放全场强力声波(波半径 420px, 85dB)+ 空腔清脆撞击回响 + 惊醒周围怪物 |
| F 键 / 鼠标右键 | 点击【🪨 投石】按钮 | 投掷石子 | 向光标方向抛掷石子,在远端撞击点制造声响引开捕食者(声东击西) |
| R 键 / 重置按钮 | 顶部【🔄 重置】按钮 | 重置当前关卡 | 快速复活并重新开始当前关卡挑战 |
| 顶部下拉菜单 | 关卡选择列表 | 切换关卡 | 自由挑选 1~5 关深度声学体验 |
| 🔊 声音按钮 | 顶部声音开关 | 全局静音/开声 | 一键静音所有环境音、敲击声、心跳与怪物咆哮 |