打造AI驱动的幽灵互动故事应用

🎃 从零到一：打造AI驱动的幽灵互动故事应用

项目地址：github.com/Aijavai/Gho…

📖 前言

在万圣节即将到来之际，我开发了一款名为“幽灵聊天室：老宅寻宝记”的互动故事应用。这款应用结合了 React Native、Expo 和 AI 大模型，让用户可以与幽灵角色进行真实对话，通过解谜推进剧情。本文将分享从构思到实现的过程。

🎯 项目初衷

我的目标是做一个能让人沉浸其中的互动故事。核心思路是：

1. 用 AI 驱动对话，让故事更自然连贯

1. 提供多个故事线，增强可玩性

1. 用音效和动画提升沉浸感

1. 跨平台，便于更多人体验

🏗️ 技术选型

核心框架

• React Native 0.81.4：跨平台移动应用框架

• Expo 54.0.7：简化开发和部署流程

• TypeScript：提升代码质量和可维护性

• Expo Router：基于文件系统的路由

AI 集成

支持多种 AI 提供商：

• 通义千问（Qwen）：中文理解好，适合中文故事

• OpenAI GPT：响应质量高，创意性强

• 模拟模式：无需 API 密钥即可测试

核心依赖

{

  "react-native-reanimated": "高性能动画库",

  "expo-av": "音频播放",

  "expo-linear-gradient": "渐变效果",

  "@expo/vector-icons": "图标库"

}

🎮 核心功能实现

1. AI 对话系统

核心是 System Prompt 设计。我们需要让 AI 扮演沉浸式故事引擎，而非通用聊天机器人。

const SYSTEM_PROMPT = `

你是一个沉浸式互动故事引擎，专门讲述与"幽灵"相关的推理故事。

必须遵守以下规则：

1. 仅响应用户明确选择的故事编号（1~4）

2. 每个故事必须基于设定展开，不得偏离核心情节

3. 每次回复以第一人称叙述，包含环境描写和新线索

4. 控制在150字以内，语言简洁、神秘、有文学感

5. 禁止跳出故事框架或提及"AI""程序"等元信息

`;

实现难点：

• 如何让 AI 保持角色一致性

• 如何控制输出长度和质量

• 如何在不同故事间切换而不混乱

解决方案：

• 使用严格的 System Prompt

• 在对话历史中维护故事上下文

• 根据故事 ID 动态调整提示词

2. 四个故事线

每个故事都有独特的设定和叙事风格：

故事	核心设定	挑战
被诅咒的魔法日记	法师因滥用魔法被封印	引导用户寻找赎罪方法
幽灵守墓人的宝藏	宝藏隐藏在试炼之后	设计共情与智慧的考验
幽灵的死亡真相	失忆幽灵拼凑记忆	通过对话揭示真相
消失的继承人	揭露继承权谋杀案	探讨正义与宽恕

3. 音效系统

使用 Web Audio API 实现音效，无需额外音频文件：

// 音效类型

const soundTypes = {

  'message_send': 800,      // 发送消息

  'message_receive': 600,   // 收到回复

  'button_click': 1000,     // 按钮点击

  'story_complete': 1200,   // 故事完成

  'ghost_whisper': 400,     // 幽灵低语

  'unlock': 2000            // 解锁果实

};

优势：

• 体积小，加载快

• 跨平台兼容

• 支持自定义音频文件扩展

4. 智能提示系统

根据故事进度和对话轮数动态调整提示：

const getCurrentHint = () => {

  const messageCount = chatMessages.filter(m => m.type === 'user').length;

  

  if (messageCount < 3) {

    return '💡 尝试询问日记的位置或魔法的秘密';

  } else if (messageCount < 6) {

    return '💡 询问如何解开封印或赎罪的方法';

  } else {

    return '💡 探索日记中记载的禁忌魔法';

  }

};

这样用户不会卡住，同时保持悬念。

🎨 UI/UX 设计

设计理念

• 暗黑万圣节主题：深色背景配合暖色高光

• 神秘氛围：蜡烛光晕、浮动动画、蝙蝠装饰

• 流畅交互：React Native Reanimated 实现高性能动画

关键设计元素

1. 首页：南瓜图标、幽灵标题、渐变背景

1. 故事选择：卡片式布局，每个故事有独特图标

1. 聊天界面：对话气泡、幽灵头像、打字动画

🚀 开发过程

阶段一：基础框架搭建

• 创建 Expo 项目

• 配置 TypeScript

• 设置路由系统

• 设计基础 UI

阶段二：AI 集成

• 研究 System Prompt 设计

• 实现 AI 服务层

• 集成通义千问和 OpenAI API

• 添加模拟模式用于测试

阶段三：功能完善

• 实现音效系统

• 添加智能提示

• 优化动画效果

• 完善错误处理

阶段四：优化与文档

• 性能优化

• 编写文档

• 准备开源

📊 项目亮点

技术亮点

1. AI 对话系统：System Prompt 设计，支持多模型切换

1. 音效系统：Web Audio API，可扩展自定义音频

1. 动画系统：Reanimated 实现流畅动画

1. 跨平台：一套代码支持 iOS、Android、Web

用户体验亮点

1. 沉浸感：音效、动画、暗黑主题

1. 智能引导：动态提示，减少卡顿

1. 多故事线：4 个独立故事，增加可玩性

1. 个性化：每个故事有独特的提示和完成庆祝

🎓 技术难点与解决

难点一：AI 响应一致性

问题：AI 有时会偏离故事设定或提及“AI”等元信息。解决：

• 优化 System Prompt，明确禁止事项

• 在对话历史中维护故事上下文

• 添加响应验证和过滤机制

难点二：音效跨平台兼容

问题：不同平台对音频 API 支持不同。解决：

• 使用 Expo AV 统一接口

• 提供 Web Audio API 降级方案

• 添加错误处理和静默模式

难点三：动画性能

问题：多个动画同时运行可能影响性能。解决：

• 使用 React Native Reanimated 的 worklet

• 优化动画数量和复杂度

• 使用 useNativeDriver 提升性能

页面展示

首页

故事选择页

AI聊天页

设置页

🔮 未来规划

短期目标

• 添加对话历史保存功能

• 实现多结局分支系统

• 添加成就系统

• 优化 AI 响应质量

长期愿景

• 用户自定义故事编辑器

• 社区分享故事功能

• 语音输入/输出（TTS/STT）

• 更多故事内容扩展

• 国际化支持

💡 开源倡议

我已将项目开源，希望：

1. 技术交流：与开发者分享 AI 集成经验

1. 社区贡献：欢迎 PR 和 Issue

1. 学习参考：为初学者提供完整的项目示例

1. 持续改进：收集反馈，不断完善

项目地址：github.com/Aijavai/Gho…

📚 学习资源

如果你对这个项目感兴趣，可以：

1. 克隆仓库并本地运行

1. 阅读代码注释和文档

1. 查看 services/README.md 了解 AI 配置

1. 查看 SOUND_EFFECTS_GUIDE.md 了解音效系统

🎉 总结

这个项目是一次将 AI、移动开发、UX 设计结合的尝试。通过 System Prompt 设计、音效系统和智能提示，我们打造了一个沉浸式的互动故事体验。从零到一的过程充满挑战，也带来很多收获。希望这个项目能启发更多开发者探索 AI 在移动应用中的可能性。项目已开源，欢迎 Star、Fork 和贡献！让我们一起打造更好的互动故事体验。

---

项目地址： github.com/Aijavai/Gho…

• ⭐ 给个 Star 支持

• 🍴 Fork 到你的仓库

• 💬 提交 Issue 反馈问题

• 🔧 提交 PR 贡献代码

让我们一起让这个项目变得更好！🎃✨