永夜花园：赎魂之诗

文件结构

├── main.js                  # 主控制器 - 游戏系统入口
├── styles.css               # 全局样式文件
├── test-navigation.html     # 测试导航页面
├── 连接剧情检定.md          # 剧情连接说明文档
├── chapters/                # 章节数据文件夹
│   ├── chapter0/
│   │   └── introduce.js     # 新手引导章节
│   ├── chapter1/
│   │   ├── main.js          # 主线剧情
│   │   ├── first_meet_alexander.js
│   │   ├── first_attack.js
│   │   ├── after_trained_by_alexander.js
│   │   ├── boss_pre.js
│   │   ├── boss_after.js
│   │   └── 连接顺序.md
│   ├── chapter2/
│   │   ├── alexander/       # 亚历山大分支
│   │   │   ├── before_meet_alexander-1.js
│   │   │   ├── before_meet_alexander-2.js
│   │   │   ├── before_meet_alexander-3.js
│   │   │   ├── after_meet_alexander.js
│   │   │   └── 连接顺序.md
│   │   ├── boss/            # Boss分支
│   │   │   ├── before_boss_npc.js
│   │   │   ├── enter_boss.js
│   │   │   ├── help_npc.js
│   │   │   ├── npc_after_interact.js
│   │   │   ├── npc_after.js
│   │   │   ├── after_boss.js
│   │   │   └── 连接顺序.md
│   │   └── selian/          # 塞利安分支
│   │       ├── before_meet_selian.js
│   │       ├── selian_after_interact.js
│   │       ├── selian_after(not_read_memory).js
│   │       ├── selian_after(read_memory).js
│   │       ├── gained_medicine.js
│   │       ├── back_to_selian.js
│   │       └── 连接顺序.md
│   ├── chapter3/
│   │   ├── introduce_3.js   # 第三章介绍
│   │   ├── alexander/       # 亚历山大分支
│   │   │   ├── meet_alexander.js
│   │   │   ├── before_game.js
│   │   │   ├── after_game.js
│   │   │   ├── not_required.js
│   │   │   ├── three_alexander.js
│   │   │   └── 连接顺序.md
│   │   ├── boss/            # Boss分支
│   │   │   ├── pre_boss.js
│   │   │   ├── end_1.js
│   │   │   └── 连接顺序.md
│   │   ├── end_branch/      # 结局分支
│   │   │   ├── branch_2.js
│   │   │   ├── branch_3.js
│   │   │   ├── branch_4.js
│   │   │   └── branch_5.js
│   │   ├── ending/          # 结局剧情
│   │   │   ├── ending_2.js
│   │   │   ├── ending_3.js
│   │   │   ├── ending_4_pre.js
│   │   │   ├── ending_4_post.js
│   │   │   ├── ending_5_pre.js
│   │   │   └── ending_5_post.js
│   │   ├── mad_woman/       # 疯女人分支
│   │   │   ├── meet_mad_woman.js
│   │   │   ├── read_record.js
│   │   │   ├── !read_record.js
│   │   │   ├── find_medicine.js
│   │   │   └── 连接顺序.md
│   │   └── 连接顺序.md
│   ├── endings_data.js      # 五个结局的完整数据
│   └── first_death.js       # 首次死亡剧情
├── pages/                   # 章节HTML页面文件
│   ├── chapter0/
│   │   └── chapter0-data.html
│   ├── chapter1/
│   │   ├── chapter1-main.html
│   │   ├── chapter1-first-meet-alexander.html
│   │   ├── chapter1-first-attack.html
│   │   └── chapter1-after-trained-by-alexander.html
│   ├── chapter2/
│   │   ├── chapter2-alexander-*.html (4个文件)
│   │   ├── chapter2-boss-*.html (7个文件)
│   │   └── chapter2-selian-*.html (7个文件)
│   ├── chapter3/
│   │   ├── chapter3-introduce.html
│   │   ├── chapter3-alexander-*.html (5个文件)
│   │   ├── chapter3-boss-*.html (2个文件)
│   │   ├── chapter3-end-branch-*.html (4个文件)
│   │   ├── chapter3-ending-*.html (6个文件)
│   │   └── chapter3-mad-woman-*.html (4个文件)
│   ├── endings/
│   │   ├── ending1.html     # 真结局：救赎与重生
│   │   ├── ending2.html     # 绝望的轮回
│   │   ├── ending3.html     # 孤独的守护者
│   │   ├── ending4.html     # 遗忘的代价
│   │   └── ending5.html     # 永恒的循环
│   └── special/
│       └── first-death.html
├── assets/                  # 资源文件夹
│   ├── fig/                # 图片资源
│   │   ├── bg/             # 背景图片 (93个文件)
│   │   ├── ending_bg/      # 结局背景 (25个文件)
│   │   ├── first_death/    # 首次死亡背景 (7个文件)
│   │   ├── portrait/       # 角色立绘 (9个文件)
│   │   └── text_box.png    # 对话框背景
│   └── vd/                 # 视频资源 (4个文件)
├── mini-game/              # 小游戏文件夹
│   ├── 1-turnover/         # 翻牌配对小游戏
│   │   ├── index.html
│   │   ├── css/
│   │   │   ├── style.css
│   │   │   └── style.prefix.css
│   │   ├── js/
│   │   │   ├── script.babel.js
│   │   │   └── script.original.js
│   │   └── img/            # 游戏图片 (15个文件)
│   ├── 2-whac-a-hole/      # 打地鼠小游戏
│   │   ├── index.html
│   │   ├── app.js
│   │   ├── styles.css
│   │   └── mole.jpg
│   └── 3-sliding-puzzle/   # 滑拼图小游戏
│       ├── index.html
│       ├── css/
│       │   ├── style.css
│       │   └── style.scss
│       └── js/
│           └── script.js
└── js/                     # JavaScript组件
    └── ending_story_component.js  # 结局故事组件

技术实现

游戏系统架构

游戏采用模块化架构，主要包含以下核心组件：

1. 主控制器 (GameController)

文件位置: main.js
功能: 游戏系统入口，负责初始化和管理整个游戏流程
核心特性:
- 异步初始化系统
- 章节管理器集成
- 游戏引擎管理
- 全局状态控制
- 调试功能支持

2. 章节管理器 (ChapterManager)

功能: 管理所有章节数据和剧情流程
特性:
- 动态加载章节数据
- 剧情状态跟踪
- 选择支处理
- 游戏标志管理

3. 游戏引擎 (GameEngine)

功能: 处理游戏逻辑和交互
特性:
- 剧情渲染
- 背景切换
- 角色显示
- 选择支处理

数据结构

每个章节的JS文件需要包含以下数据结构：

const CHAPTER_DATA = {
    id: '章节ID',
    title: '章节标题',
    description: '章节描述',
    
    // 背景图片配置
    backgrounds: {
        'BG_KEY': {
            name: '背景名称',
            url: 'assets/fig/bg/背景图片路径.jpg',
            description: '背景描述'
        }
    },
    
    // 角色配置
    characters: {
        'character_key': {
            name: '角色名称',
            color: '#颜色代码',
            portrait: 'assets/fig/portrait/角色立绘.png'  // 可选：角色立绘路径
        }
    },
    
    // 剧情脚本
    script: [
        {
            id: 1,
            background: 'BG_KEY',
            character: 'character_key',
            text: '对话内容',
            choices: null, // 或选择支数组
            next: 2 // 下一个对话ID
        }
    ],
    
    // 选择支配置（choices数组中的选项）
    choices: [
        {
            text: '选择文本',
            next: 3, // 下一个对话ID
            flag: 'flag_name', // 可选：设置游戏标志
            action: 'mini_game' // 可选：特殊动作（如跳转小游戏）
        }
    ]
};

结局系统

游戏包含五个不同的结局，每个结局都有完整的故事内容：

const ENDINGS_DATA = {
    ending1: {
        id: 'ending1',
        title: '真结局：救赎与重生',
        subtitle: 'True Ending: Redemption and Rebirth',
        description: '在索菲亚的帮助下，你成功拯救了永夜花园',
        story: {
            title: '永夜花园：救赎与重生',
            subtitle: 'The Garden of Eternal Night: Redemption and Rebirth',
            content: '...完整的故事内容...',
            credits: '制作团队信息...'
        }
    }
    // ... 其他四个结局
};

结局故事组件

文件位置: js/ending_story_component.js
功能: 提供统一的结局故事展示组件
特性:
- 自动滚动播放
- 进度条显示
- 淡入淡出效果
- 用户交互控制

样式特点

文本框：使用 assets/text_box.png 作为对话框背景图片
人物框：右侧显示当前说话角色的头像和名称
角色立绘：支持角色立绘显示，位于人物框内
背景切换：支持背景图片的平滑切换
选择支：美观的选择按钮，支持悬停效果和全屏遮罩层
小游戏集成：支持从剧情跳转到小游戏，完成后自动返回

小游戏集成功能

小游戏列表

游戏包含三个不同类型的小游戏，每个都有独特的游戏机制：

1. 翻牌配对小游戏 (1-turnover)

位置: mini-game/1-turnover/
类型: 记忆配对游戏
目标: 在限定时间内找到所有配对
技术: HTML5 + CSS3 + JavaScript
资源: 15张游戏图片
特色:
- 响应式设计
- 平滑动画效果
- 自动完成检测

2. 打地鼠小游戏 (2-whac-a-hole)

位置: mini-game/2-whac-a-hole/
类型: 反应速度游戏
目标: 20秒内击打30次地鼠获得胜利
技术: HTML5 + CSS3 + JavaScript
特色:
- 实时分数统计
- 倒计时功能
- 随机地鼠出现

3. 滑拼图小游戏 (3-sliding-puzzle)

位置: mini-game/3-sliding-puzzle/
类型: 逻辑解谜游戏
目标: 将打乱的拼图恢复原状
技术: HTML5 + CSS3 + JavaScript + SCSS
特色:
- 3x3网格布局
- 打乱和解决功能
- 拖拽交互

实现原理

剧情跳转：在剧情选择支中添加 action: 'mini_game' 属性
小游戏检测：小游戏完成后检测游戏状态
自动返回：游戏完成后延迟跳转回指定剧情页面
场景定位：通过URL参数 ?scene=数字 指定返回的剧情场景

示例代码

// 剧情选择支配置
{
    text: '好啊，我刚好需要帮助',
    next: null,
    flag: 'train_by_alexander',
    action: 'mini_game'  // 触发小游戏跳转
}

// HTML页面处理
function makeChoice(choice) {
    if (choice.action === 'mini_game') {
        window.location.href = '../../mini-game/1-turnover/index.html';
        return;
    }
    // ... 其他处理逻辑
}

// 小游戏完成检测（翻牌游戏示例）
function checkGameComplete() {
    var matchedCards = document.querySelectorAll('.match');
    var totalCards = gameGrid.length;
    
    if (matchedCards.length === totalCards) {
        setTimeout(function() {
            window.location.href = '../../pages/chapter1/chapter1-after-trained-by-alexander.html?scene=1';
        }, 2000);
    }
}

小游戏集成流程

触发条件: 玩家在剧情中做出特定选择
跳转机制: 自动跳转到对应小游戏页面
游戏进行: 玩家完成小游戏挑战
完成检测: 系统自动检测游戏完成状态
返回剧情: 延迟后自动返回原剧情页面
状态更新: 根据游戏结果更新剧情状态

资源文件结构

图片资源 (assets/fig/)

背景图片 (bg/)

数量: 93个文件
格式: JPG, PNG
用途: 剧情背景展示
命名规则:
- 数字编号: 1.jpg, 2.jpg, 3.jpg 等
- 字母编号: a.jpg, b.jpg, c.jpg 等
- 特殊背景: black.png, forest.jpg, beijing2.jpg 等
- Boss背景: 1_boss_1.jpg, 1_boss_2.jpg 等

结局背景 (ending_bg/)

数量: 25个文件
格式: JPG, MP4
用途: 五个结局的专用背景
特色: 包含视频文件用于动态背景效果

首次死亡背景 (first_death/)

数量: 7个文件
格式: JPG, MP4
用途: 首次死亡剧情的特殊背景
特色: 包含视频文件增强沉浸感

角色立绘 (portrait/)

数量: 9个文件
格式: PNG
角色列表:
- alexander.png - 亚历山大
- boss_2.png - Boss角色
- fighter.png - 战士
- gipetto.png - 吉佩托
- mad_woman.png - 疯女人
- protagonist.png - 主角
- selian.png - 塞利安
- sofia.png - 索菲亚
- tanatuosi.png - 塔纳托斯

视频资源 (assets/vd/)

数量: 4个文件
格式: MP4
用途: 剧情过场动画和特殊效果
文件列表:
- a.mp4 - 通用动画A
- aa.mp4 - 通用动画AA
- chapter0_sofia.mp4 - 索菲亚出场动画
- qq.mp4 - 特殊动画

小游戏资源

翻牌游戏图片 (mini-game/1-turnover/img/)

数量: 15个文件
格式: JPG
用途: 翻牌配对游戏的卡片图片
命名: IMG_1845.jpg 到 IMG_1859.jpg

打地鼠游戏资源

地鼠图片: mole.jpg
用途: 地鼠角色的显示图片

自定义配置

添加新章节

在 chapters 目录下创建新的JS文件
在 pages 目录下创建对应的HTML文件
确保JS文件暴露到全局作用域（window对象）
HTML文件需要引用对应的JS文件
更新章节连接顺序文档

添加小游戏

在 mini-game 目录下创建小游戏文件夹
在小游戏的JS文件中添加完成检测和跳转逻辑
在剧情选择支中添加 action: 'mini_game' 属性
在HTML页面的 makeChoice 函数中添加小游戏跳转处理
确保小游戏完成后能正确返回剧情

添加新结局

在 chapters/endings_data.js 中添加新的结局数据
在 pages/endings/ 目录下创建对应的HTML文件
使用 ending_story_component.js 组件展示结局故事
确保结局页面能正确加载和显示

修改样式

修改 styles.css 中的全局样式
修改各个HTML文件中的内联样式
调整颜色主题和动画效果
自定义角色立绘和背景图片
优化移动端显示效果

新功能特性

视频支持

格式支持: MP4视频文件
用途: 剧情过场动画、角色出场效果
位置: assets/vd/ 和 assets/fig/ending_bg/
特色: 增强沉浸感和视觉冲击力

多结局系统

结局数量: 5个不同结局
结局类型:
- 真结局：救赎与重生
- 绝望的轮回
- 孤独的守护者
- 遗忘的代价
- 永恒的循环
特色: 每个结局都有完整的故事内容和制作人员信息

分支剧情系统

章节结构: 3个主要章节，每章包含多个分支
分支类型:
- 角色分支（亚历山大、塞利安、疯女人等）
- Boss分支
- 结局分支
特色: 根据玩家选择影响后续剧情发展

游戏标志系统

功能: 跟踪玩家的选择和成就
用途: 影响剧情分支和结局
示例: train_by_alexander, not_train_by_alexander

调试功能

快捷键: Ctrl+Shift+D
功能: 显示游戏状态、章节信息、调试信息
用途: 开发和测试阶段的问题排查

浏览器兼容性

最低要求

Chrome: 60+
Firefox: 55+
Safari: 12+
Edge: 79+

功能支持

HTML5: 视频播放、Canvas绘图
CSS3: 动画效果、响应式布局
ES6: 模块化、异步处理
Web APIs: 本地存储、媒体播放

注意事项

开发注意事项

文件路径: 确保所有背景图片和角色立绘路径正确
全局作用域: JS文件需要暴露到全局作用域（window对象）
资源管理: 图片资源需要放在正确的目录结构中
跨域问题: 建议使用本地服务器运行，避免跨域问题

小游戏集成

自动跳转: 小游戏完成后会自动跳转，确保跳转路径正确
特殊动作: 选择支的 action 属性用于特殊功能，如小游戏跳转
场景定位: URL参数 ?scene=数字 可以指定从特定剧情开始

性能优化

资源加载: 大量图片资源建议使用懒加载
视频优化: 视频文件建议压缩以提升加载速度
缓存策略: 合理使用浏览器缓存提升用户体验

移动端适配

响应式设计: 确保在不同设备上的显示效果
触摸交互: 优化移动端的触摸操作体验
性能考虑: 移动设备性能限制，注意资源优化

Name		Name	Last commit message	Last commit date
Latest commit History 33 Commits
assets		assets
chapters		chapters
js		js
mini-game		mini-game
pages		pages
README.md		README.md
main.js		main.js
styles.css		styles.css
test-navigation.html		test-navigation.html
连接剧情检定.md		连接剧情检定.md

samallwhite/game-episode

Folders and files

Latest commit

History

Repository files navigation

永夜花园：赎魂之诗

文件结构

技术实现

游戏系统架构

1. 主控制器 (GameController)

2. 章节管理器 (ChapterManager)

3. 游戏引擎 (GameEngine)

数据结构

结局系统

结局故事组件

样式特点

小游戏集成功能

小游戏列表

1. 翻牌配对小游戏 (1-turnover)

2. 打地鼠小游戏 (2-whac-a-hole)

3. 滑拼图小游戏 (3-sliding-puzzle)

实现原理

示例代码

小游戏集成流程

资源文件结构

图片资源 (assets/fig/)

背景图片 (bg/)

结局背景 (ending_bg/)

首次死亡背景 (first_death/)

角色立绘 (portrait/)

视频资源 (assets/vd/)

小游戏资源

翻牌游戏图片 (mini-game/1-turnover/img/)

打地鼠游戏资源

自定义配置

添加新章节

添加小游戏

添加新结局

修改样式

新功能特性

视频支持

多结局系统

分支剧情系统

游戏标志系统

调试功能

浏览器兼容性

推荐浏览器

最低要求

功能支持

注意事项

开发注意事项

小游戏集成

性能优化

移动端适配

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages