Demo

摸鱼海湾 Idle Cove

单文件 HTML5 Canvas 竖屏钩钓小游戏——以「办公室摸鱼」为叙事的像素风休闲竞技复刻,离线可玩、本地存档。

摸鱼海湾 Idle Cove 原型预览
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 工作流:需求拆解 → 分模块提示词 → 版本迭代文档维护