1、立项背景和目标
随着数字化生活的普及,模拟人生类游戏逐渐成为休闲娱乐的重要品类。本项目"家业长歌"以家族生命周期为核心,融合教育、职业、婚姻、生育、财富积累等真实人生要素,旨在打造一款零依赖、易部署、可在浏览器中直接运行的轻量级家族人生模拟体验工具。通过后端自动运算与玩家关键抉择相结合,让每位用户体验从出生到传承家族的完整人生故事。
2、软件功能、核心功能模块的介绍
本软件包含五大核心功能模块:
- 故事模块 :展示年度人生事件、现金流与成长日志,是玩家与人生交互的主界面;
- 家族模块 :以可视化图谱呈现家族成员关系,支持画布缩放、拖拽调整,直观展示血脉传承;
- 足迹模块 :汇总人生统计数据,展示成就徽章与一生总结;
- 商店模块 :按生活、职业、角色、装扮四大分类,基于人生经历逐步解锁内容;
- 奇遇模块 :以命运图谱形式呈现人生奇遇树,满足前置条件后由玩家主动选择,影响家族走向。
此外还包含人物属性面板(智力、情商、体魄、创造、魅力、机敏六大属性)、教育路径系统(涵盖学前至博士共十个学历层级及对应专业)、职业系统(60+职业,含学历、证书、专业、属性多重准入条件)、健康疾病系统、犯罪司法系统、资产投资系统等子模块。
3、业务流程、功能路径描述
启动游戏后,玩家首先选择性别,随后角色以0岁出生。游戏以"年"为时间单位自动推进:每年系统自动计算健康、心情、收支、事件等变化,玩家在关键人生节点(升学、就业、结婚、生育、奇遇、犯罪等)做出抉择。教育路径需依次满足学历要求、支付学费、匹配属性与专业;职业变更需满足学历、证书、专业及属性条件;家族通过生育、配偶加入实现代际传承,每代继承上一代的潜能、经济与解锁进度;奇遇树按条件逐级解锁,玩家选择后永久影响家族属性。最终家族的成就、足迹与财富通过存档系统持久化保存,支持跨会话延续人生。
1、整体架构和设计思路,不同模块使用的技术栈
本项目采用前后端分离的轻量级架构,核心设计思路为"零依赖、可独立运行"。前端为原生 HTML5 + CSS3 + JavaScript(ES6+),不使用任何框架或第三方库,手写 DOM 操作与动画,通过 CSS 变量、Flexbox/Grid 布局实现响应式界面;后端基于 Node.js 原生 http/fs/path 模块搭建静态文件服务器与 RESTful 存档接口,同样不引入 Express 等框架;数据存储方面,客户端使用 localStorage 实现自动存档,服务端通过 JSON 文件持久化存档数据。整体架构分为五大模块:故事模块(事件流渲染)、家族模块(Canvas 绘制与拖拽交互)、足迹模块(成就统计)、商店模块(条件解锁引擎)、奇遇模块(树形图可视化)。
2、"我"的负责模块和结果(尽可能量化)
负责全部核心模块的设计与实现:① 游戏主逻辑引擎(game.js 约 2400 行),涵盖 6 大属性系统、10 个学历层级、47 个职业数据;② 存档系统(server.js),支持 GET/POST 读写,已生成 21 份存档记录;③ 家族可视化图谱,支持 1100×760 画布缩放拖拽与 SVG 连线绘制;④ 奇遇树系统,包含 20 个节点、5 条层级路径;⑤ 事件弹窗引擎,支持多分支选择与人物卡渲染;⑥ 响应式 UI 适配,覆盖 720px 及 520px 两档移动端断点。
3、"我"遇到的难点、坑,和解决方案
难点一:家族图谱动态布局与 SVG 连线同步——初始方案用绝对定位后连线坐标计算不准,解决方式是将连线层设置为 pointer-events:none 独立覆盖层,采用相对定位 + transform-origin:0 0 统一坐标系,实现拖拽时连线实时跟随。难点二:存档一致性——刷新后未保存的 pendingChoice 会丢失,解决方式是在页面加载时读取 localStorage 后立即清空挂起状态,同时服务端采用写入临时文件再 rename 的原子操作防止存档损坏。难点三:移动端触摸手势冲突——家族画布的 touch 事件与页面滚动冲突,解决方式是为 viewport 添加 touch-action:none,手动监听 pointer 事件实现画布平移与缩放。这个也是练手的,根据抖=抖音游戏改变优化,全程代码自己写的,页面是根据那个小游戏构建的,拿来不停优化自己