野原家
首页 项目 笔记 随笔 归档 关于 友链
← 返回所有项目

影子协议 (Shadow Protocol) - 2D时空协作解谜游戏

• 8 分钟阅读
目录 (TOC)
10 个小节

本游戏支持全平台浏览器;关卡编辑器已开放,欢迎大家把自己编辑的关卡文件发到我的邮箱;如有发现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 合成器与环境氛音乐输出
▤ 关卡 按钮呼出关卡选择面板快速在三大官方关卡与外部关卡导入入口之间切换
版权与转载声明
CC BY-NC-SA 4.0
本文作者: RezaMorafi
发布日期: 2026年10月23日
永久链接: https://www.rezamorafi.top/projects/game-sp/

商业转载请联系作者获得授权,非商业转载请注明出处、原作者以及本文链接。

← 返回所有项目