【Code with SOLO】儿子说原版饥荒太可怕，我用 SOLO 7 天给他做了一个儿童友好版

SOLO挑战赛专区
1

摘要

有一天晚上，我上小学二年级的儿子回家兴奋地告诉我，他看其他同学玩了一个超好玩的荒野生存小游戏，然后眨着眼睛问我：“爸爸，你能不能也帮我做一个？”

7 天后，一个 19,500 行代码、8 个角色、四季轮转的饥荒风格网页生存游戏诞生了。全部代码和 16 份设计文档，都由 SOLO 完成。

背景

故事要从春节说起。

今年春节，我第一次尝试用 TRAE 的 SOLO 模式给儿子做了一个贪吃蛇网页小游戏。他玩得很开心，过年期间表哥表姐到家里玩，他见到了就迫不及待拉着他们过来炫耀了一番。从那以后，他就觉得"爸爸用 AI 做游戏"是一件很酷的事。

前几天晚上，他放学回来跟我说看其他同学玩了一个荒野生存小游戏，觉得很好玩，问我能不能也做一个。说实话，一个完整的生存游戏远比贪吃蛇复杂——角色系统、资源采集、物品制作、生存属性管理……但看着他的眼神，我还是答应了。

刚好我在 TRAE SOLO 独立端发布会时就拿到了邀请码，一直想找个有挑战性的项目好好体验一下 SOLO 的完整能力。儿子的请求，正好给了我一个完美的理由。

但这次和做贪吃蛇有一个根本区别：贪吃蛇没有目标用户的概念，但这个游戏不一样——它的核心玩家是我儿子和他的同学们，一群小学生。这意味着每一个设计决策都要问自己一个问题：“一个 8 岁的小孩能理解吗？能操作吗？会害怕吗？”

秋天
秋天1920×1010 166 KB

实践过程

第一步：和 SOLO 一起"做游戏"

我没有直接说"帮我写一个游戏"，而是把儿子的需求翻译成了一个合理的 Prompt：

Prompt：

创建一个饥荒风格的网页生存游戏项目，使用 Vue 3 + Pinia + Vite。要求对儿童友好的暗色 UI 风格、角色选择系统（8 个角色）、生存属性系统（生命/饥饿/理智/潮湿）、资源采集和制作系统。

SOLO 输出了完整的架构设计：


src/

├── components/ # 38 个组件

├── composables/ # 15 个逻辑模块

├── stores/ # 4 个状态管理

├── data/ # 游戏数据配置

├── pages/ # 页面组件

└── styles/ # 样式变量

关键经验：合理使用 Skill 技能

在开发过程中，我主动搜索并安装了多个 Skill 技能来提升代码和 UI 质量：

  • Vue 3 全家桶 Skill（Vue 3 Composition API、Pinia、Vue Router）：由社区贡献，其中包含 Vue 核心开发者贡献的 Skill，涵盖各框架的最佳实践和常见模式，让生成的代码符合框架官方规范，有效去掉 AI 味

  • frontend-design Skill：专门用于构建具有独特风格、生产级质量的前端界面，避免千篇一律的 AI 审美。游戏中的暗色儿童友好风格 UI、金色强调色体系、精致的动画效果，都得益于这个 Skill 的指导

使用 Skill 的好处是显而易见的：

  • 代码质量更高：生成的代码符合框架官方推荐的模式和规范

  • 去掉 AI 味：代码和 UI 都更像"人设计的"，而不是 AI 生成的模板

  • 避免常见坑：Skill 中内置了框架的常见陷阱和解决方案

比如，在生成 Composable 时，SOLO 会自动遵循 use 前缀命名规范、正确处理 ref 解包、合理使用 shallowRef 优化性能等。在 UI 设计时，frontend-design Skill 会引导 SOLO 使用克制的配色、有层次的排版和精致的微动效，而不是堆砌渐变和阴影。这些都是 Skill 带来的"隐形加成"。

第二步：从"能跑"到"好玩" — 儿子是我的产品经理

项目一开始是定位为 PC 端网页游戏，在电脑上用键盘 WASD 操控角色移动，用鼠标点击采集资源。

但有一个别人没有的优势——我有一个二年级的"内部测试员"，而且他毫不客气。每天晚上我写完代码，他就来试玩，然后给出"产品反馈"：

第一周迭代记录：

| 天数 | 儿子的反馈 | 我的行动 |

|------|-----------|---------|

| Day 1 | “爸爸，为什么一直白天？没有晚上吗？” | 让 SOLO 实现昼夜循环系统 |

| Day 2 | “晚上好黑啊，而且一直晚上好无聊” | 让 SOLO 加入黄昏过渡和阶段时间显示 |

| Day 3 | “为什么永远都是春天？能不能有冬天？” | 让 SOLO 设计四季系统（春夏秋冬） |

| Day 4 | “冬天好冷，我一直在掉血，怎么保暖啊？” | 让 SOLO 实现季节感知的防具制作 |

| Day 5 | “爸爸我上学去了，你帮我玩一下嘛” | 让 SOLO 设计自动挂机系统 |

初级版本
初级版本1920×1440 165 KB

春天
春天1920×1009 175 KB

夏天
夏天1920×1009 174 KB

秋天
秋天1920×1010 166 KB

冬天
冬天1920×1009 148 KB

就这样，游戏从最初一个只有采集功能的半成品，在儿子的"需求驱动"下，一步步迭代成了有昼夜交替、四季更替、智能挂机的完整生存游戏。

这大概是我经历过的最真实的敏捷开发了。

第三步：把"儿童友好"作为第一要义

这是本项目与其他游戏项目最大的不同。从第一天起，我就和 SOLO 明确了一个原则：这个游戏的目标用户是中小学生，所有设计决策都要以"儿童友好"为第一优先级。

起因很简单——我给儿子看了原版饥荒的界面，他直接说"太可怕了"。原版饥荒的暗黑哥特画风、扭曲的角色头像、诡异的音效，对成年人来说是氛围感，对小学生来说就是恐惧感。所以我基于儿童友好的原则，对游戏的视觉和交互做了大量适配。

具体体现在以下几个方面：

1. 点击即移动 — 提供多种操控方式

原版饥荒使用 WASD 键盘控制移动，对熟练的 PC 玩家来说很自然，但对小学生来说门槛较高。SOLO 在保留键盘操控的基础上，新增了"点击世界地图，角色自动寻路移动"的鼠标操作方式，让不同年龄的用户都能选择自己习惯的操控方式：


// usePlayerMovement.js — 点击即移动

function moveTo(targetX, targetY) {

clickTarget.x = Math.max(PLAYER_BOUNDS.xMin, Math.min(PLAYER_BOUNDS.xMax, targetX))

clickTarget.y = Math.max(PLAYER_BOUNDS.yMin, Math.min(PLAYER_BOUNDS.yMax, targetY))

clickTarget.active = true

}

同时，点击资源时如果距离太远，角色会先自动走过去再采集，不需要手动走到资源旁边：


// WorldResources.vue — 超出范围自动走近

function handleClick(r) {

if (!isInRange(r) && playerMoveTo) {

playerMoveTo(r.x, r.y) // 先走过去

return

}

startGather(r) // 到了再采集

}

2. 脉冲光晕 — 让孩子看到"我点在哪里了"

小孩子点击屏幕时，如果没有任何视觉反馈，他们会不确定"有没有点上"。SOLO 设计了三层脉冲光晕：


/* MoveTargetIndicator.vue — 点击目标指示器 */

@keyframes mtiCenterPulse {

0%, 100% { opacity: 0.7; transform: scale(1); }

50% { opacity: 1; transform: scale(1.3); }

}

@keyframes mtiRingExpand {

0% { transform: scale(0.5); opacity: 0.8; }

100% { transform: scale(2.5); opacity: 0; }

}

金色中心点 + 两层扩散光环 + 到达时的膨胀动画，三层反馈让孩子始终知道"我要去哪里"。

脉冲光晕
脉冲光晕1920×1009 126 KB

3. 夜间可视区域 — 不让孩子在黑暗中迷失

原版饥荒的夜晚非常黑，对小孩子来说可能会害怕。SOLO 实现了一个以角色为中心的径向渐变可视区域：


// HudPage.vue — 夜间视野系统

const nightVisibilityStyle = computed(() => ({

background: `radial-gradient(circle at center,

transparent 0%, transparent 4%,

rgba(2, 2, 15, 0.3) 8%,

rgba(2, 2, 15, 0.6) 14%,

rgba(2, 2, 12, 0.82) 22%,

rgba(0, 0, 5, 0.97) 50%)`,

}))

角色周围始终有一圈光亮，让孩子不会完全"看不见"，减少恐惧感。

夜晚
夜晚1920×1008 118 KB

4. 角色台词 — 温暖不恐怖

原版饥荒的角色台词偏黑暗和哥特风。SOLO 在设计角色时做了大量"儿童友好化"处理：

  • 温蒂：原版台词偏忧郁，SOLO 改为更温暖的表述，保留了对姐姐阿比盖尔的思念，但去掉了黑暗元素

  • 瓦力机器人：原版是冷酷的机器人，SOLO 重新定义为"可爱又可靠的机器人"，台词充满好奇心和正能量

  • 韦斯：原版全程沉默不说话，SOLO 改为用 emoji 表达情绪，比如"（开心地转了一圈）“”（蹦蹦跳跳地走着）"，既保持了角色设定又增加了互动感

角色在闲置时还会主动"说话"——通过气泡对话给出游戏提示。SOLO 设计了一个完整的台词系统：

  • 时间段感知：白天/黄昏/夜晚各有不同台词，比如白天说"又是美好的一天，出发采集食物啦！“，夜晚说"好黑呀…有点害怕…”

  • 潮湿状态感知：wet > 30/60/80 时会优先触发潮湿台词，用幽默化解不适感，比如"我快变成一条鱼了！！！"

  • 游戏提示嵌入：在通用台词中自然融入操作提示，比如在 PC 端可以通过快捷键组合进行快捷操作，“按 C 可以打开制作面板哦~”“按 B 看看行囊里有什么好东西！”

这种设计既给了孩子陪伴感，又在不知不觉中完成了新手引导。

自我介绍
自我介绍1920×1009 125 KB

5. 物品描述 — 简单易懂

所有物品描述都使用简单直白的语言，避免复杂术语：


斧头："基础砍伐工具，可以砍伐树木获取木材。速度较快但伤害较低。"

绷带："基础治疗物品，使用后恢复 20 点生命值。"

食物属性用颜色区分：绿色代表恢复、红色代表扣减，一目了然。

第四步：角色系统 — 儿子最期待的部分

SOLO 设计了 8 个差异化角色。儿子一眼就选中了"温蒂"（因为可以召唤幽灵姐姐阿比盖尔），和我在饥荒里最喜欢用的角色一模一样。

角色选择
角色选择1920×1007 116 KB

角色详情
角色详情1920×1008 86.8 KB

SOLO 还实现了完整的采集流程（点击移动→采集动画→获得物品）和 20+ 制作配方。儿子最喜欢的部分是烹饪锅——把不同的食材丢进去，会做出不同的料理。

制作台
制作台1920×1008 137 KB

烹饪锅
烹饪锅1920×1007 84.2 KB

第五步：智能挂机系统 — “爸爸帮我玩一下嘛”

这是整个项目最复杂的系统，也是由儿子直接催生的——“爸爸我上学去了，你帮我玩一下嘛”。

我没有直接让 SOLO 写代码，而是采用了多角色评审法：

  1. 游戏策划设计方案 → SOLO 输出完整设计文档

  2. 资深玩家（就是我自己）评审方案 → SOLO 作为 10 年饥荒老玩家提出改进

  3. 产品经理综合裁决 → SOLO 裁定分歧、确认范围

  4. 开发实现 → SOLO 按最终方案生成代码

核心 Prompt：

你是一名资深的游戏策划师，请深入分析，并生成自动挂机系统的方案。

作为 10 年老玩家，你觉得以上方案如何？

作为资深产品经理，综合所有意见给出最终方案。

最终实现了 7 级优先级状态机、场景化进食策略、季节感知防具制作、操作日志等完整功能。

自动挂机
自动挂机1920×1009 100 KB

第六步：踩坑记录

开发过程中遇到了不少坑，记录几个典型的：

| 坑 | 现象 | 原因 | 解决方式 |

|—|------|------|---------|

| ref 自动解包 | 烹饪锅打开后黑屏，什么都没有 | Vue 3 模板中 ref 会自动解包，再写 .value 就是 null.value | 删除模板中多余的 .value |

| CSS 嵌套规范 | 构建时出现 &--absolute 警告 | CSS 嵌套规范中 BEM 修饰符不能直接跟在伪类 &:active 后面 | 拆分为独立的 .modal-card__close--absolute 选择器 |

| require 不走 alias | Vitest 测试文件找不到模块 | require() 不走 Vite 的 @ alias 配置 | 改用 ES import 语法 |

| data-hud 穿透 | 点击 HUD 区域时角色也跟着移动 | 世界点击事件没有排除 HUD 元素 | 通过 data-hud 属性 + closest() 过滤 HUD 区域 |

“爸爸，烹饪锅打开以后什么都没有，黑黑的！”——这是儿子帮我发现的第一个坑。

烹饪锅
烹饪锅1920×1007 84.2 KB

成果展示

项目数据

| 指标 | 数据 |

|------|------|

| 开发周期 | 7 天（每天下班后 2-3 小时） |

| 代码行数 | 19,500 行 |

| 组件数量 | 38 个 |

| 逻辑模块 | 15 个 Composable |

| 设计文档 | 16 份 |

| AI 生成占比 | 100%（全部代码） |

| 生产依赖 | 仅 3 个（Vue + Pinia + Vue Router） |

| 内部测试员 | 1 名（二年级，免费） |

| 目标用户 | 中小学生 |

在线体验

:globe_with_meridians: 点击体验

:open_file_folder: Gitee仓库

技术栈

Vue 3 + Pinia + Vite 5 + Sass，极简依赖，零运行时开销。

核心经验

儿子的评价

“爸爸，这个比学校里那个好玩多了！温蒂的幽灵姐姐好酷！”

“但是冬天还是太难了，你能不能帮我调一下？”

——这大概是对这个项目最高的评价了。而且他还提了 Bug，说明真的在认真玩。

SOLO 在项目中扮演的角色

| 角色 | 贡献 |

|------|------|

| 产品经理 | 需求分析、功能规划 |

| 架构师 | 目录结构、数据流设计 |

| UI 设计师 | 暗色儿童友好风格 |

| 游戏策划 | 系统设计、数值平衡 |

| 儿童体验设计师 | 点击移动、脉冲光晕、夜间视野 |

| 资深玩家 | 用户体验评审（10 年饥荒经验） |

| 产品经理（评审） | 方案裁决、范围控制 |

| 开发者 | 代码生成、Bug 修复 |

| 二年级测试员 | 需求驱动、Bug 发现（无偿） |

7 条核心经验

  1. 真实用户 > 假设需求：儿子的每一次"爸爸，为什么没有XXX"都是最真实的需求，比任何用户调研都有效

  2. 儿童友好是设计约束，不是附加功能：从第一天起就把"8 岁小孩能不能用"作为每一个设计决策的检验标准

  3. 分步拆解 > 一步到位：先架构→再设计→最后编码，比直接生成代码效率高 10 倍

  4. 多角色评审：让 SOLO 扮演不同角色评审方案，能发现单人思考的盲区

  5. 截图驱动调试：截图发给 SOLO 比口头描述 Bug 定位快 5 倍

  6. 敏捷迭代：每天写完→儿子测试→反馈→第二天改进，这就是最朴素的 Scrum

  7. 合理使用 Skill 提效：主动搜索安装 Vue 3 全家桶 Skill 和 frontend-design Skill，让代码质量和 UI 设计都更专业，有效去掉 AI 味

效率提升

我是一名纯前端工程师，没有游戏开发经验，也没有后端和设计团队的支撑。如果按照传统开发模式，这个项目需要一个完整的小团队：

| 角色 | 职责 | 预估工时 |

|------|------|---------|

| 前端开发 ×1 | 组件开发、状态管理、交互逻辑 | 6-8 周 |

| 游戏策划 ×1 | 系统设计、数值平衡、玩法规则 | 2-3 周 |

| UI 设计师 ×1 | 界面设计、动效设计、响应式适配 | 2-3 周 |

| QA 测试 ×1 | 功能测试、兼容性测试 | 1-2 周 |

| 合计 | | 约 3-4 个月 |

而且这还只是开发时间，没算上团队沟通、需求对齐、设计评审等协作成本。实际上一个 19,500 行代码、38 个组件、15 个逻辑模块、6 个核心游戏子系统的项目，对一名纯前端工程师来说，独立完成几乎是不可能的。

使用 SOLO 后，我一个人、7 天（每天仅 2-3 小时）完成了全部开发，效率提升约 15-20 倍。更重要的是，SOLO 同时扮演了策划、设计师、开发者、测试员等多个角色，让我一个人拥有了一个团队的能力。

写在最后

这个项目对我而言意义特殊。它不仅是一次 AI 辅助开发的技术实践，更是一段父子协作的回忆。

每天晚上，我坐在电脑前用 SOLO 写代码，儿子趴在旁边试玩，时不时冒出一句"爸爸，能不能加个XXX"。我把他的需求翻译成 Prompt，SOLO 就把代码写好了。他看到新功能上线时的兴奋，和我看到代码跑通时的满足感，大概是一样的。

他用着我用 AI 做的游戏，而我在旁边用 AI 不断优化——这种体验，大概就是技术最温暖的模样。

技术最大的价值，不是炫技，而是解决真实生活中的人的需求。哪怕这个"人"只是一个二年级的小学生。

如果 SOLO 能让更多家长用 AI 给孩子做点有趣的东西，那才是真正的"AI 无限可能"。

2

我去，这个牛

3

这个好 多多学习 感谢分享

1 个赞