🏰 霍格沃茨魔法学院 - AI 魔法导师陪练系统

一个沉浸式的哈利波特魔法世界 AI 陪练应用，让你仿佛真的在霍格沃茨上学！

✨ 核心功能

🎭 六大经典角色

• 米勒娃·麦格 - 严谨的变形术教授，格兰芬多院长
• 西弗勒斯·斯内普 - 冷峻的魔药学教授，斯莱特林院长
• 阿不思·邓布利多 - 智慧仁慈的校长，最伟大的巫师
• 鲁伯·海格 - 善良的猎场看守，神奇生物专家
• 菲利乌斯·弗立维 - 温和的魔咒学教授，拉文克劳院长
• 波莫娜·斯普劳特 - 亲切的草药学教授，赫奇帕奇院长

📚 三大课程系统

1. 咒语练习 ✨

学习经典咒语：

• 荧光闪烁 (Lumos) - 照明咒
• 漂浮咒 (Wingardium Leviosa) - 悬浮物体
• 除你武器 (Expelliarmus) - 解除武装
• 火焰熊熊 (Incendio) - 喷火咒
• 修复如初 (Reparo) - 修复咒
• 摄神取念 (Legilimens) - 读心术

AI 会设定场景，你需选择正确的咒语，并判断你的回答是否正确。

2. 魔药配方 🧪

调配神奇魔药：

• 福灵剂 - 带来好运
• 复方汤剂 - 变成他人模样
• 清醒剂 - 保持清醒
• 生骨灵 - 再生骨头
• 爱情魔药 - 爱情魔药
• 消肿剂 - 消除肿胀

学习材料配比和制作步骤，体验魔药课的乐趣。

3. 魔法常识问答 📚

巫师考试系统：

• 霍格沃茨历史
• 咒语知识
• 魔杖学
• 神奇生物
• 黑魔法防御
• 魔法世界常识

选择题形式，AI 会详细解释每个答案。

🎤 语音功能

• 语音朗读 - AI 回复自动朗读，支持中文语音合成
• 语音输入 - 按住说话，语音识别转文字
• 语音控制 - 可随时开关语音功能

🚀 技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite 5
• 样式方案: Tailwind CSS
• 图标库: Lucide React
• 语音技术: Web Speech API (语音合成 + 语音识别)
• AI 引擎: 基于规则的智能对话系统

🎮 使用指南

开始游戏

1. 访问 http://localhost:5173/
2. 选择一位魔法导师
3. 选择课程类型（不同导师支持的课程不同）
4. 点击"开始魔法课程"

游戏技巧

• 麦格教授和弗立维教授适合学习咒语
• 斯内普教授和斯普劳特教授擅长魔药
• 所有教授都可以进行魔法问答
• 开启语音功能获得更佳体验
• 可以用语音输入快速回答

📁 项目结构

hogwarts-ai/
├── src/
│   ├── components/        # React 组件
│   ├── data/             # 游戏数据 (角色、咒语、魔药、问题)
│   ├── types/            # TypeScript 类型定义
│   ├── utils/            # 工具函数
│   │   ├── aiEngine.ts   # AI 对话引擎
│   │   └── speech.ts     # 语音处理
│   ├── App.tsx           # 主应用组件
│   ├── main.tsx          # 入口文件
│   └── index.css         # 全局样式
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── vite.config.ts

🔥 爆款亮点

低成本实现

• ✅ 纯文字/语音 AI，无需动画和 3D 建模
• ✅ 提示词驱动所有剧情逻辑
• ✅ 单页面应用，易于部署和维护

高粘性设计

• ✅ 沉浸式霍格沃茨体验
• ✅ 多个经典角色互动
• ✅ 渐进式学习系统
• ✅ 语音功能提升高级感

易传播特性

• ✅ "AI 斯内普骂我"片段适合抖音/快手传播
• ✅ 魔法考试分数可分享
• ✅ 角色对话截图精美

🎯 扩展建议

短期优化

1. 添加积分和等级系统
2. 增加更多咒语和魔药
3. 添加成就系统
4. 优化 AI 对话逻辑

长期规划

1. 接入大语言模型 (GPT/Claude)
2. 添加学院积分系统
3. 多人对战模式
4. 魔法生物互动
5. 魁地奇小游戏

📝 开发命令

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 代码检查
npm run lint

🎨 设计特色

• 哈利波特配色: 使用各学院经典颜色
• 魔法动画: 闪烁、漂浮效果
• 响应式设计: 支持手机和桌面端
• 无障碍设计: 语音辅助功能

📱 部署建议

推荐平台

• Vercel (最简单)
• Netlify
• GitHub Pages
• Cloudflare Pages

部署步骤 (Vercel)

npm install -g vercel
vercel

🌟 用户体验亮点

1. 开场仪式感: 选择导师和课程的仪式化流程
2. 角色差异化: 每个教授有独特的说话风格
3. 即时反馈: AI 实时判断答案正确性
4. 语音沉浸: 语音朗读增强代入感
5. 视觉反馈: 精美的动画和配色

📊 技术亮点

• 零后端: 纯前端实现，部署成本极低
• 本地语音: 使用浏览器原生 Web Speech API
• 智能对话: 基于上下文的对话管理
• 类型安全: 完整的 TypeScript 类型系统
• 模块化: 清晰的数据和逻辑分离

🎓 教育价值

• 提高英语咒语发音
• 锻炼逻辑思维能力
• 学习哈利波特世界观
• 培养英语学习兴趣

📄 License

MIT License

---

开发者: AI 助手
灵感来源: 哈利波特系列
技术栈: React + TypeScript + Vite + Tailwind CSS

---

眠龙勿扰 (Draco Dormiens Nunquam Titillandus) 🐉