一个文字修仙小游戏

jeffriesvan
349 阅读9分钟

🌟 我用 React + AI 做了一个修仙游戏，每次历练都是全新体验！

一款基于 React 19 + TypeScript + AI 的沉浸式修仙文字冒险游戏，每次历练都由 AI 生成独特事件，让每一次游戏体验都充满未知与惊喜！

📖 前言

作为一名前端开发者，我一直想做一个有趣的项目来展示我的技术能力。最近，我结合了 React 19、TypeScript 和 AI 技术，开发了一款修仙文字冒险游戏。这款游戏最大的特色是AI 驱动的随机事件系统，每次历练都会遇到不同的随机事件，让每一次游戏体验都充满未知与惊喜！

今天，我想和大家分享这个项目的开发历程和技术亮点。

🎮 游戏简介

修仙文字游戏是一款以修仙为主题的沉浸式文字冒险游戏。玩家将扮演一名修仙者，通过历练、修炼、突破境界等方式不断提升实力，最终目标是飞升成仙！

✨ 核心特色

🎲 AI 驱动事件系统

  • 使用 Google GenAI 生成丰富的随机事件

  • 每次历练都是全新体验，永不重复

  • 支持多种 AI 服务提供商（GLM/智谱AI、SiliconFlow、OpenAI 等）

🏔️ 完整修仙体系

  • 7 大境界：炼气期 → 筑基期 → 金丹期 → 元婴期 → 化神期 → 炼虚期 → 飞升

  • 每个境界 10 层，共 70 层修炼之路

  • 境界突破有成功/失败机制，增加游戏挑战性

🎒 丰富装备系统

  • 武器：提升攻击力

  • 护甲：头部、肩部、胸甲、手套、裤腿、鞋子

  • 戒指：最多装备 4 个

  • 首饰：最多装备 2 个

  • 法宝：最多装备 2 个，支持本命法宝（50% 属性加成）

  • 装备强化：使用材料和灵石强化装备

🐉 灵宠养成系统

  • 通过历练、抽奖获得灵兽蛋

  • 喂食灵宠提升经验

  • 灵宠升级和进化

  • 每个灵宠都有独特的技能

🏛️ 宗门系统

  • 加入宗门，完成宗门任务

  • 获得贡献点，兑换稀有物品

  • 提升宗门等级，解锁更多权限

🎫 抽奖系统

  • 通过历练获得抽奖券

  • 每 10 次抽奖必得稀有以上奖励（保底机制）

  • 奖励包括：灵石、修为、物品、灵宠等

🏆 成就系统

  • 完成各种成就，获得称号和奖励

  • 称号提供额外属性加成

⚔️ 危险历练

  • 遭遇邪修、魔修、陷阱等危险事件

  • 可能受伤、属性降低或被抢灵石

  • 高风险高收益的随机秘境

🛠️ 技术栈

前端技术

  • React 19.2.0 - 最新版本的 React，享受并发特性

  • TypeScript 5.8.2 - 类型安全，提升开发体验

  • Vite 6.2.0 - 极速构建工具

  • TailwindCSS 4.1.17 - 原子化 CSS，快速构建 UI

  • Lucide React - 精美的图标库

AI 服务

  • Google GenAI - 默认 AI 服务

  • 支持多提供商：GLM（智谱AI）、SiliconFlow、OpenAI 等

  • 灵活配置：通过环境变量轻松切换 AI 服务

状态管理

  • React Hooks - 使用 useState、useEffect、useCallback 等

  • 自定义 Hooks - 模块化的状态管理逻辑

  • localStorage - 数据持久化

部署方案

  • Docker - 支持容器化部署

  • GitHub Pages - 支持静态站点部署

  • Vercel - 支持一键部署

🎯 游戏玩法

基础操作

  1. 开始游戏：输入修仙者名称，系统随机分配天赋

  2. 历练冒险：点击"历练"按钮，触发 AI 生成的随机事件

  3. 打坐修炼：消耗时间获得修为，安全稳定

  4. 突破境界：当修为达到上限时，尝试突破（有成功/失败机制）

属性系统

游戏包含以下核心属性：

  • 气血 (HP) - 生命值

  • 修为 (EXP) - 经验值

  • 攻击 - 影响战斗伤害

  • 防御 - 减少受到的伤害

  • 神识 - 影响法术威力和感知能力

  • 体魄 - 影响生命上限和物理抗性

  • 速度 - 影响行动顺序和闪避

  • 幸运 - 影响随机事件的好坏

  • 灵石 - 游戏货币

主要玩法

1. 历练冒险

  • ✅ 正面事件：获得修为、灵石、物品、灵宠等

  • ⚠️ 危险事件：遭遇邪修、魔修、陷阱

  • 🌌 特殊事件：触发随机秘境

  • 🎫 抽奖券：偶尔获得抽奖券

  • 🏆 传承：极小概率获得传承，直接突破境界

2. 装备系统

  • 收集各种装备（武器、护甲、首饰、戒指、法宝）

  • 强化装备提升属性

  • 祭炼本命法宝，获得 50% 属性加成

3. 灵宠系统

  • 获得灵兽蛋，孵化灵宠

  • 喂食灵宠提升经验

  • 灵宠升级和进化

  • 灵宠技能提供战斗或辅助效果

4. 宗门系统

  • 加入宗门，完成宗门任务

  • 获得贡献点，兑换稀有物品

  • 提升宗门等级

5. 炼丹系统

  • 收集炼丹材料

  • 消耗材料和灵石炼制丹药

  • 使用丹药获得临时或永久属性提升

6. 抽奖系统

  • 使用抽奖券抽取奖励

  • 每 10 次必得稀有以上奖励（保底机制）

7. 成就系统

  • 完成各种成就，解锁称号

  • 称号提供额外属性加成

💻 技术亮点

1. AI 事件生成系统

游戏的核心特色是 AI 驱动的随机事件生成。我设计了一个灵活的事件生成系统：


// 支持多种 AI 服务提供商

const aiService = {

provider: 'glm' | 'siliconflow' | 'openai' | 'custom',

model: 'glm-4.5-air' | 'gpt-4' | ...,

generateEvent: async (context) => {

// 根据游戏上下文生成随机事件

// 返回 JSON 格式的事件数据

}

}

特点：

  • 支持多种 AI 服务提供商

  • 通过环境变量灵活配置

  • 事件生成包含丰富的上下文信息

  • 自动处理 AI 返回格式错误

2. 模块化架构设计

项目采用模块化架构，每个功能模块都有独立的 handlers：


views/

├── meditation/ # 打坐系统

├── breakthrough/ # 突破系统

├── battle/ # 战斗系统

├── items/ # 物品系统

├── equipment/ # 装备系统

├── cultivation/ # 功法系统

├── alchemy/ # 炼丹系统

├── adventure/ # 历练系统

├── sect/ # 宗门系统

├── pet/ # 灵宠系统

└── ...

优势：

  • 代码组织清晰，易于维护

  • 功能模块独立，便于扩展

  • 使用自定义 Hooks 封装业务逻辑

3. 类型安全

全面使用 TypeScript，确保类型安全：


interface Player {

name: string;

realm: RealmType;

level: number;

hp: number;

maxHp: number;

exp: number;

// ... 更多属性

}

interface Item {

id: string;

name: string;

type: ItemType;

rarity: Rarity;

// ... 更多属性

}

4. 存档系统

完善的存档管理系统：

  • 多存档槽位：支持 10 个存档槽位

  • 存档备份：每个槽位最多 5 个备份

  • 存档对比：查看不同存档的差异

  • 导入/导出：支持存档文件的导入和导出

5. 自动功能

  • 自动历练：自动执行历练，提升效率

  • 自动打坐：自动打坐修炼

  • 被动恢复：自动恢复气血和修为

🚀 快速开始

环境要求

  • Node.js >= 18.0.0

  • pnpm >= 8.0.0 (推荐) 或 npm >= 9.0.0

安装步骤

1. 克隆项目

git clone <repository-url>

cd react-xiuxian-game
2. 安装依赖

# 使用 pnpm (推荐)

pnpm install

# 或使用 npm

npm install
3. 配置环境变量

在项目根目录创建 .env.local 文件：


# .env.local

VITE_AI_KEY=your-api-key-here

VITE_AI_PROVIDER=glm # 可选，默认: glm

💡 获取 API Key：

  • 如需使用其他 AI 服务，设置 VITE_AI_PROVIDER 环境变量
4. 启动开发服务器

pnpm dev

# 或

npm run dev
5. 访问游戏

打开浏览器访问: http://localhost:3000

🐳 Docker 部署

项目支持 Docker 容器化部署：


# 1. 配置环境变量（创建 .env 文件）

VITE_AI_KEY=your_api_key

VITE_AI_PROVIDER=glm

# 2. 一键构建并启动

npm run docker:build-and-up

# 3. 访问应用

# http://localhost:3000

📊 项目数据

  • 代码行数：约 10,000+ 行

  • 组件数量：30+ 个 React 组件

  • 功能模块：15+ 个核心功能模块

  • 游戏内容：

  • 7 大境界，70 层修炼之路

  • 20+ 种功法（天、地、玄、黄四个品级）

  • 丰富的装备系统

  • 完整的灵宠养成系统

🎯 游戏目标

短期目标

  • 提升境界，突破到更高层次

  • 收集强力装备，提升战斗力

  • 培养灵宠，获得战斗伙伴

  • 完成成就，解锁称号

长期目标

  • 🏆 飞升成仙 - 达到最高境界"飞升"

  • 💎 收集仙品 - 获得所有仙品装备和灵宠

  • 🏛️ 宗门领袖 - 在宗门中达到最高等级

  • 🎖️ 成就大师 - 完成所有成就

🔮 未来计划

游戏系统

  • 更多秘境探索内容

  • 灵宠进阶系统优化

  • 宗门任务系统扩展

  • 洞府系统（购买/升级洞府，设置聚灵阵）

  • 副本系统（固定副本，每日限次）

  • 交易/拍卖系统

技术优化

  • 游戏存档云同步

  • 移动端适配优化

  • 性能优化（大数据量处理）

  • AI 请求的缓存机制

界面改进

  • 更多动画效果

  • 可自定义主题

  • 快捷键支持

  • 数据统计面板（可视化图表）

📸 游戏截图

image.png

image.png

image.png

image.png 部分截图

🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

  1. Fork 本项目

  2. 创建特性分支 (git checkout -b feature/AmazingFeature)

  3. 提交更改 (git commit -m 'Add some AmazingFeature')

  4. 推送到分支 (git push origin feature/AmazingFeature)

  5. 开启 Pull Request

🔗 相关链接

  1. 云灵修仙传
  2. vercel 云灵修仙传

🙏 致谢

  • 感谢所有修仙小说作者提供的灵感

  • 感谢 GLM (智谱AI)、SiliconFlow、OpenAI 等 AI 服务提供商

  • 感谢 React、TypeScript、Vite 等优秀的开源项目

💬 写在最后

这个项目是我在学习和实践前端技术过程中的一个尝试。通过这个项目，我深入学习了：

  • React 19 的新特性和最佳实践

  • TypeScript 的类型系统设计

  • AI 集成 的实际应用场景

  • 游戏开发 的核心逻辑设计

  • 状态管理 的模块化组织

如果你对这个项目感兴趣，欢迎：

  • ⭐ Star 这个项目

  • 🐛 报告 Bug 或提出建议

  • 💻 贡献代码 或改进功能

  • 📢 分享 给更多开发者

🌟 愿你在修仙路上，早日飞升成仙！🌟

如果这篇文章对你有帮助，欢迎点赞、收藏、转发！

Made with ❤️ by [JeasonLoop]

📝 更新日志

v0.2.0 (2025-12-16)

  • 🐛 修复战斗系统类型错误

  • 🔧 优化自动历练暂停和恢复机制

  • 📚 全面审查和优化核心代码

v0.1.7 (2025-12-13)

  • 🐛 修复战斗系统卡住问题

  • 🔧 优化 AI 物品生成提示词

  • 📚 规范化物品效果类型

v0.1.4 (2025-12-05)

  • 🎉 新增功法品级分类系统

  • 🎉 抽奖券系统改为本地概率判定

  • 🐛 修复功法界面 React Hooks 调用顺序错误

查看完整的版本更新历史，请访问 CHANGELOG.md。

标签：React TypeScript 游戏开发 AI 前端 开源项目 修仙游戏 文字游戏

avatar
文章
阅读
粉丝