一个存钱罐形象的角色,带着8到12岁的孩子完成三项任务。这是开发者提交的一个儿童财商教育游戏,名字叫MoneyVerse。
游戏里的向导叫Pip,是一只存钱罐。它陪玩家走完三条任务线,每条线对应一个具体的金钱概念。
![]()
三项任务,三种花钱场景
第一项任务叫"需要还是想要"。玩家手里有24枚金币的出游预算,要在不同选项之间做取舍,体会机会成本——花在这里的钱,就没法花在那里。
第二项任务叫"储蓄任务"。起点是一个装着100枚金币的罐子,目标是攒到150枚金币买一辆自行车,过程中会接触单利的计算方式。
第三项任务是"柠檬水摊"。玩家要处理进货成本、定价,最后算出利润,公式是收入减去支出。
三个场景分别对应预算分配、储蓄增值和经营核算,覆盖了孩子日常能接触到的金钱决策。
技术选型与内容管理
前端用的是Next.js框架的App Router模式,搭配React 19和TypeScript,样式用Tailwind CSS。
内容管理放在Sanity上,Studio嵌在/studio路径下。项目用到了next-sanity、@sanity/client、GROQ查询,以及defineLive来实现内容的实时更新。
游戏没有账号系统。进度存在玩家自己的浏览器里,用的是localStorage。浏览记录或浏览器缓存被清掉,进度就会重置。
Studio里做了不少定制。为lesson和mission两类内容建了schema,还有它们共用的对象:步骤、选项、测验题、奖励。课程和任务都配了一套审核流程,状态分为draft、inReview和approved三档,文档操作里有"送审"和"批准"两个动作。另外还做了一个自定义的CoinField输入组件,以及一个在Studio内部预览任务的功能。
开发节奏:两天推完大部分提交
9月30日到10月1日,开发者先从Sanity Learn学起Studio的基础。项目点子借助ChatGPT敲定,最初的MVP用Cursor AI搭起来。后来Cursor的额度用掉了90%,剩下的代码转到了Claude Code上写。他把Cursor阶段的对话提示做了总结,再交接给Claude Code。
10月2日是开发者的生日,这天没有动工。
10月3日到4日,大部分提交集中在这两天完成。最初的版本是一个PWA,带完整的Google登录,进度还能云同步到Sanity。后来这些功能被砍掉了——登录、云同步、PWA全部移除,目的是降低技术复杂度,赶在截止时间前把博客交上去。最终上线的游戏只支持访客模式,进度存在localStorage里。
10月5日,开发者一开始以为截止时间是10月4日中午12点30分(印度标准时间),于是先发了一版很粗糙的博客。后来发现真正的截止时间是10月5日中午12点30分,他把初版撤下,用多出来的时间打磨博客和项目。
让内容管理变成游戏的一部分
开发者自己发现了一个问题:游戏其实并不真正依赖Sanity。于是他给课程和任务都加上了审核流程,包括reviewStatus字段和"送审""批准"两个操作。
在部署的站点上,演示内容的兜底逻辑是关闭的。游戏只加载Sanity里已发布、已批准的内容。如果编辑没有批准并发布某个任务,玩家就看不到它。演示内容只在本地开发时作为兜底。
defineLive的作用是让已发布的任务无需重新部署就能出现在游戏里。
内容类型上,lesson和mission两类都带审核流程,字段包括reviewStatus和reviewerNote。内容分发走GROQ查询,过滤条件是reviewStatus等于"approved",使用published视角,再通过defineLive实现实时更新。
项目配置上,用到了项目ID、production数据集、一个CORS来源,以及npm run seed:sanity这条命令。
有几节课是Claude生成的,开发者在本机跑npm run seed:sanity把它们推到Sanity,用的是存在.env.local里的Editor级别写入令牌。他还按Claude的建议,手动在Studio里逐项录入,新建了一节叫"Comparing Before You Buy"的课,用来验证流程能不能跑通。
整个项目从学工具到交稿,前后大约六天,其中一天还是生日。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.