水管接水谜题

做一个单文件 HTML 的水管接水解谜游戏。左上角有水龙头出水，右下角有水桶接水，玩家在中间的网格里旋转水管管件，把水从水龙头引到水桶。

做一个单文件 HTML 的 **水管接水解谜游戏（Pipe Puzzle）**。左上角有水龙头持续出水，右下角有水桶等待接水，玩家在中间网格中操作管件，将水流从水龙头引导至水桶。 ```` ### 游戏棋盘 - 网格大小默认 7×7（可在设置中调整 5×5 ~ 10×10） - 左上角格子固定为水龙头（水源），出水方向为向右或向下 - 右下角格子固定为水桶（目标），入水方向为从左或从上 - 中间格子随机填充管件，玩家通过旋转管件拼出连通路径 - 每个格子只能容纳一个管件 ### 管件类型 1. **直管（Straight）**：水平或垂直方向直通 2. **弯管（Elbow）**：90° 转弯，连接相邻两个方向 3. **T 形管（Tee）**：三通管，连接三个方向 4. **十字管（Cross）**：四通管，连接四个方向（旋转无效果） 5. **空格（Empty）**：无管件，水流无法通过 ### 交互操作 6. **左键点击**：顺时针旋转管件 90° 7. **右键点击**：逆时针旋转管件 90°（或移除管件） 8. 旋转时有流畅的旋转动画（CSS transition 或 Canvas 动画） 9. 管件旋转后实时检测连通性，高亮显示当前已连通的路径 10. **开始按钮**：点击后水龙头开始出水，水流沿连通管道流动 ### 水流动画 11. 水流从水龙头出发，沿管道逐格流动，有明显的流动方向感 12. 水流动画用蓝色半透明液体效果，在管道内部流动（不是整格变色） 13. 水流到达管口不对的位置时停止，该位置闪烁红色提示"断路" 14. 水流成功到达水桶时，水桶有注水动画 + 通关提示 15. 水流流动速度适中，让玩家能清晰看到水的路径 ### 关卡系统 16. 至少 5 个预设关卡，难度递增（网格从小到大、管件类型逐步增加） 17. 随机关卡模式：必须保证有解，采用"先生成解再打乱"的方式：先生成一条从水龙头到水桶的连续合法路径，根据路径方向放置正确管件，再随机旋转这些管件作为谜面；路径外格子可填充随机干扰管件或空格，生成后需通过连通性检测验证水源到水桶可达 18. 关卡选择界面，显示每关的最佳成绩 19. 通关后自动进入下一关 ### 计时与计分 20. 每关开始计时，显示已用时间 21. 计分规则：基础分 1000 - 用时秒数 × 10 - 旋转次数 × 5 22. 显示当前关卡的旋转操作次数 23. 通关时显示评级：S / A / B / C（基于分数） ### 视觉设计 - 管道用圆角矩形绘制，内部中空，有管壁厚度感 - 水龙头和水桶用简洁的图标/插画表示，有辨识度 - 整体配色清新明亮：浅蓝背景 + 灰色管道 + 蓝色水流 - 已连通的管道高亮（如边框变亮或内部微光） - 网格线清晰但不抢眼 - 管件旋转动画流畅（200ms transition） - 响应式布局，移动端可触摸操作 ````