Pipe Rotate · Daily Game Lab

▶ 立即试玩 // play in browser

📖 上手教学 // how to play

点击格子让管道顺时针旋转 90°，在 30 秒内把水从绿色起点引到红色终点。

启动方式

双击 build/index.html → 点击任意位置开始 → 旋转管道接通水路

怎么玩

每关有一张管道网格（4×4 → 5×5 → 6×6 → 7×7）
1.5 秒 GET READY 倒计时，水流尚未开始（玩家可预先旋转）
水流从绿色 S 起点 自动开始，速度 1 格 / 0.5s
单击格子 → 管道顺时针旋转 90°（200ms 缓动动画）
被水流过的格子不可再旋转（彩底高亮提示）
水流抵达红色 E 终点 → 通关 → 自动进入下一关
水流走到死路 / 30 秒倒计时归零 → 失败 → 可重试或重玩

5 种管道

类型	形状	开口数	有效旋转
STRAIGHT 直管	─ │	2 对侧	2
ELBOW 弯管	└ ┘ ┐ ┌	2 相邻	4
TEE 丁字	┬ ┤ ┴ ├	3	4
CROSS 十字	┼	4	1（无意义）
TERMINAL 终端	起点/终点	1	固定（不可旋）

操作

输入	行为
鼠标单击 / 触屏点击	旋转该格管道 90° CW
水浸过的格子	锁定，无法旋转
起点 / 终点	固定方向，无法旋转

5 关设计

关	网格	主要新元素	最少旋转
1	4×4	基础 L 形路径	6
2	5×5	蛇形长路径	10
3	5×5	引入 TEE 丁字分流	11
4	6×6	引入 CROSS 十字	12
5	7×7	TEE + CROSS 复合大关	14

得分

通关基础 100 分
+ 剩余时间秒数 × 10 分
每关最少步数自动保存到 localStorage

调参

CONFIG：

FILL_TIME_MS：每格充水时间（默认 500ms）
LEVEL_TIME_MS：每关总时长（默认 30000ms）
GET_READY_MS：每关准备时长（默认 1500ms）
ROTATE_ANIM_MS：旋转动画时长（默认 220ms）

参考来源

Pipe Mania（1989, LucasArts）—— 经典管道游戏品类鼻祖
Pipe Push Puzzle（Steam）—— 现代 3D 重制
TapTap 数字华容道（8.6）/ 推箱子（8.1）—— 网格解谜高分代表
泞之翼 2（9.3）—— 解谜品类高分潜力验证

📊 评分维度 // verdict

30秒可理解9

操作反馈8

核心循环9

复玩动力8

爽感8

策略空间8

开发完成度8

商业扩展潜力9

🚀 扩展路径 // what's next

1. 好玩证据

第一个 30 秒：看介绍 → 点击开始 → 看到绿 S 红 E 和管道缺口 → 1 秒后明白要把管道接起来 → GET READY 倒计时给玩家"哦这是计时游戏" → GO 蓝色水流出现 → 玩家开始点击旋转。

正反馈：

旋转动画 + 黄色边框 = 操作即反馈
水流抵达终点的蓝色全屏流动 + 金色闪屏 = 强终局奖励
通关分数 + 最少步数挑战 = 长期目标

第二局动机：

"我上次步数太多了" → 重玩同关挑战最少步数
5 关递增，玩到第 5 关后想要更多
时间剩余 = 分数，刺激规划速度

最强爽点：L4-L5 大网格通关瞬间 — 水流穿越 CROSS 同时朝 3 个方向流动，TEE 又往两边分流，整个屏幕蓝色脉动，金色闪屏。这是天然短视频素材。

最弱断点：

L1 玩家可能"无感"（4×4 太小，挑战不足）
L4→L5 难度跳跃可能让新手挫败
没有教学引导，新手不知道"水流锁定"规则可能浪费第一关
CROSS 对玩家"等价"任何旋转，可能让点击感觉"无效"

已验证（代码可证）：

✅ 5 关全部可解（Node.js 模拟通过）
✅ 水流路径算法正确（BFS + 位运算开口对齐）
✅ 旋转锁定逻辑正确（flooded 即拒绝）
✅ 双 failure 模式正确（dead-end + timeout）

待验证（需玩家实测）：

⏳ 平均通关时间
⏳ L4-L5 难度跳跃是否过陡
⏳ 30s 是否合适（应该 25s? 45s?）
⏳ "水流到达 = 锁定"是否需要更明显教学
⏳ 5 关后玩家是否想继续

2. 核心体验定义

玩家通过 [鼠标/触屏点击格子旋转管道 90°]，
不断获得 [管道形状变化的视觉反馈 + 水流逐格流动的过程感],
为了 [在 30 秒内引导水流抵达终点 + 挑战最少旋转数],
逐步形成 [水流前的快速空间规划 + 提前判断哪格先改 的策略思维]。

3. 三个变体方向

A. 关卡编辑器 v0（UGC 验证）

要验证：玩家是否愿意自己造关卡分享给朋友
改动：
加 EDIT 模式按钮
9 个固定 5×5 空格供放置管道
玩家拖选 STRAIGHT/ELBOW/TEE/CROSS 放到格子里
提交后生成可分享代码（base64 编码关卡数据）
预计开发：1 轮（~150 行新增）
成功标准：5 名测试玩家中 ≥ 2 人完成关卡并主动分享
失败信号：玩家说"造关比玩关麻烦"

B. 自由模式（解谜纯化）

要验证：去掉时间压力是否能提高复玩率
改动：
主菜单加 RELAXED 模式按钮
选 RELAXED 后水流仍流，但 30s 计时器不出现，timeout 不触发
死路仍 fail，但有"重试"按钮（无次数限制）
预计开发：0.5 轮（~30 行新增）
成功标准：RELAXED 模式玩家平均时长 > NORMAL 模式 1.5x
失败信号：玩家觉得没有时间压力"不爽"，不愿意继续

C. 每日挑战（留存验证）

要验证：每日新关卡能否带回玩家
改动：
主菜单加 DAILY 按钮
用当天日期作为 seed，程序化生成一个 6×6 随机关卡
当天关卡固定，所有玩家同关，比最少步数
localStorage 记录今日最好成绩
预计开发：1 轮（关卡生成器算法是重头）
成功标准：玩家次日回流率（开过 DAILY 的）> 30%
失败信号：随机生成关卡质量太差，玩家放弃

4. 两个美术方向

A. 工业管道（Industrial Pipes）

风格：金属+蒸汽+漏水的工业风（蓝灰+黄色警示色）
适配：管道天然是工业元素，水流+蒸汽组合
用户感受：解谜感强、专业感、有「工程师」气质
成本：低（管道贴图 + 蒸汽粒子）
商业化：中（皮肤包 6-12 元）
风险：风格略冷门，与休闲玩家调性不符

B. 水晶魔法（Crystal Magic）

风格：水晶管道 + 魔法水流（紫/青/粉的霓虹色）
适配：解谜玩法的"咒术"感，每种管道是不同符文
用户感受：奇幻、视觉惊艳、截图传播
成本：中（水晶纹理 + 粒子光效）
商业化：高（女性向 + 节日主题皮肤）
风险：超出原游戏调性，可能稀释品牌

5. 1 周垂直切片

核心目标

让一个不知情玩家在 5 分钟内通关 ≥ 3 关，玩第二局比第一局少 ≥ 5 步。

必做

关卡数从 5 关扩到 12 关（每关 30s 内可通）
难度选择（Easy 45s / Normal 30s / Hard 20s）
教学第一关：手把手提示"旋转→连通→水流"
关卡编辑器 v0 或 自由模式（选其一先做）
皮肤包基础架构（即使只 1 套额外皮肤）

不做

联网排行榜
账号系统
付费内容（先做框架）
BGM
多语言

试玩

5 名不知情玩家，5 分钟。记录：

通关数
第二关比第一关旋转步数
自发评论
是否主动想玩第 4 关
是否注意到死路警告

3 个给上级看的亮点

"水流双时间压力"是 513 系列首次叠加 failure 设计
30+ 年品类生命力（Pipe Mania 1989 → 当前 Steam 仍有产品）
天然短视频传播性：水流抵达瞬间的金色全屏闪 = 截图友好

验收

5 人中 ≥ 4 人通关 ≥ 3 关，平均第二关步数减少 ≥ 5，≥ 2 人说"想做自己的关"，≥ 1 人分享截图。

6. 下一步执行任务模板

请基于 E:\project513\prototypes\2026-05-13-12-pipe-rotate\ 执行扩展验证 v2。
本次只做 [关卡编辑器 v0 或 自由模式]（选一）。
不要做完整商业化，不要加联网。
完成后输出新版原型、测试报告和下一轮建议。

💡 设计文档 // design

一句话核心

点击格子旋转管道，在 30 秒内拼出从绿点到红点的水路

设计哲学

1. 「双重时间压力」是稀缺设计

513 系列前 9 个 failure mode 都是单一维度（时间、HP、错误、撞击、漏过、字符越界、步数、连击中断、目标未达）。本作首次叠加：

空间维度失败：水流走死路 → 立即结束本关
时间维度失败：30s 倒计时归零 → 结束本关

水流是"双轴压力"的物理化身：玩家既要紧贴时间（水流前进）又要管控空间（路径连通）。

2. 「水流即锁定」是阻抗机制

被水浸过的格子无法再旋转，意味着玩家只能改变水流前方的格子，倒逼"提前规划"心智。这是经典 Pipe Mania 的核心张力，我们保留并简化（不需要拖拽放置新管道）。

3. 30 秒可懂

看到绿色 S 点 + 红色 E 点 → 目标明确
看到管道形状 + 缺口 → 知道要"连起来"
点一下格子 → 立刻看到旋转 → 操作规则秒懂
蓝色水流可视化 → 路径状态实时反馈

4. 5 种管道形状的策略空间

STRAIGHT：2 个对侧（直线导流）
ELBOW：2 相邻（拐弯）
TEE：3 个（分流/汇流）
CROSS：4 个（永远通，但浪费空间）
TERMINAL：1 个（起点/终点固定）

加上旋转 4 个角度，组合空间足够 100+ 关变化，但 5 关已能让玩家熟悉所有形状。

5. 不做的事

不做"拖拽新管道入格"（Pipe Mania 原版机制，对手游太复杂）
不做"管道库存"（计算认知负担过重）
不做"水流可逆"（违反物理直觉）
不做随机关卡（手工设计 5 关质量更高）
不做难度选择（线性递增已足够）

数值结构

水流公式

水流速度：每格 500ms 填满
单格填充：
  0-250ms：从入口侧（inlet）填到中心
  250-500ms：从中心填到所有出口侧（outlets）
TEE/CROSS 的多个出口同时填充（并行）

关卡时长

GET_READY_MS = 1500ms（玩家预先规划时间）
LEVEL_TIME_MS = 30000ms（水流开始后总时长）

水流速度 1 格/0.5s × 30s = 60 格容量。最大网格 7×7 = 49 格，理论上水可走遍全图。实际路径长度 13 格，水流 6.5s 抵达终点，剩 23.5s 时间余量供玩家决策。

得分公式

通关分数 = 100 + floor(剩余秒数 × 10)
满分（30 秒余量 = 0 用时）= 100 + 300 = 400
最差通关（0 秒余量）= 100

旋转动画

ROTATE_ANIM_MS = 220ms
easeOutCubic: 1 - (1 - t)^3

220ms 是「快但能看清」的平衡点。

视觉

元素	实现
背景	中央径向渐变（深蓝调 #0c1a30 → #061122）
网格底色	深灰 + 浸水后蓝色光晕
管道基座	双层灰色（外亮内暗），中心圆点
水流	蓝色渐变线（#00d4ff → #4cc9f0 → #0090d8）+ 8px shadowBlur 发光
水流脉动	线宽 ±4% sin 波动
起点标记	绿色脉动圆 + "S" 字
终点标记	红色脉动圆 + "E" 字
旋转动画	220ms easeOutCubic
点击反馈	黄色边框 fade-out 250ms
通关闪屏	金黄色全屏覆盖 + 40 颗粒子
失败闪屏	红色全屏覆盖 + 30 颗粒子
GET READY	屏幕中央 120px 数字倒计时 + GO!

音频（WebAudio 合成）

旋转点击：triangle 380-560Hz, 60ms
水流前进：sine 280-360Hz, 50ms（每格一次）
水流开始：sine 180Hz + 360Hz 双音
通关：triangle C-E-G 序列
失败：sawtooth 120Hz + 80Hz 低频

复玩动力

最少步数挑战：每关最少 rotation 数自动保存到 localStorage
总分追求：用剩余时间换分数
解谜熟练度：第二次玩可以提前规划，进而获得更多剩余时间
关卡递增网格：玩家逐渐适应更大的空间复杂度

还可扩展（见 EXPANSION_PLAN）

武器解锁 → 管道皮肤（金属/玻璃/水晶）
关卡编辑器 → UGC
每日挑战 → 限时随机关卡
排行榜 → 最少步数 / 最快通关
多结局：水流灌满 X 个目标
自由模式：无时间压力，纯解谜

🧪 自测报告 // playtest

环境

任意现代浏览器（Chrome/Edge/Firefox/Safari）+ 鼠标 / 触屏
双击 build/index.html

测试项

1. 启动

✅ node --check（提取 JS 部分）通过
✅ HTML 闭合规范
✅ 无外部依赖
✅ 无 console 报错路径（基于代码静态审计）

2. 一关完整路径

打开 → 介绍页 → 任意点击开始
1.5s GET READY 倒计时显示 1
GO! 显示 + 水流从绿 S 点开始
玩家点击格子 → 200ms 缓动旋转
已浸水格子点击无反应（locked）
水流抵达红 E 点 → 金色闪屏 + LEVEL CLEAR + 1.6s 后自动进入下一关
水流走死路 → 红色闪屏 + DEAD END! → 1.4s 后弹出失败结算面板
30s 倒计时归零 → 红闪 + TIME'S UP! → 失败面板
RETRY LEVEL 重玩本关 / RESTART RUN 重新开始全部

3. 关键逻辑（代码审计）

rotateCell(x, y)：检查未浸水 + 非 start/end → clickCount++ + 启动 220ms 动画
cellBits(c) = rotateBits(PIPE_BASE[c.t], effectiveRot(c))：位运算返回当前 4 侧开口
updateWater(now)：BFS 推进 — 对每个 processedExits=false 的 flooded 格子，500ms 后探索所有出口侧 → 邻居匹配 → 加入 flooded
死路检测：allDone (所有 flooded 都 processedExits) && anyFlooded && !endFlooded → triggerFail
时间检测：now - waterStartTime > LEVEL_TIME_MS → triggerFail
通关检测：endCell.flooded && age >= FILL_TIME_MS * 0.7 → onLevelClear
getDisplayRot(c, now)：easeOutCubic 从 rotAnimFrom 到 clickCount

4. 关卡可解性

经 Node.js 独立模拟验证（5 关 SOLUTIONS 写死，水流 BFS 模拟）：

Level 1 (4x4): SOLVABLE | start=(0,0) end=(3,3) | water reached 7 cells  | min clicks=6
Level 2 (5x5): SOLVABLE | start=(0,0) end=(4,4) | water reached 9 cells  | min clicks=10
Level 3 (5x5): SOLVABLE | start=(0,0) end=(4,4) | water reached 10 cells | min clicks=11
Level 4 (6x6): SOLVABLE | start=(0,0) end=(5,5) | water reached 11 cells | min clicks=12
Level 5 (7x7): SOLVABLE | start=(0,0) end=(6,6) | water reached 13 cells | min clicks=14

且每关初始状态 NOT auto-solved（玩家必须旋转）✓

5. UI 反馈

反馈	实现
旋转动画	220ms easeOutCubic ctx.rotate
旋转点击	triangle 380-560Hz 60ms 音
旋转高亮	黄色边框 fade-out 250ms
水流可视	渐变蓝色 + 8px shadowBlur 发光
水流脉动	线宽 ±4% sin 波动
浸水格底色	暗蓝色 rgba(20,52,90,0.85)
起点	绿色脉动圆 + "S" 字
终点	红色脉动圆 + "E" 字
GET READY	中央 120px 数字倒计时 + GO!
通关闪屏	金黄全屏 + 40 颗粒子 + 三音和弦
失败闪屏	红色全屏 + 30 颗粒子 + 低频锯齿音
屏幕震动	shake 变量
时间条	渐变 (#00d4ff → #4cc9f0 → #ffd60a)

评分

指标	分数	依据
30 秒可理解	9	看到绿 S + 红 E + 管道缺口 = 目标显然；rotate 90° 操作 1 次就懂
操作反馈	8	旋转动画 + 音效 + 黄色边框；水流可视；6 重反馈层
核心循环	9	旋转→连通→水流推进→通关，5 关递增清晰
复玩动力	8	最少步数挑战 + 分数追求 + 5 关熟练度
爽感	8	水流抵达终点的全屏蓝色流动 + 通关金色闪屏
策略空间	8	TEE/CROSS 引入分流策略；时间压力下的预规划
开发完成度	8	598 行、5 关验证可解、语法通过、双 src/build 同步
商业扩展潜力	9	关卡编辑器 + 皮肤 + 排行榜 + 每日挑战都极易扩