摸鱼海湾 Idle Cove
单文件 HTML5 Canvas 竖屏钩钓小游戏——以「办公室摸鱼」为叙事的像素风休闲竞技复刻,离线可玩、本地存档。
HTML5 Canvas JavaScript Vibe Coding
H5 Game Canvas
项目简介
《摸鱼海湾》(Idle Cove)是一款个人复刻与原创叙事结合的竖屏钩钓小游戏。主角 阿星 在 白浪岛 的栈桥边「合法摸鱼」——钩爪摆动、发射、回收,从浅海捞起便签小鱼、午休胖鱼、漂流宝箱,也要躲开咖啡水母与电光水母。
产品定位是 轻量 H5 摸鱼体验:单文件 index.html 即可离线运行,无需后端与外部资源;叙事与 UI 围绕「等会议、午休、通勤」等办公室场景展开,把经典钩钓机制包装成可分享的休闲小品。
核心玩法
- 钩爪循环:钩爪在栈桥上方左右摆动;点击或空格发射,命中目标后按质量减速回收,带回得分或惩罚。
- 目标类型:便签小鱼、午休胖鱼、发光大鱼、珍珠、漂流宝箱、空瓶与 漂流信件、咖啡/电光水母(负分)等;宝箱命中后随机开出银币、金币或空贝壳。
- 双模式
- 休闲摸鱼:可选 30 / 60 / 120 秒或 无尽;自选场景(含六关主题与隐藏「星砂新港」);只看总分与收集,无过关压力。
- 竞技冲分:45 秒限时,按关卡 动态目标分(可用分 × 基础比例 × 难度系数)判定是否达标,逐关推进。
- 收集与叙事:图鉴记录各目标历史最高分;摸到 漂流瓶信件 可在信件页阅读短文本,增强「海湾」世界观。
关卡设计(竞技)
| 关卡 | 名称 | 时长 | 主题 |
|---|---|---|---|
| 1 | 便签浅湾 | 45s | 入门,便签鱼与宝箱 |
| 2 | 大鱼海沟 | 45s | 引入发光大鱼 |
| 3 | 漂流箱潮 | 30s | 宝箱数量波动 |
| 4 | 珍珠浅滩 | 60s | 珍珠收集 |
| 5 | 水母夜港 | 45s | 水母密度提升 |
| 6 | 急潮通勤 | 30s | 目标移动加速 |
难度可在 低 / 中 / 高 三档间切换,影响目标分阈值。
技术实现
- 渲染:原生 Canvas 2D,逻辑分辨率 360×640(9:16),外层响应式缩放适配手机与桌面。
- 架构:单文件 IIFE,状态机驱动(菜单 / 游戏中 / 结算 / 图鉴 / 信件 / 说明);无构建链、无 npm 依赖。
- 持久化:
localStorage保存休闲/竞技最高分、图鉴解锁与已读信件。 - 开发方式:需求与迭代文档 + Vibe Coding 分步提示词驱动实现;从 v1.0 单局 MVP 迭代至 v1.1 双模式、六关竞技与无尽场景。
项目产出
- 可玩成品:
index.html(约 1800+ 行,开箱即玩) - 设计文档:
摸鱼海湾参考与明细.md(机制、数值、提示词) - 迭代记录:
版本迭代.md(v1.1 完成项与 v1.2+ 路线图) - 需求说明:
提交/需求文档v1.md
本地预览
在浏览器中直接打开项目目录下的 index.html 即可。推荐用手机模式或窄窗口查看竖屏布局。
后续规划
- 竞技模式 UI 与关卡选择流程打磨
- 无尽模式数值与场景轮换优化
- 可选:接入 Codex / 轻量后端做排行榜(当前为纯本地)
个人贡献
- 玩法与叙事设定(摸鱼主题、目标命名、信件文案方向)
- 单文件 Canvas 游戏完整实现(钩爪物理、生成器、双模式、UI、存档)
- 关卡数值与难度曲线设计
- Vibe Coding 工作流:需求拆解 → 分模块提示词 → 版本迭代文档维护