随笔 · Domal

随笔 · Domal https://domal.cc/tags/%E9%9A%8F%E7%AC%94/ Domal Hugo -- gohugo.io 荒岛救赎：归航之旅 https://domal.cc/thinking/%E8%8D%92%E5%B2%9B%E6%95%91%E8%B5%8E%E5%BD%92%E8%88%AA%E4%B9%8B%E6%97%85/ Mon, 17 Aug 2026 23:28:00 +0800 https://domal.cc/thinking/%E8%8D%92%E5%B2%9B%E6%95%91%E8%B5%8E%E5%BD%92%E8%88%AA%E4%B9%8B%E6%97%85/ <h1 id="完整游戏剧情架构设计方案">完整游戏剧情&amp;架构设计方案</h1>
<blockquote>
<p>类型：第三人称开放世界剧情向生存ARPG<br>
核心组合：男主 + 小女孩（固定主角组）<br>
单双人统一：单人模式下小女孩AI控制，双人模式下玩家B控制小女孩<br>
剧情目标：寻找失散的恋人 + 寻找小女孩的父母 + 离开孤岛
恋人定位：全程NPC（仅线索与回忆存在，实体未出现）</p>
</blockquote>
<hr>
<h2 id="一游戏核心总览">一、游戏核心总览</h2>
<h3 id="1-游戏定位">1. 游戏定位</h3>
<p>一款<strong>单人/双人均可</strong>的第三人称开放世界剧情向生存ARPG。融合情感羁绊、团队生存博弈、硬核动作狩猎与多分支剧情。单双人模式共享完全一致的主线剧情、目标与结局，仅在操作与互动方式上有差异化设计。</p>
<h3 id="2-核心主题">2. 核心主题</h3>
<p>绝境从不毁灭人心——真正的救赎，是在孤独中守护一份承诺，在绝望里点亮一盏希望。<br>
“哥哥，我们一起找到他们。”</p>
<h3 id="3-核心特色">3. 核心特色</h3>
<ul>
<li>
<p><strong>固定主角组</strong>：男主（25岁，Ethan 伊森） + 小女孩（约10岁，Mia 米娅），贯穿始终的羁绊核心</p>
</li>
<li>
<p><strong>双线寻人目标</strong>：寻找失踪的恋人（25岁，Joy 乔伊） + 寻找Mia的父母</p>
</li>
<li>
<p><strong>统一单双人剧情</strong>：单人AI小女孩，双人玩家B控制小女孩</p>
</li>
<li>
<p><strong>硬核生存规则</strong>：昼夜高危机制、强制归巢、动态天气、猛兽AI</p>
</li>
<li>
<p><strong>高自由开放世界</strong>：无缝地图，探索、建造、战斗、剧情一体化</p>
</li>
<li>
<p><strong>情感沉浸系统</strong>：记忆相机、希望值、恋人线索链、Mia成长曲线</p>
</li>
</ul>
<hr>
<h2 id="二世界观与背景">二、世界观与背景</h2>
<p>蔚蓝远洋，年轻情侣【男主】与【恋人】结束城市奔波，搭乘远洋轮渡开启蜜月旅行。同船有一位约10岁的米娅，她是海洋生物学家的女儿，随父母出海考察。<br>
甲板上，Mia的相机不慎掉落，Ethan飞身趁机抓住，避免了掉入海中的情况；三人因此结识，Mia亲切地喊“哥哥”“姐姐”，并一起拍下一张合影（成为关键道具）。<br>
轮渡行至海域禁区，毫无征兆的特级海上风暴骤然降临。黑云压海、暴雨倾盆、巨浪滔天，狂暴海风直接撕裂船体，轮渡瞬间解体倾覆。混乱的沉船灾难中，人群四散漂流，主角与恋人被巨浪强行冲散，彼此失联、生死未卜。
Ethan与Mia被冲上一座与世隔绝的无名孤岛。岛上白天静谧，夜晚黑雾笼罩，变异猛兽横行，天气变幻莫测。<br>
Ethan醒来后通过哭声寻找到Mia，Mia颤抖着说“哥哥，我怕……爸爸妈妈也不见了”。Ethan握住她的手：“别怕，我们一起找他们。”&hellip;</p>
<hr>
<h2 id="三完整主线剧情">三、完整主线剧情</h2>
<h3 id="序章骤雨失航陌路孤岛">序章：骤雨失航·陌路孤岛</h3>
<ul>
<li>
<p><strong>船上初遇CG</strong>：甲板上小女孩拍照，相机脱手，Ethan飞身接住。Mia甜甜道谢，恋人微笑轻声安抚小心。三人合影。</p>
</li>
<li>
<p><strong>海难CG</strong>：风暴中船体断裂，男主Ethan与恋人Joy被冲散。</p>
</li>
<li>
<p><strong>苏醒与相遇</strong>：Ethan在沙滩苏醒，循着哭声在附近礁石缝中找到Mia。</p>
</li>
<li>
<p><strong>新手引导</strong>：Mia用半块饼干分给Ethan，并拿出父亲留下的<strong>生存手册（残破）</strong>，帮助识别可食用植物、生火、找水源。</p>
</li>
<li>
<p><strong>首夜</strong>：简易草棚中，Mia问“姐姐和爸爸妈妈会没事吗？”Ethan说“一定会的，我们要坚强。”Mia点头，攥紧Ethan的衣角入睡。</p>
</li>
<li>
<p><strong>记忆相机</strong>：Mia的防水相机还能使用，拍下第一个场景“沙滩初营”，存入希望相册。</p>
</li>
<li>
<p><strong>初始技能</strong>：</p>
<ul>
<li>
<p>Mia：生存手册</p>
</li>
<li>
<p>Ethan：简单建筑技巧，搭建临时住所</p>
</li>
</ul>
</li>
</ul>
<h3 id="第一阶段沙滩扎根初聚人心">第一阶段：沙滩扎根·初聚人心</h3>
<ul>
<li>
<p><strong>区域</strong>：沙滩、近海浅滩 | <strong>猛兽</strong>：野狼、水鸟 | <strong>BOSS</strong>：狼群首领</p>
</li>
<li>
<p><strong>招募</strong>：厨师、女医生</p>
</li>
<li>
<p><strong>核心剧情</strong>：</p>
<ul>
<li>
<p>深夜狼群咬伤厨师，嘶吼声被Ethan听到之后，使用自制火把吓退狼群，救到了厨师。</p>
</li>
<li>
<p>女医生，被卡在礁石，三天没有吃喝，绝望之时，被Ethan、Mia救出。医生成为第二个被招募的成员，给被咬伤的厨师包扎伤口。</p>
</li>
<li>
<p>沙滩沉船残骸中Ethan发现<strong>恋人的发卡</strong>，Mia说“姐姐的……她还活着！”</p>
</li>
</ul>
</li>
<li>
<p><strong>技能解锁</strong>：</p>
<ul>
<li>
<p>战斗技巧：通过与狼群战斗发现狼群怕火，并识别野狼弱点（腰腹），标记敌人位置。</p>
</li>
<li>
<p>基础药物制作：用海边草药制作简易绷带。</p>
</li>
<li>
<p>食物解锁：通过补货海鱼和狼肉进行充饥。</p>
</li>
</ul>
</li>
</ul>
<h3 id="第二阶段拓荒密林矛盾初生">第二阶段：拓荒密林·矛盾初生</h3>
<ul>
<li>
<p><strong>区域</strong>：草原、阔叶密林 | <strong>猛兽</strong>：野猪、鬣狗、毒蛇、毒蛙 | <strong>BOSS</strong>：野猪王、鬣狗头领</p> 时间轴设想 https://domal.cc/thinking/%E6%97%B6%E9%97%B4%E8%BD%B4%E8%AE%BE%E6%83%B3/ Wed, 12 Aug 2026 18:00:00 +0800 https://domal.cc/thinking/%E6%97%B6%E9%97%B4%E8%BD%B4%E8%AE%BE%E6%83%B3/ <p>阿里技术大事记时间轴 Html 复刻方案</p>
<h1 id="html可视化时间轴复刻实践分享">HTML可视化时间轴复刻实践分享</h1>
<h2 id="一开发背景">一、开发背景</h2>
<p>偶然看到一款双层分流式技术大事记时间轴设计图，整体曲线脉络、上下分层事件卡片、竖排年份标注的视觉形式表现力很强，适合用来展示企业多年技术发展里程碑，于是决定使用原生 HTML/CSS/SVG 进行页面复刻。
本次复刻没有做到像素级一比一还原，但视觉结构、分层逻辑、矢量绘图核心效果已高度贴近原图，仍有细节优化空间。</p>
<p><img src="https://p11-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/10e40536619141a89e0c5a47fc93f760.png~tplv-a9rns2rl98-image-qvalue.image?lk3s=8e244e95&amp;rcl=20260813145004D0DEFD984F0C6ACA93F1&amp;rrcfp=1860f75c&amp;x-expires=1787208604&amp;x-signature=yk9IF6ByhAkzGsI9pbhdKBPpLoU%3D" alt="参考"></p>
<h2 id="二整体技术选型">二、整体技术选型</h2>
<p>整体采用<strong>无第三方依赖原生前端方案</strong>，轻量化、可直接在浏览器打开运行，适配大屏展示场景：</p>
<ol>
<li><strong>HTML5</strong>：语义化结构承载标题、年份事件卡片，划分上下两层事件轨道；</li>
<li><strong>CSS3</strong>：变量管理主题色、绝对定位布局、文字竖排、响应式横向滚动、多层元素层级控制；</li>
<li><strong>原生 SVG</strong>：绘制全部时间主线、分支连接线、节点圆点，矢量图形放大不失真；</li>
<li>不引入 JS、图片、外部样式表，所有逻辑与视觉全部内联在单文件中，打包、分发、使用更便捷。</li>
</ol>
<h2 id="三复刻过程中的核心难点与解决方案">三、复刻过程中的核心难点与解决方案</h2>
<h3 id="1-多层曲线时间脉络绘制svg难点">1. 多层曲线时间脉络绘制（SVG难点）</h3>
<h4 id="难点">难点</h4>
<p>原图时间轴并非单一直线，是多条交错弯折的折线路径，同时区分主视觉蓝线与灰色辅助线；每条年份节点需要垂直连线连接上下事件卡片，还要区分普通节点与终点标识圆点，手动编写路径坐标极易错位。</p>
<h4 id="解决方案">解决方案</h4>
<ul>
<li>分层编写 <code>&lt;path&gt;</code>，区分 <code>.blue</code> 主线、<code>.thin</code> 细蓝辅助线、<code>.grey</code> 灰色分层线，视觉层次和原图对齐；</li>
<li>统一规划节点坐标，先标记所有年份对应圆点位置，再批量编写垂直连接线，保证卡片和主线一一对应；</li>
<li>用两类 <code>circle</code> 区分普通节点与蓝色终点圆点，强化视觉收尾。</li>
</ul>
<h3 id="2-上下双层事件卡片定位排版">2. 上下双层事件卡片定位排版</h3>
<h4 id="难点-1">难点</h4>
<p>设计分为 <code>top</code> 上层、<code>bottom</code> 下层两条事件流，同年份可同时存在上下两条记录；所有卡片使用绝对定位，坐标偏移细微就会出现文字重叠、年份文字和主线脱节；竖排年份文字需要紧贴节点左侧，排版容错率极低。</p>
<h4 id="解决方案-1">解决方案</h4>
<ul>
<li>区分 <code>.entry.top</code> / <code>.entry.bottom</code> 两套定位规则，分别控制上下卡片距离主线的间距；</li>
<li>单独为竖排年份 <code>.year</code> 设置 <code>writing-mode: vertical-rl</code>，独立层级不遮挡正文；</li>
<li>多轮视觉校正微调 left、bottom/top 坐标，新增多组修正样式，避免卡片互相遮挡；</li>
<li>为不同长度文案的卡片设置差异化固定宽度，防止文字溢出错乱。</li>
</ul>
<h3 id="3-主题色彩统一管理与样式复用">3. 主题色彩统一管理与样式复用</h3>
<h4 id="难点-2">难点</h4>
<p>页面多处复用深蓝主色、浅蓝标注色、灰色辅助线，分散写颜色值后期修改成本极高；页面包含标题、年份、正文、标记文字多种字号，样式零散难以维护。</p>
<h4 id="解决方案-2">解决方案</h4>
<ul>
<li>使用 CSS <code>:root</code> 定义全局颜色变量 <code>--blue</code>/<code>--sky</code>/<code>--ink</code>/<code>--line</code>，全局一处修改即可更换整套配色；</li>
<li>统一封装 <code>.mark</code> 标记类，用于突出飞天FT3等核心项目标识；</li>
<li>层级分层控制 z-index：SVG底层曲线 → 年份文字层 → 事件卡片正文，解决元素遮挡问题。</li>
</ul>
<h3 id="4-宽幅画布适配与滚动兼容">4. 宽幅画布适配与滚动兼容</h3>
<h4 id="难点-3">难点</h4>
<p>完整时间轴画布宽度超过常规屏幕尺寸，直接展示会裁切右侧年份事件；窄屏设备无法完整浏览全部时间线。</p>