AI负责 根据已有数据生成新的动态任务和新闻事件

# 天空大都市 - AI 3D 城市建设模拟游戏

一款结合人工智能的 3D 城市建设模拟经营游戏，使用现代化 Web 技术栈构建。

游戏截图如下:

AI创建任务

## 🎮 游戏特色

- **AI 智能顾问** - 基于 DeepSeek AI 提供智能城市发展建议

- **3D 可视化** - 使用 Three.js 构建沉浸式 3D 城市景观

- **实时策略** - 动态人口、资金管理系统

- **目标导向** - AI 生成的挑战性发展目标

- **新闻系统** - 实时城市事件播报

## 🛠️ 技术栈

### 前端技术

- **React 18** - 现代化组件化 UI 框架

- **TypeScript** - 类型安全的 JavaScript 超集

- **Three.js** - 强大的 3D 图形渲染引擎

- **@react-three/fiber** - React 的 Three.js 渲染器

- **@react-three/drei** - Three.js 实用工具库

- **Tailwind CSS** - 实用优先的 CSS 框架

- **Vite** - 快速的前端构建工具

### 后端技术

- **Node.js** - JavaScript 运行时环境

- **Express.js** - 轻量级 Web 应用框架

- **CORS** - 跨域资源共享支持

- **Dotenv** - 环境变量管理

### AI 服务

- **SiliconFlow API** - 国内领先的 AI 服务平台

- **DeepSeek-V3** - 高性能语言模型

## 📋 系统要求

- Node.js >= 18.0.0

- npm >= 8.0.0

- 现代浏览器 (Chrome, Firefox, Safari, Edge)

## 🚀 快速开始

### 1. 克隆项目

```bash

git clone <repository-url>

cd 天空大都市-(sky-metropolis)

```

### 2. 安装依赖

#### 前端依赖

```bash

npm install

```

#### 后端依赖

```bash

cd backend

npm install

cd ..

```

### 3. 环境配置

创建后端环境配置文件：

```bash

# backend/.env

PORT=3003

SILICONFLOW_API_KEY=your_api_key_here

```

### 4. 启动服务

#### 方法一：分别启动（推荐开发）

```bash

# 终端1 - 启动后端服务

cd backend

npm start

# 终端2 - 启动前端开发服务器

npm run dev

```

#### 方法二：使用 npm scripts

```bash

# package.json 中添加脚本后可使用

npm run start:all

```

### 5. 访问应用

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

## 🏗️ 项目结构

```

天空大都市-(sky-metropolis)/

├── backend/                    # 后端服务

│   ├── server.js              # 主服务文件

│   ├── package.json           # 后端依赖

│   └── .env                   # 环境变量配置

├── public/                    # 静态资源

├── src/                       # 前端源码

│   ├── components/            # React 组件

│   │   ├── Building.tsx       # 建筑物组件

│   │   ├── CityView.tsx       # 城市视图组件

│   │   └── StatsPanel.tsx     # 统计面板组件

│   ├── services/              # 业务服务

│   │   └── aiService.ts       # AI 服务接口

│   ├── App.tsx                # 主应用组件

│   ├── index.tsx              # 入口文件

│   └── types.ts               # TypeScript 类型定义

├── index.html                 # HTML 模板

├── vite.config.ts             # Vite 配置

├── tsconfig.json              # TypeScript 配置

└── package.json               # 项目配置

```

## 🔧 开发指南

### 代码规范

- 使用 TypeScript 进行类型检查

- 遵循 React Hooks 最佳实践

- 组件采用函数式编程风格

- 使用 Tailwind CSS 进行样式设计

### 3D 开发注意事项

- 使用 @react-three/fiber 进行 3D 场景管理

- 利用 drei 组件库简化常见 3D 操作

- 注意性能优化，合理使用 useMemo 和 useCallback

### AI 集成

- 后端统一处理 API 密钥安全性

- 前端通过代理接口调用 AI 服务

- 实现了完善的错误处理机制

## 🎯 游戏玩法

### 基本操作

1. **建筑放置** - 点击网格选择建筑类型进行建设

2. **资源管理** - 平衡人口增长和资金收入

3. **目标完成** - 达成 AI 生成的发展目标获得奖励

4. **城市发展** - 关注新闻动态，适应城市变化

### 建筑类型

- 🏠 **住宅区** - 增加人口容量

- 🏢 **商业区** - 产生稳定收入

- 🏭 **工业区** - 高收入但可能影响环境

- 🌳 **绿化区** - 改善城市环境

## 🔒 安全说明

本项目采用了安全的架构设计：

- API 密钥存储在后端环境变量中

- 前端通过代理接口访问 AI 服务

- 实现了完整的 CORS 配置

- 数据传输采用 HTTPS 加密

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

### 开发流程

1. Fork 项目仓库

2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)

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

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

5. 开启 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🙏 致谢

- [Three.js](https://threejs.org/) - 强大的 3D 图形库

- [React Three Fiber](https://docs.pmnd.rs/react-three-fiber) - React 3D 渲染解决方案

- [SiliconFlow](https://siliconflow.cn/) - AI 服务提供商

- [Tailwind CSS](https://tailwindcss.com/) - 实用 CSS 框架

## 📞 联系方式

如有问题或建议，请通过以下方式联系：

- 提交 GitHub Issue

- 发送邮件至项目维护者

---

🎮 享受建设你的天空大都市吧！

源码地址 https://github.com/xiaopeng1995n/xiaopeng1995n-ai-3d-building-game