## 概述
《盲行》是一款基于 HTML + Canvas 的极简探索游戏。玩家在****完全黑暗**的地图中移动，依靠**声波反射****来感知周围环境。看不见墙壁、看不见障碍、看不见出口——唯一的光，来自你迈出的每一步。
游戏名"盲行"取义于"在黑暗中行走"，核心体验是：**你发出的每一声波，都是划过黑暗的一笔光**。
—
## 核心玩法
玩家控制一个仅在移动时显现的白色角色，在黑底地图中探索前行。每走一步，角色会以自身为中心发射 18 条方向均匀分布的声波射线。射线碰到墙壁或障碍物时发生****镜面反射****，并继续前进，帮助玩家勾勒出环境轮廓。
出口是一个微弱的灰色光环，被声波扫到后会短暂脉动闪烁并发出位置提示。玩家需通过声波反射信息，在脑中构建环境地图，找到通往出口的路径。
### 地图结构
- 地图尺寸：1500 × 1500 像素
- 边界为 50px 厚连续墙体，顶部留有出口区域
- 内部有 2 面隔墙形成 C 形走廊，通道宽度 ≥ 200px
- 沿通道侧壁散布小型障碍物（30×30px），用于声波反射定位
### 声波系统
| 参数 | 常规模式 | 静步模式 | 重踏（空格） |
|------|----------|----------|--------------|
| 射线数量 | 18 条 | 18 条 | 36 条 |
| 射程 | 500px | 200px | 翻倍 |
| 反弹次数 | 最多 2 次 | 最多 2 次 | 最多 2 次 |
| 透明度 | 渐变衰减（2 秒） | 同左 | 同左 |
- 声波从起点（最亮）到终点（完全透明）**线性渐变**
- 反射点 **不产生任何视觉标记**（仅物理反弹）
- 同时最多存在 3 组声波，新声波会加速旧声波的衰减
—
## 独特特色
**1. 纯黑极简美学**
全黑背景，仅用白色和极淡灰色。角色静止时完全融入黑暗，移动时才显现——光是行动的附属品。
**2. 声波物理引擎**
集成精确的射线-AABB 碰撞检测与镜面反射（`v’ = v - 2(v·n)n`），每条射线沿真实直线传播，碰到墙壁按法线反射，最多反弹 2 次后自然消失。
**3. "听"比"看"更重要**
游戏拒绝传统地图 UI——没有墙体显示，没有路径标记（除非主动开启调试）。玩家必须通过声波射线的长短、反射方向来推断环境布局。
**4. 蓄力步伐系统**
方向键支持蓄力移动：轻点短移（10px）、长按长移（最大 50px），满蓄力自动连续踏步，手感自然可控。
## 操作方式
| 操作 | 功能 |
|------|------|
| **方向键** | 移动角色（每步 20px/10px，长按自动连续踏步） |
| **空格键** | 重踏：发射 36 条声波，范围翻倍 |
| **Shift 键** | 切换常规 / 静步模式（静步：步距减半、声波范围缩小） |
| **M 键** | 开关小地图（右上角俯瞰，含路径指引） |
| **D 键** | 开关墙体调试显示（灰色轮廓） |
| **Enter 键** | 通过开始菜单进入游戏 |
## 目标受众
- **探索解迷爱好者**：喜欢在未知环境中拼凑线索、自行定位方向的玩家
- **极简美学追求者**：对黑白色调、抽象视觉风格有认同感的玩家
- **音频反馈偏好者**（扩展方向）：依赖声音而非画面获取信息的体验
- **技术演示与游戏原型研究者**：作为声波物理与暗黑探索机制的参考实现
## 预期体验
**开场的困惑**——屏幕全黑，不知道自己在哪，不知道路在哪。
**第一次声波发射**——18 条白色射线向四面八方射出去，碰到边界折返，你的脑中第一次浮现出环境的轮廓。
**在通道中摸索**——逐步移动，通过射线长度的变化判断哪边是墙、哪边是路。你开始建立自己的"心理地图"。
**"看见"出口的那一瞬间**——出口光环被声波扫到，发出脉动闪烁，屏幕边缘弹出方向箭头——你知道方向了。
**抵达**—踏入出口，胜利二字浮现。整个过程没有任何视觉引导，每一步都是用声波"摸"出来的。
> *盲行不是一款让你"看"的游戏。它让你在黑暗中一步一步地、用自己的声音去"触摸"这个世界。*
## 技术实现
- 纯前端单页 HTML 应用，无外部依赖
- Canvas 2D 渲染，基于 `requestAnimationFrame` 主循环
- Web Audio API（预留音效接口）
- 声波分组管理：最多 3 组同时存在，超出自动淘汰最早组
- 摄像机跟随：主角始终居中，地图 1500×1500，视口 800×600
- 源代码约 700 行，结构清晰，适合作为交互式物理原型参考
## 版本信息
- 当前版本：v1.0（游戏 Demo）
- 文件：`index.html`（单页，浏览器直接打开运行）
- 开发工具：HTML + Canvas + JavaScript
4. TRAE 实践过程
.1699220642342380:1011b18503c2b0b092f3616c2929b31d_6a5320eacf901e5df97c42b8.6a532e71cf901e5df97c4300.6a532e70d478092dee4074d8:Trae CN.T(2026/7/12 14:04:33)
.1699220642342380:6555ee050b8958ee372fd2c2dc3eba75_6a5320eacf901e5df97c42b8.6a533bb3cf901e5df97c4334.6a533bb1d478092dee4074dc:Trae CN.T(2026/7/12 15:01:07)
.1699220642342380:0defeda2acc2d1110555bc4d025779d7_6a5320eacf901e5df97c42b8.6a5341aacf901e5df97c436d.6a5341a9d478092dee4074df:Trae CN.T(2026/7/12 15:26:34)
blind walking.zip (7.2 KB)