静水 —— 海钓图鉴与烤鱼店经营游戏产品系统Vibe Coding

我要开发同款
1阅读

技术信息

语言技术
HTML5JavaScript小程序
系统类型
小程序轻应用WebH5
行业分类
游戏

作品详情

行业场景

市面上的钓鱼手游普遍把「钓」做成数值养成——体力条、扭蛋、限时活动,玩家钓的是数字不是鱼。我想做一款反过来的产品:节奏慢、没有体力限制、不催促,玩家打开它是为了安静待一会儿,而不是完成日常任务,目标用户是下班后想放空十分钟的人。

项目的另一个出发点是渠道。小红书小工具是一个几乎没人认真做游戏的离线 H5 容器:禁止一切网络请求(fetch / XHR / WebSocket 全不可用),不允许打包任何音频文件,文件类型只放行 .html / .css / .js 和几种图片格式。这些限制通常被当成「这个渠道做不了游戏」的理由,而我想验证的恰恰相反——在一个纯离线、零资源文件的壳子里,能不能把美术、音乐、语音、每日变化齐全的完整游戏做出来。

功能介绍

1、钓鱼核心:抛竿蓄力决定落点水深,不同深度对应不同鱼群;咬钩后进入收线张力博弈,线绷太紧会断、太松鱼会脱钩,需要一张一弛地收。

2、海洋图鉴:24 种鱼分五个稀有度(普通 / 少见 / 稀有 / 极稀有 / 传说),每条鱼配一句意境描述和两条科普知识,首次钓获自动收录并解锁词条。

3、烤鱼店经营:把钓到的鱼做成料理——备料、控炭火火候、接待客人、出菜定价,形成「钓鱼产出 → 料理增值 → 换更好的装备」的循环。

4、货郎商店:39 件商品,覆盖鱼竿、鱼饵、炊具、店铺装潢、功能升级五类。货郎会开口说一串听不懂的话,配说话、成交、拒绝、打盹四种神情与对应口型,买不起的时候他会皱眉。

5、每日变化:以日期为种子,每天刷新「今日爱咬的鱼」和货郎的收购溢价,完全不依赖服务端,同一天所有玩家看到同一份数据。

6、战绩分享卡:钓到新鱼或巨物时现场绘制一张图鉴卡,一键发布到小红书笔记。

7、出海模式(开发中):横屏第三人称驾船出海,从木筏、帆船、快艇到远洋游艇共 12 款船,从浅水到深海海况连续变化,右上角是圆形深海探测雷达——红点是靠近的鲨鱼,绿点是珍贵鱼群。

项目实现

独立开发,策划、美术、程序、测试、发布全部一人完成。

最硬的约束是容器不允许任何外部资源文件,所以所有内容都得「算」出来,这也构成了项目的主要技术难点:

· 像素美术零位图——全部美术资源用 SVG 在 2px / 4px 双网格上由代码生成,配合 shape-rendering="crispEdges" 保证像素硬边不被抗锯齿糊掉;角色表情用 SVG 图层组 + CSS class 切换实现,一张图切出四种神情。

· 音频零文件——BGM 与音效全部由 Web Audio API 实时合成。货郎「听不懂的话」用共振峰合成实现:锯齿波声门源 + 三路并联带通滤波器模拟 F1/F2/F3 元音共振峰 + 反馈延迟混响 + LFO 颤音,再按音节包络驱动嘴部开合动画,做到口型与发声同步。语音走独立总线,不受音乐淡入淡出影响。

· 每日变化零服务端——用以日期为种子的 LCG 伪随机数生成当日变量,纯离线也能保证全体玩家一致。

· 分享卡用 Canvas 2D 现场绘制后 toDataURL,经小程序桥接 API 发布。

· 工程侧:自研打包脚本做合规校验(文件类型白名单、网络调用扫描),Playwright 端到端测试覆盖主流程,成品 zip 191KB。

出海模式正在用 Godot 4.6 重写为原生 App,海面渲染是自己写的着色器:8 层锐化定向波解析求导得到法线(不用差分,无抖动)、Schlick 菲涅尔、程序化天空反射(海面反射与天空盒共用同一函数,保证水里映的太阳和抬头看到的是同一个)、浪尖次表面透光、按「高度 × 陡度」判定的泡沫、空气透视与胶片色调映射。海面网格是半径指数增长的同心环并每帧跟随相机,兼顾脚下密度与无边界海面。船的浮力用与着色器同系数的 CPU 版本做三点采浪定姿态,耐波属性决定贴合浪面的程度——「保持平衡」这条核心玩法

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论