本游戏支持全平台浏览器;关卡编辑器已开放,欢迎大家把自己编辑的关卡文件发到我的邮箱;如有发现bug,欢迎提供,有时间直接修复后可直接提PR;改进意见请发邮箱。
项目概述
影子协议 (Shadow Protocol) 是一款 2D 极简科幻风格的时空协作解谜游戏(Web Game)。
采用纯前端零依赖原生架构(Vanilla JavaScript + HTML5 Canvas + Web Audio API),无需任何打包编译工具链,即开即玩。
玩家扮演一名穿梭于高维量子实验室的特工,利用系统后台不间断运转的 “过去 10 秒即时滚动缓存(Rolling Buffer)”,在任意时刻按下空格键召唤过去的自己(影子分身)。分身将在 10 秒前的位置生成并忠实重现玩家过去 10 秒的移动轨迹与机关操作,而本体完全不受任何影响,继续实时自由行动。通过“过去的你”踩下激光压板、扳动延时自锁拉杆,“现在的你”穿越能量力场、拦截空投量子秘钥,实现单人与自我的跨时空多维协作解谜。
✨ 核心功能与特色
1. 即时连续记录与无缝影子分身 (Rolling Buffer & Non-intrusive Clone)
- 滚动 10 秒记忆环形缓存:系统后台以毫秒精度不间断记录本体过去 10 秒的所有运动学状态(坐标、速度向量、朝向)与交互事件(压板触发、拉杆扳动、空投拦截)。顶部 HUD 配备实时能量槽,直观可视化当前时空记忆长度。
- 本体零干扰、不停顿、不倒流:按下
Space释放影子时,本体无需回溯到过去,依然自由穿梭于当前时间线,彻底告别传统时空解谜游戏中“强制打断重置玩家”的割裂体验。 - 单分身独占原则与即时顶替:场景内严格维持单一分身法则,再次按下空格键将即刻消散旧分身并在最新时间点生成新分身,避免实体冗余与解谜逻辑混乱。
2. 100% 程序化 Web Audio 声音引擎 (Procedural Sound Engine)
- 零外部音频资源依赖:无需加载任何 mp3/wav/ogg 外部文件,基于浏览器底层
AudioContext实时数学物理算法合成声音。 - 赛博朋克多层环境氛围乐 (Ambient Cyberpunk Drone + Dorian Arpeggio):
- 低频机房共鸣(Ambient Drone):底层 55Hz (A1) 锯齿波经由低通滤波(Low-pass Filter)持续微弱共振,烘托深沉冷峻的实验室氛围;
- 程序化琶音律动(Procedural Arpeggio):基于多利亚调式(Dorian Scale: A3, C4, D4, E4, G4, A4, C5)算法随机生成的高频晶莹音符,偶发飘浮于立体声场中。
- 全套高拟真科幻音效矩阵:
- 时空回溯扫频音 (Rewind Warp Sweep):锯齿波宽频调频,模拟时空撕裂的瞬态冲击;
- 能量门禁滑移 (Gate Slide):带通滤波调制的电流磁场激荡声;
- 双向自锁拉杆与压力板 (Lever & Plate):双正弦波升调与低频物理撞击反馈;
- 量子钥匙拾取与跃迁传送门 (Key & Portal Vortex):多谐振泛音与时空奇点回响。
3. 严密的时空因果阻断与防卡死安全机制 (Causality Barrier & Safety Physics)
- 闭门阻断力场(严禁幽灵穿门):即使分身的历史轨迹中曾通过某扇门,若当前时间线该门已处于闭合状态,分身到达门前将被力场严密阻隔,迸发出粒子火花与碰撞警报,杜绝违背物理逻辑的穿门逃逸。
- 本体卡门自动安全回弹 (Anti-Crush Safe Ejection):若分身自然消散导致机关门在玩家本体正穿行时闭合,系统会自动检测玩家进入该门的方向,将本体瞬间安全反弹至安全进入侧,杜绝被夹在墙体或门内的卡死问题。
- 平滑贴墙滑动物理 (Smooth Wall Sliding):连续碰撞检测搭配微尘粒子运动学算法,操作手感丝滑流畅。
4. 可视化关卡编辑器与一键分享生态 (Visual Level Editor & Portability)
- 独立置顶工具栏:工具栏停靠于画布外部上方,进入编辑模式时画布自适应缩放,全图可见且网格精准对齐。
- 动态霓虹指示连线:采用统一的联动下拉菜单(压板 ➔ 门、拉杆 ➔ 门/空投钥匙、钥匙 ➔ 量子门),编辑器会实时自动绘制霓虹虚线,直观呈现机关拓扑绑定关系。
- 规格化组件库:支持多规格长宽的横竖激光门、量子门(需空投钥匙解锁)、各尺寸压板与批量墙体笔刷。
- 5 独立栏位与无缝热重载:提供 5 组本地自创关卡存储栏位,切换或试玩关卡时自动静默保存。
- 一键 JSON 导出与跨设备导入游玩:生成的关卡文件轻巧(约 2~3 KB),支持一键导出下载;主界面与编辑器均提供读取入口,无需编辑即可直接载入游玩,内置
validateAndSanitizeLevel容错清洗引擎,自动修补越界与外围防坠护墙。
5. 精心设计的官方递进三大关卡 (Progressive Official Blueprint)
- 关卡 01:时空共振 (Echo Protocol):新手引导,利用过去分身踩红光压板,本体穿越激光门拦截下落的量子秘钥。
- 关卡 02:时空双重接力 (Temporal Relay):黄门通道锁定与异室接力,考验分身顶替与门禁状态保持策略。
- 关卡 03:双向时序终端 (Temporal Synchrony):2.0 秒双向自回弹终端,本体与分身在 2 秒极限窗口期内跨障碍双端协同扳动拉杆。
6. 全端多平台响应式适配与人体工学操作 (Cross-Platform & Ergonomics)
- 电脑端 (PC / Mac):键盘高精度移动、快捷键一键触发、超高清大屏自适应。
- 平板端 (iPad / Android Tablet):支持触屏虚拟摇杆、高灵敏度触控按钮、关卡编辑器全手势绘制。
- 手机端 (iOS / Android Phone):支持竖屏与横屏自适应、iPhone 刘海与灵动岛安全区避让 (
viewport-fit=cover)、动态视口高度适配 (100dvh)、单手拇指人体工学操作区。 - 内核专项兼容:针对 Blink (Chrome/Edge)、WebKit (Safari/iOS 手势音频上下文唤醒策略) 与 Gecko (Firefox 平滑渲染) 做了专属调优。
🛠️ 技术架构与实现细节
| 技术维度 | 实现方案 | 架构考量与优势 |
|---|---|---|
| 基础架构 | 原生 HTML5 + CSS3 + ES6+ JavaScript | 零编译工具链(无需 Webpack/Vite/Node),即开即用,秒级极速加载 |
| 图形渲染 | HTML5 Canvas 2D + 粒子物理引擎 | 1280×720 基准分辨率自适应缩放,60 FPS 稳定渲染,高发光赛博霓虹美学 |
| 声音生成 | Web Audio API (AudioContext) | 纯代码实时程序化合成环境音与 SFX,零外部音频资源请求,天然支持离线运行 |
| 时空记录 | 高性能时间滑动环形缓冲数组 (Rolling Buffer) | 毫秒级采样玩家操作帧,内存开销恒定,常数级快速检索与重放 |
| 地图与关卡 | 独立自包含 JSON 架构 + 清洗校验机制 | 关卡数据轻量化(2~3KB),支持安全边界清洗与即时序列化导出/导入 |
| 交互与输入 | 统一输入抽象层 (Unified Input Layer) | 键盘事件与移动端多点触控虚拟摇杆自适应无缝切换 |
⌨️ 快捷键与操作指南
| 键盘按键 / 触控按钮 | 触发动作 | 视听反馈效果 |
|---|---|---|
W A S D / 方向键 | 控制玩家本体移动 | 伴随微尘滑动粒子与脚步低频阻尼音效 |
| 虚拟摇杆 (移动端) | 360° 平滑自由拖拽移动 | 虚拟触控底盘动态跟随与高精度矢量方向推算 |
Space (空格键) / [释放分身] | 释放过去 10 秒影子分身 | 触发时空回溯扫频音 (Rewind Warp) + 赛博全息分身重现 |
F / [互动] | 机关互动 / 扳动拉杆 | 机械阻尼扣动机关音效 + 触发门禁或空投量子钥匙 |
C / [遣散分身] | 手动消除当前活跃分身 | 释放淡蓝色消散粒子冲击波 + 状态指示徽章复位 |
R / [重置关卡] | 重新开始当前关卡 | 快速复位机关、拾取物、玩家位置与时空缓存槽 |
| ✎ 编辑器 按钮 | 切换至可视化关卡编辑器 | 唤起独立置顶工具栏,画布自适应展开,显示动态网格与机关连线 |
| ⤓ 下载 按钮 (编辑器) | 导出自创关卡 JSON 文件 | 一键打包当前栏位关卡数据为标准 .json 独立文件 |
| ⤒ 读取 按钮 (主界面/编辑器) | 导入外部关卡并开始游玩 | 自动执行数据校验清洗,并即刻载入游玩 |
| 🔊 音效 按钮 | 全局音效与背景乐切换 | 一键静音/恢复 Web Audio 合成器与环境氛音乐输出 |
| ▤ 关卡 按钮 | 呼出关卡选择面板 | 快速在三大官方关卡与外部关卡导入入口之间切换 |