# text_escape

**Repository Path**: myonsoul/text_escape

## Basic Information

- **Project Name**: text_escape
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-17
- **Last Updated**: 2025-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Text Escape - 文字密室逃脱游戏

一个基于 React 的交互式文字密室逃脱游戏，通过节点展开和拖拽交互来解谜。

## 技术栈

- **React 18** - 前端框架
- **Vite** - 构建工具
- **Tailwind CSS** - 样式框架
- **Framer Motion** - 动画库

## 游戏玩法

### 基本操作

| 操作 | 桌面端 | 移动端 |
|------|--------|--------|
| 选中节点 | 单击 | 单击 |
| 展开/交互 | 双击 | 双击（快速点击两次） |
| 移动节点 | 拖拽 | 触摸拖拽 |
| 移动场景 | 拖拽空白区域 | 触摸拖拽空白区域 |

### 游戏流程

1. 从「黑暗的房间」开始，双击展开子节点
2. 找到「火柴」和「未点燃的灯」
3. 拖动火柴到灯上 → 灯变成油灯
4. 探索房间四面墙壁
5. 在西墙书架找到日记，获取密码提示
6. 在北墙画后找到保险柜，输入密码获得钥匙
7. 拖动钥匙到锁着的门 → 门打开
8. 双击出口，游戏通关

## 项目结构

```text
src/
├── App.jsx                 # 主应用组件
├── gameData.js             # 游戏数据配置
├── main.jsx                # 入口文件
├── index.css               # 全局样式
└── components/
    ├── GameNode.jsx        # 游戏节点组件
    ├── HelpButton.jsx      # 帮助按钮
    ├── MessageDisplay.jsx  # 消息显示
    ├── PasswordModal.jsx   # 密码输入弹窗
    ├── EndingModal.jsx     # 结局弹窗
    └── Inventory.jsx       # 物品栏
```

## 节点配置说明

在 `gameData.js` 中配置游戏节点：

```javascript
{
  id: 1001,                    // 节点唯一ID
  title: "节点名称",            // 显示的标题
  type: 1,                     // 类型: 1=起始, 2=密码, 3=结束
  text: "节点描述文本",         // 点击时显示的文本
  childNode1: 1002,            // 子节点ID（最多4个）
  childNode2: 1003,
  
  // 交互配置（可选）
  interact: 1005,              // 交互目标节点ID
  interactType: 1,             // 交互类型: 1=重叠
  interEffect: 1,              // 交互效果: 1=消失, 2=替换
  effectValue: 1006,           // 效果值（替换成的节点ID）
  
  // 密码配置（type=2 时）
  password: "1234",            // 正确密码
}
```

### 交互规则

- **interEffect: 1（消失）**：拖动节点消失，目标节点被替换
- **interEffect: 2（替换）**：目标节点被替换，拖动节点不变

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 自定义关卡

编辑 `src/gameData.js` 中的 `nodeConfig` 数组来创建自定义关卡：

1. 定义起始节点（type: 1）
2. 添加子节点形成探索树
3. 配置交互关系实现解谜逻辑
4. 设置密码节点（type: 2）和结束节点（type: 3）

## 特性

- 响应式设计，支持桌面和移动设备
- 节点自动避让，防止重叠
- 平滑的动画效果
- 可拖动的场景背景
- 数据驱动的关卡配置

## License

MIT