一、自我介绍
大家好，我是 会飞的哈士奇，一名热爱传统文化的全栈开发者。之所以做这个项目，源于一次观察：3岁的侄子对《神奇宝贝》如数家珍，却对中国自己的《山海经》一无所知。我突然意识到——问题不是孩子不爱传统文化，而是我们没有用孩子能理解的方式去呈现。
《山海经》里有450多种异兽，每只都有独特的形象、习性和故事，这本身就是最天然的"角色库"。为什么不让这些异兽成为孩子的"第一个朋友"？
第一次打开 TRAE IDE 时，我被它的能力震撼了——以前需要查文档、写样板代码的工作，用自然语言描述一下就能生成。从创意构思到代码实现，全程 AI 协作，效率提升了至少5倍。TRAE 更像是一个能力极强的搭档，帮你把框架搭起来、把细节补全，而你只需要专注产品设计和文化内容的把控。
这次复赛，我在初赛基础上新增了15+项功能，从游戏性、教育性、体验感三个维度全面升级——让《山海经》从"束之高阁"变为"孩子心中的朋友"
二、产品简介
是什么？
《山海经异兽幼儿园》是一款面向 3-10岁儿童 的 Web端互动养成游戏（纯 HTML/CSS/JavaScript，零依赖，打开即用）。孩子从金蛋中孵化一只《山海经》异兽，通过喂养、玩耍、答题、探险等方式陪伴它成长——而获得"知识果实"的唯一方式，是回答关于这只异兽的《山海经》问题。孩子在养宠物的过程中，不知不觉就记住了古籍内容。
游戏融合了三种核心体验：
-
异兽养成：从蛋期到成年期，20+种山海经异兽，每只都有独特性格和故事
-
知识答题：学习不是任务，而是获得"知识果实"的奖励途径
-
山海探险：塞尔达风格地图，八大区域探索，动态故事生成
面向谁？
核心目标用户：3-10岁儿童（学龄前至小学低年级）
教学用户：幼儿园/小学教师/家长，用作传统文化互动教学素材
典型使用场景：
-
日常陪伴：孩子每天花10-15分钟照顾异兽，形成习惯
-
睡前故事：家长和孩子一起"探险"，异兽成为睡前话题
-
课堂辅助：教师用投影展示，全班一起认识新的异兽
-
用户使用路径
-
选蛋孵化 → 选择一颗金蛋 → 异兽破壳出场 → 输入名字
-
新手引导 → 分步教程了解功能 → 开始养成
-
日常养成 → 知识问答获得果实 → 喂食异兽 → 抚摸/玩耍增加心情
-
山海探险 → 打开地图 → 选择区域 → 动态故事 → 遇到异兽/战斗
-
收集图鉴 → 探险发现新异兽 → 查看档案 → 朗读原文
-
每日签到 → 签到领奖励 → 完成每日任务
-
社交互动 → 和异兽聊天 → 查看排行榜 → 邀请好友
-
异兽进化 → 成长值达标 → 蛋期→幼年→成年 → 解锁结局
-
| 升级项 | 初赛 Demo | 复赛完整版 |
| 异兽进化 | 无进化 | 蛋期→幼年期→成年期三阶段，外观变化+光晕效果 |
| 益智游戏 | 无 | 拼图+记忆翻牌+消消乐三款，支持难度选择 |
| 好友排行榜 | 无 | 三维度排序（成长/知识/收集），8位模拟好友，邀请功能 |
| 每日签到 | 无 | 连续签到递增奖励+签到日历+每日任务系统 |
| 声音朗读 | 无 | 小女孩音色（pitch=1.35），有感情朗读，拼音乱码修复 |
| 原文查看 | 无 | 拼音注音+白话译文+趣味知识，朗读按钮 |
| 新手引导 | 无 | 分步教程，高亮引导，支持跳过 |
| 地图风格 | 简单矩形区域 | 塞尔达风格不规则区域，行书字体，悬停浮动感 |
| 聊天功能 | 简单弹窗 | 左下角浮动图标+历史记录+AI接入支持 |
| 暗黑模式 | 无 | 全界面暗黑适配，一键切换 |
| 数据面板 | 无 | SVG环形图可视化数据展示 |
| 结局画面 | 无 | 成年后解锁专属结局 |
| 分享卡片 | 无 | Canvas绘制，可保存/分享 |
| 加载动画 | 无 | 精美加载动画 |
| 响应式 | 仅桌面 | 手机/平板/电脑全适配 |
| AI对话 | 预设回复 | 预设回复+豆包AI可选接入 |
| 四、产品创作历程 |
创意诞生
灵感来自一次观察：3岁的侄子对《神奇宝贝》如数家珍，却对中国自己的《山海经》一无所知。我意识到，问题不是孩子不爱传统文化，而是我们没有用孩子能理解的方式去呈现。《山海经》里有450多种异兽，每只都有独特形象和故事，这本身就是最天然的"角色库"——为什么不让它们成为孩子的"第一个朋友"？
于是有了核心创意——把《山海经》异兽变成孩子的养成宠物，让学习古籍变成"获得奖励的途径"。
初赛阶段
初赛时提交了一个能跑通的 Demo：实现了选蛋孵化、基础养成、知识问答、山海探险、异兽图鉴等核心功能。验证了核心链路：孩子可以孵化异兽 → 答题获得果实 → 喂食养成 → 探险收集 → 图鉴查阅。
复赛迭代
游戏性升级
● 异兽进化系统：蛋期→幼年期→成年期，外观和光晕变化
● 益智小游戏：拼图、记忆翻牌、消消乐三款，难度可选
● 好友排行榜：三维度排序，模拟好友+邀请功能
● 每日签到+任务系统：双轨激励，持续留存
教育性升级
● 声音朗读：小女孩音色，有感情朗读，拼音乱码智能修复
● 原文查看：拼音注音+白话译文+趣味知识
● 新手引导：分步教程降低上手门槛
体验感升级
● 塞尔达风格地图：不规则区域，行书字体，悬停浮动感
● 聊天优化：浮动图标+历史记录+AI接入
● 暗黑模式、数据面板、结局画面、分享卡片、加载动画、响应式适配
关键决策
为什么用纯 HTML 而不是框架？ 零依赖，打开即用，无需安装环境。适合快速验证创意，也方便部署到任何静态托管平台。对于参赛 Demo 来说，最简技术栈就是最好的选择。
为什么选《山海经》而不是唐诗宋词？ 《山海经》有450多种异兽，每只都有独特形象和故事，天然适合做"角色库"。异兽形象鲜明、故事有趣、数量足够多，可以做很久的内容更新。而唐诗宋词更适合背诵，缺乏"养成"的趣味性。
为什么把学习设计成"获得奖励的途径"？ “养成游戏 + 知识答题"的模式经过了验证（如《神奇宝贝》《旅行青蛙》）。把"学习"嵌入"获得奖励的途径”，比"学习任务"有效10倍。孩子为了喂异兽，会主动答题学知识。
为什么朗读用小女孩音色？ 目标用户是3-10岁儿童，小女孩音色更有亲和力，孩子更愿意听。pitch=1.35 模拟高音调，rate=0.88 稍慢语速更有感情。同时智能清理
五、TRAE 实践过程
整个 Demo 从0到1，完全用 TRAE IDE + TRAE Work 开发完成，从创意构思到代码实现，全程 AI 协作。
开发关键步骤
步骤一：创意构思
使用 TRAE Work 生成完整的创意提案，包括问题洞察、核心功能、差异化分析、商业模式等。AI 帮我把模糊的想法变成了结构化的方案。
步骤二：主程序框架搭建
使用 TRAE IDE 从零搭建 HTML 框架，包括欢迎页、孵化页、游戏主页三个核心界面。AI 根据描述自动生成了完整的页面结构、CSS 样式和 JavaScript 逻辑。
步骤三：地图系统开发（6轮迭代）
● 第一轮：基础地图和区域划分
● 第二轮：拖拽缩放和边界限制
● 第三轮：单 SVG 多 path 结构，解决点击区域重叠
● 第四轮：塞尔达风格不规则区域设计
● 第五轮：缩放限制（最小铺满，最大3倍）
● 第六轮：行书字体 + 悬停浮动感
步骤四：探险与战斗系统
动态故事生成、随机战斗、饱食度/心情消耗、休眠唤醒等完整游戏循环。
步骤五：复赛15+项功能升级
● 新手引导、异兽进化、结局画面
● 益智小游戏（拼图、记忆翻牌、消消乐）
● 每日签到+任务系统、好友排行榜
● 声音朗读（小女孩音色+拼音修复）
● 暗黑模式、数据面板、分享卡片
● 响应式适配、加载动画
开发心得
用 TRAE 开发最大的感受是：从"我要写代码"变成了"我要设计产品"。
以前做一个项目，80%的时间在写代码、调样式、改bug。现在这些事情 AI 都做了，我只需要想清楚"产品应该是什么样的"，然后用自然语言描述给 AI。
复赛阶段最大的挑战是细节打磨——朗读功能的拼音乱码问题，需要 AI 理解
最大的惊喜是创意激发。比如"饱食度为0时进入休眠，答题唤醒"这个机制，就是 AI 提出来的。"签到+任务系统"的双轨激励设计，也是在讨论中碰撞出来的。
关键任务对话 Session ID
.3788234538092256:445d489462a4226999219b0dc869e7ee_6a36628565d5a20b4775f5f0.6a6d88885198e5b7af4b1399.6a6d8887d77eaf1c66a98b65:Trae CN.T(2026/8/1 13:47:52)
.3788234538092256:e522e728b723e58a012bc49bfd958108_6a36628565d5a20b4775f5f0.6a6ce24707c04b103211b6c1.6a6ce2463242126e800bf767:Trae CN.T(2026/8/1 01:58:31)
.3788234538092256:2be4a4608f6431e87831dfda764e11fb_6a36628565d5a20b4775f5f0.6a6cdf2a07c04b103211b55b.6a6cdf293242126e800bf765:Trae CN.T(2026/8/1 01:45:14)
.3788234538092256:2e5472da96582de4d7f99655b26ededb_6a36628565d5a20b4775f5f0.6a6cd72507c04b103211b153.6a6cd7243242126e800bf762:Trae CN.T(2026/8/1 01:11:01)
技术方案分享
技术栈
| 层级 | 技术 | 说明 |
|---|---|---|
| 前端 | 纯 HTML/CSS/JavaScript | 零依赖，打开即用，单文件部署 |
| 存储 | localStorage | 本地存档，自动保存进度 |
| 语音 | Web Speech API | SpeechSynthesis 朗读，pitch=1.35 小女孩音色 |
| 地图 | SVG path | 不规则区域路径，拖拽缩放交互 |
| 动画 | CSS Animation + Canvas | 过渡动画、打字机效果、分享卡片绘制 |
| AI 对话 | 大模型 API（可选） | 兼容其他大模型格式 |
| 部署 | Netlify + GitHub | 自动部署，push 即更新 |
数据面板展示内容包括：
● 总游玩时长 + 成就解锁数
● 答题正确率环形图（答对题数/总题数）
● 异兽收集进度环形图（已收集/30）
● 区域解锁进度环形图（已解锁/8）
● 小游戏最高分（拼图/记忆翻牌/消消乐）
七、后续计划
● 内容扩充：异兽数量从20+扩展到50+，覆盖《山海经》主要篇章
● 小程序版本：迁移到微信小程序，接入真实好友数据
● AI 深度对接：异兽能根据上下文智能对话，动态生成探险故事
● 亲子模式：新增亲子共玩副本，家长和孩子一起探险
语音识别：支持语音答题，降低低龄儿童使用门槛