简体中文 | English
Fortune Summoners Manual - HTML4 to HTML5 Migration
Important
本部分仅为个人观点与经验分享，不纳入项目核心内容范畴。相关操作风险由使用者自行承担，若涉及法律相关要求，将第一时间予以删除。
《命运召唤 尔茄的精灵石》（Fortune Summoners | フォーチュンサモナーズ -アルチェの精霊石- ）是由独立工作室 Lizsoft 开发的单人实时动作角色扮演游戏。早在2005年4月便正式启动开发，2007年7月7日推出了名为「序章篇」的免费体验版并对外公开，2008年9月8日在YouTube平台发布预告视频，最终于2008年9月10日正式推出正式产品。这是制作方的第3部作品，却是以「Lizsoft」名义发布的首部作品。
在正式发售之后，这款游戏也迎来了多次版本迭代：2009年6月18日，由Jungle株式会社发行了追加全新内容与专属特典的盒装豪华版《フォーチュンサモナーズ 〜アルチェの精霊石〜 Deluxe》；2012年1月31日，曾负责《ルセッティア 〜アイテム屋さんのはじめ方〜》（露塞提娅：道具屋经营妙方）英文本地化的美国公司Carpe Fulgur，将本作进行完整英文本地化并使其登陆Steam等平台；此外，根据Lizsoft官方网站及Steam商店公开资料显示，其日语原版的 ver1.6 也已于2020年8月21日历经一次多年后的追加更新，正式上线Steam平台。
本项目旨在对该游戏Steam英文版（2012年1月31日 ver.1.2）根目录下的原始HTML4手册，进行现代化技术改造与历史资料留档——通过现代前端技术重构，使其能够完美适配现代浏览器环境，同时完整保留原版所有内容与结构，为前端技术学习提供真实迁移案例，也为这款小众经典游戏留存珍贵的官方资料。
这款诞生于千禧年后期的游戏，有着深厚的世界观底蕴，它延续了制作方2001年推出的《みならい魔法使いフワルの冒険》（魔法使学徒芙瓦儿的冒险）中的「スコティッシュホルム」（苏格兰姆）奇幻世界观，以2D横版卷轴动作为核心玩法，描绘了剑士、恢复系魔法师、攻击系魔法师三位少女结伴同行、展开冒险的故事。
游戏的核心特色在于Lizsoft自主研发的「FOR-D System」专属智能AI系统——玩家仅需操控三位少女中的一人，其余两人将由该AI自主驱动行动，使得单人游玩也能实现如同在线游戏般的小队分工与协同作战，官方更将其首创性地定义为「实时RPG」（リアルタイムRPG），而非传统意义上的动作RPG。
游戏内容由曾作为体验版公开的序章《寻找精灵石》，以及本编《精灵石的秘密》两部分构成，正式产品版还支持继承体验版的存档数据，让玩家得以延续此前的冒险历程。值得一提的是，这款游戏看似有着柔和的马卡龙色调、充满童趣的像素画风，还有标注详尽的假名注解，给人以轻松温和的印象，实则游戏难度并不低。但凭借着精妙的「FOR-D System」AI、实用的辅助功能，还有设计巧思满满的地牢机关，它依然能够适配不同水平的玩家群体，在当年也获得了各大游戏评测网站的一致好评。以如今的眼光来看，即便游戏流程偏短，却依旧是一款世界观完整、游戏机制健全且极具特色的作品，在某种意义上更是该类型同人游戏的开山鼻祖之一。
本项目是一款兼具技术参考价值与历史留档属性的前端现代化改造项目。原始手册是一份诞生于十几年前、基于HTML4标准编写的游戏官方文档，采用了现已过时的<frameset>框架布局与Shift_JIS日文编码，在现代浏览器环境下存在兼容隐患、不支持多语言展示、资源组织混乱等诸多问题。
本项目将这份老旧手册迁移至现代HTML5标准进行重构，既实现功能增强与使用体验优化，又完整保留原始HTML4版本的目录结构与全部文件内容，最终形成「旧版留档+新版可用」的双版本形态。
- 为小众游戏续火：让这款经典独立游戏的官方手册在现代浏览器中无兼容隐患地稳定运行，支持在线访问、本地直接打开、服务器挂载运行等多种使用场景
- 提供技术学习参考：作为HTML4向HTML5迁移的完整可落地案例，供前端学习者与技术爱好者参考借鉴，覆盖编码转换、布局重构、资源优化、SPA架构改造等核心知识点
- 实现多语言适配：在完整保留官方英文原版内容的基础上，辅佐日语官方资料，新增简体中文翻译版本，方便中文玩家查阅，同时搭建具备良好扩展性的多语言架构
- 完成历史资料留档：完整保留原始HTML4版本的全部文件与目录结构，为同类小众游戏的官方资料留存提供可参考的技术示范
| 特性 | HTML4 原始版本 | HTML5 现代化版本 |
|---|---|---|
| 文档类型 | <!doctype html public "-//W3C//DTD HTML 4.0//EN"> |
<!DOCTYPE html> |
| 字符编码 | Shift_JIS（日文编码，仅支持英文显示，存在乱码风险） |
UTF-8（通用多语言编码，支持中英双语，无乱码隐患） |
| 布局方式 | <frameset> + <frame> 框架布局（无语义、不灵活、现代浏览器支持弱化） |
HTML5 语义化标签（<aside>/<main> 等）+ CSS Flex 布局（语义化、灵活高效、适配性强） |
| 交互方式 | 纯静态页面，无任何动态交互，依赖浏览器原生框架跳转 | 单页应用（SPA）架构，基于原生JavaScript实现内容动态加载，无刷新切换，保留哈希路由 |
| 语言支持 | 仅英文，无扩展能力 | 英文 + 简体中文（可扩展日文、繁体中文等），支持本地存储记忆语言偏好 |
| 文件扩展名 | .htm（早期 HTML 文件命名规范） |
.html（现代 HTML 文件标准命名） |
| 资源组织 | 扁平化混放，无目录隔离 | 模块化目录结构，按功能与语言进行分类隔离 |
_html4/
└ *.htm # 19个HTML内容文件，均扁平化存放于根目录
└ contents.css # CSS样式文件与HTML文件混放
└ fs.css
└ img/ # 图片资源无分类混放，无子目录层级
└ main.htm # 入口文件（基于<frameset>框架实现布局）
核心问题：
- 资源文件与业务文件扁平化混放，可读性低下，后期维护难度大
- 图片资源无任何分类，大量文件堆砌于单一目录，查找与复用困难
- 缺乏模块化组织架构，无扩展能力，无法支撑多语言、动态交互等进阶功能
- 无任何JavaScript相关文件，缺乏交互功能扩展的技术基础
FortuneSummoners-Manual/
└ index.html # 单页应用入口（基于HTML5标准，支持动态导航与多语言切换）
└ favicon.ico # 网站图标，提升现代网页视觉辨识度
└ _html4/ # 原始HTML4版本完整保留（只读留档，禁止修改）
├── docs/ # HTML内容文件按语言分类隔离存放
│ ├── en-US/ # 英文版本（与原始手册内容完全一致）
│ └── zh-CN/ # 简体中文版本（完整翻译并优化格式）
├── styles/ # CSS样式文件统一归集管理
│ ├── adapt-html5.css # HTML5适配样式（新增，用于布局重构与响应式适配）
│ ├── contents.css # 内容样式（迁移自原始文件，无功能性修改）
│ └── fs.css # 主样式（迁移自原始文件，无功能性修改）
├── scripts/ # JavaScript文件目录（新增，支撑各类动态交互功能）
│ └── navigation.js # 核心逻辑文件（负责导航路由、语言切换、内容动态加载）
└── images/ # 图片资源按功能分类归档
├── advice/ # 建议相关
├── battle/ # 战斗相关
├── battle_ex/ # 战斗扩展-快捷键动画
├── battle_magic/ # 魔法战斗
├── battle_sword/ # 剑技战斗
├── buttons/ # 按钮图标
├── character/ # 角色相关
├── common/ # 通用图片-标题、logo等
├── concept/ # 概念介绍
├── game/ # 游戏系统相关
├── level/ # 等级相关
├── operation/ # 操作相关
├── other/ # 其他
├── product/ # 产品相关
├── skills_magic/ # 魔法技能
└── start/ # 开始界面
核心改进：
- ✅ HTML 文件优化：从扁平根目录重构为按语言分类的
docs/en-US/与docs/zh-CN/目录，既支撑多语言版本扩展，又实现内容与结构的解耦，提升可维护性 - ✅ CSS 文件归集：从根目录混放重构为统一
styles/目录，新增适配样式与原始样式分离存放，保留完整的版本追溯性，便于后续样式迭代 - ✅ JavaScript 文件新增：新增
scripts/目录实现模块化交互逻辑，无第三方框架依赖，保持纯原生前端的轻量性与兼容性 - ✅ 图片资源分类：从单一
img/目录重构为按功能分类的子目录，大幅提升资源查找效率与后期复用、维护的便捷性 - ✅ 入口文件重构：从
main.htm（<frameset>布局）重构为index.html（SPA 架构），完美适配现代浏览器，支撑各类动态交互功能 - ✅ 版本隔离留档：原始版本独立存放于
_html4/目录，与新版完全隔离，确保历史资料不被篡改，支持双版本对比参考与溯源
本项目支持在线访问、本地快速使用、本地克隆开发、服务器挂载运行四种场景:
直接通过 GitHub Pages 访问已部署的现代化版本，无需下载任何文件，打开浏览器即可使用：
- HTML5访问地址：
https://jaymushui.github.io/FortuneSummoners-Manual - 使用说明：
- 打开上述地址后，默认进入简体中文版本（可通过右上角语言切换按钮切换为英文原版）
- 左侧侧边栏为手册目录，点击对应条目即可无刷新查看正文内容
- 支持浏览器书签收藏特定章节（基于哈希路由），再次打开可直接跳转至对应内容
HTML4访问地址：https://jaymushui.github.io/FortuneSummoners-Manual/_html4/main.htm使用说明：仅用于留档，无法保证其兼容性
如果无法访问在线地址，可通过下载项目压缩包实现本地快速使用，支持同时查看现代化版本与原始 HTML4 版本：
- 下载项目压缩包
- 访问项目 GitHub 仓库：
https://github.com/JayMuShui/FortuneSummoners-Manual - 点击仓库首页的「Code」按钮，选择「Download ZIP」，下载完整项目压缩包
- 解压下载的 ZIP 文件到本地任意目录（建议解压路径无中文、无特殊字符）
- 访问项目 GitHub 仓库：
- 查看现代化 HTML5 版本
- 进入解压后的项目根目录，双击打开
index.html文件，即可在默认浏览器中启动现代化版本 - 功能与在线版本一致，支持语言切换、无刷新导航等所有功能
- 注意：部分浏览器（如 Chrome）对本地文件的
fetch接口有轻微限制，若出现内容加载失败，可切换至 Firefox 浏览器，或采用「场景四：服务器挂载运行」
- 进入解压后的项目根目录，双击打开
- 查看原始 HTML4 版本
- 进入解压后的项目根目录下的
_html4/子目录 - 双击打开
main.htm文件，即可在浏览器中查看原始版本 - 说明：现代浏览器对
<frameset>标签的支持已弱化，可能出现布局错乱、滚动异常等兼容问题，仅用于参考对比与历史资料查看
- 进入解压后的项目根目录下的
如果需要基于本项目进行二次开发、扩展多语言、优化功能，可通过 Git 克隆仓库到本地，便于版本管理与代码提交：
- 准备环境：确保本地已安装 Git 环境（可通过
git --version验证是否安装成功） - 克隆仓库
- 打开终端（Windows 为 CMD/PowerShell，Mac/Linux 为 Terminal）
- 执行克隆命令：
git clone https://github.com/JayMuShui/FortuneSummoners-Manual.git
- 等待克隆完成后，进入项目目录：
cd FortuneSummoners-Manual
- 开发与修改
- 可直接修改
index.html、styles/adapt-html5.css、scripts/navigation.js等文件进行功能扩展 - 新增语言版本可在
docs/目录下新建对应语言目录（如ja-JP用于日文），复制现有 HTML 文件进行翻译修改并在index.html中添加语言切换功能，并在scripts/navigation.js中添加语言切换逻辑 - 开发过程中可通过服务器挂载运行、本地直接打开index.html等实时预览修改效果
- 可直接修改
- ✅ 现代浏览器：Chrome、Firefox、Edge、Safari，完全支持所有功能，无兼容问题
⚠️ 旧版浏览器：IE 11 及以下版本不支持（使用了 ES6+ 语法、CSS Flex 布局、fetch接口等现代前端特性，无兼容适配必要）⚠️ 原始 HTML4 版本：现代浏览器对<frameset>标签支持弱化，可能出现布局错乱、滚动异常等问题，仅用于参考对比，不推荐作为主要使用版本
本项目是一个完整、可落地、无第三方框架依赖的 HTML4 到 HTML5 迁移案例，覆盖前端老旧项目现代化改造的核心知识点，对前端学习者、技术开发者具有一定参考意义：
- 布局重构：从
<frameset>框架布局到 HTML5 语义化标签 + CSS Flex 布局的迁移实现，理解现代布局的灵活性与语义化的重要性 - 编码转换：从
Shift_JIS到UTF-8的编码迁移，掌握老旧文件乱码的解决方法与多语言编码的适配规范 - 架构改造：从静态多页面架构到纯原生 SPA 架构的改造，理解哈希路由、动态内容加载、状态持久化的实现逻辑
- 资源优化：从扁平化资源混放到模块化目录结构的重构，学习前端项目的资源组织规范与可维护性提升方法
- 纯静态项目实践：项目全程使用纯 HTML、CSS、JavaScript 实现，无任何构建工具、第三方框架依赖，适合前端初学者夯实基础，理解原生前端的核心能力
直至完成这篇文档，我才算对这款游戏有了较为全面的认知——在此之前，我对它一无所知。开展这个项目的初衷，其实是为了满足我一份小小的心愿。我家那位小朋友生性念旧，一直想找回年少时沉迷宅圈期间游玩过的小众游戏，重温当年的快乐。上大学前，她偶然在Steam商店里翻到了《命运召唤 尔茄的精灵石》这款童年玩过的独立游戏，费尽心力完成游戏汉化后，却因Steam的游戏完整性检查，导致汉化补丁被自动清空。无奈之下，她将这件事托付给了我。
在帮她处理游戏汉化相关事宜时，我偶然发现了Steam根目录下这份尘封已久的HTML4英文手册。看着里面早已过时的<frameset>布局、杂乱混放的图片资源，我不禁思索：如果她重新打开游戏，依旧无法真切领略到完整的游戏系统魅力，甚至没能通关儿时未曾走完的剧情，那这份童年回忆，或许难以真正延续下去。于是我萌生了做这个项目的念头，这对我而言无疑是一举两得的机会：既能让她在如今也能拥有一份高质量的游戏攻略与百科，读懂这款游戏的全貌；又能为正在入门前端基础的她，打造一份专属的前端学习案例，而这份手册的现代化迁移改造，恰好能成为贴合她学习节奏的量身定制资料。
于她而言，这份项目有着三重价值：
- 她可以通过这份简体中文手册，系统化地理解游戏的各类系统与核心机制，不再像小时候那样懵懂摸索过关，而是带着完整的认知，体会这款游戏背后的设计巧思，这份有深度的回味，远比单纯重玩游戏更有意义；
- 她可以通过对比
_html4/目录的原始版本与根目录的现代化版本，直观地理解HTML4与HTML5的差异，看清老旧项目一步步实现现代化重构的过程，这比网上的纯理论教程更具代入感，也更容易理解； - 她可以跟着项目的代码结构，一步步拆解动态交互的实现逻辑，夯实原生前端的基础功底，为后续学习各类前端框架打下坚实基础，而这份专属定制的资料，远比通用教程更能贴合她的学习节奏。
于我而言，这个项目是「技术落地于生活」的一次温馨小实践。同时，从技术层面来看，这也是一次难得的「复古技术回顾」——重新拾起<frameset>这类早已被淘汰的标签，去理解它们当年的设计初衷与先天局限性，再用现代前端技术对其进行重构与优化，这个过程让我更深刻地体会到前端技术的演进逻辑，也更清晰地认知到什么是优质的前端项目结构。
整个项目前后耗时约5-6小时，全程高效推进，无任何冗余开发工作：
- HTML4 到 HTML5 迁移（2-3 小时）：包括分析原始项目结构、重构目录架构、实现页面布局重构、编写核心动态交互逻辑，全程保持技术严谨性，确保功能落地与跨浏览器兼容性；
- 简体中文翻译与优化（2-3 小时）：包括逐句翻译手册正文内容、优化游戏专业术语表达、调整双语内容的格式适配、联调语言切换功能；
- 测试与优化（1 小时）：包括多浏览器兼容性测试、多场景使用流程测试、完善代码注释、编写详细使用方法文档，确保无论是普通玩家还是技术开发者，都能便捷地使用这份手册。
Code Review 已通过 Self Review 和 AI Review，所有功能均能正常落地，双语切换流畅稳定，多场景下使用无异常。
重要提示：本项目中的所有游戏相关内容（包括但不限于游戏名称、角色形象、图片资源、文本内容、游戏系统说明等）的版权均归游戏开发商 Lizsoft 和游戏发行商 Carpe Fulgur 所有，所有权利保留。
本项目仅为个人学习与小众游戏资料留档性质，不涉及任何形式的商业盈利与二次分发，仅用于以下场景：
- ✅ 技术学习与参考：作为 HTML4 到 HTML5 迁移的案例，供前端学习者与技术爱好者参考学习；
- ✅ 个人非商业使用：供游戏玩家个人查阅游戏手册，深化对游戏的理解，不用于任何商业活动；
- ✅ 小众游戏资料留档：完整保留原始手册内容，为小众游戏的资料留存提供技术支持。
本项目是对 Steam 英文版游戏根目录下原始 HTML 手册的现代化技术迁移与简体中文翻译，原始文件均来自游戏官方，本项目仅进行技术层面的重构、优化与非商业性翻译，不享有任何游戏相关内容的版权。
本项目目前已完成核心的现代化迁移与双语支持，达到「留档+可用」的项目目标，由于其「历史留档与个人学习性质」，暂无正式长期维护计划，但保留可扩展的技术基础，未来可根据需求进行以下优化：
- 🌍 多语言扩展与中文翻译维护：新增日文、繁体中文等语言版本，同时持续维护并优化现有简体中文翻译，修正翻译瑕疵、优化术语表达、提升语句流畅度，确保中文内容的准确性与可读性；
- 🎨 UI/UX 优化：进一步优化移动端的视觉表现与交互体验，添加夜间模式等实用功能，提升手册的查阅舒适度；
- 📚 游戏文档补充：可以根据实际游戏内容和情况补充教程与文档内容
本项目的所有代码与资源均开源在 GitHub 仓库，欢迎有兴趣的开发者在遵守版权声明的前提下，进行二次开发与优化，共同为小众游戏资料留存与前端技术学习贡献力量。
- Steam English version（1.2）官方文档HTML5重置版（English/简体中文）
- Steam English version（1.2）
- Steam 日本語 version（1.6）
- 游戏官网（日本語）
- Wikipedia（日本語）
- Wikipedia（中文）
- 百度百科（简体中文）
2025/12/30 14:00:00(UTC)