# Wordplay

**Repository Path**: wuxin519/wordplay

## Basic Information

- **Project Name**: Wordplay
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-04
- **Last Updated**: 2026-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文字小游戏（分支剧情 + 低代码编辑器）

纯前端、无需后端、无需构建，把整个文件夹上传到任意静态空间 / 镜像网站即可运行。

> **语言 / Language**：简体中文 | [English](./README-EN.md)

> **编辑器新手？先读《[编辑器使用指南](./EDITOR-GUIDE.md)》**，从搭第一个小游戏开始，10 分钟上手。

> **中英文界面**：游戏页与编辑器右上角均有 **English/中文** 按钮，可切换界面语言（记忆到本地）；故事正文按作者写作的语言原样显示，不做翻译。

## 文件结构

```
text-adventure-game/
├── index.html       # 游戏播放页
├── editor.html      # 低代码编辑器（中英文可切换）
├── README.md        # 说明（中文）
├── README-EN.md     # 说明（English）
├── EDITOR-GUIDE.md  # 编辑器使用指南（新手必读）
├── css/style.css    # 样式
├── js/data.js       # 数据模型 + 示例故事 + 存取工具
├── js/game.js       # 游戏引擎
├── js/editor.js     # 编辑器
├── js/i18n.js       # 编辑器中英文翻译字典
├── stories/demo.json   # 示例故事《午夜图书馆》
└── stories/wuling.json  # 精品悬疑示例《雾灯》
```

## 快速开始

1. 直接用浏览器打开 `index.html` 试玩内置的精品悬疑示例《雾灯》——雾岛守夜、多重反转、5 个结局。
2. 打开 `editor.html` 开始编辑。

## 部署到镜像网站

把整个 `text-adventure-game` 文件夹上传到网站任意目录即可，例如：

- 访问 `https://你的镜像站/…/index.html` 播放游戏
- 访问 `https://你的镜像站/…/editor.html` 编辑故事

**指定外部故事文件**：把编辑器导出的 JSON 放进 `stories/` 目录，然后用地址参数访问：

```
index.html?story=stories/xxx.json
```

不依赖服务器，`file://` 双击打开也能用（图片/音乐会以 base64 内嵌进故事文件）。

## 示例故事

| 文件 | 说明 |
| ---- | ---- |
| `js/data.js` 内置 | 默认演示《雾灯》：雾岛灯塔守夜人悬疑，1985 年的报纸、隐形字手记、红绳钥匙、5 个结局（含隐藏结局） |
| `stories/wuling.json` | 《雾灯》独立 JSON，可用 `index.html?story=stories/wuling.json` 访问 |
| `stories/demo.json` | 入门向示例《午夜图书馆》 |

## 编辑器用法

- **添加节点**：工具栏「+ 添加节点」，可选开始 / 剧情 / 选择 / 结局四种类型。
- **编辑内容**：点击画布中的节点，右侧属性面板可改标题、类型、剧情文字、配图、背景音乐。
- **连接逻辑线**：每个选项都有「选项文字 + 去向（目标节点下拉框）」，画布会画出彩色连线。选项顺序决定连线颜色，左侧节点卡片上也标有同色圆点。
- **拖动节点**：按住节点头部拖动，会自动重排连线。也可用「自动布局」一键按逻辑顺序排列。
- **素材库**：上传图片/音乐（自动转 base64 存进故事），或直接粘贴在线 URL；素材可分配给任意节点。
- **设为开始节点**：右侧属性面板中指定故事起点。
- **保存**：自动保存到浏览器（localStorage），也可手动「保存」。
- **导出 / 导入 JSON**：把作品打包成单文件，可迁移到镜像站或分享给别人。
- **预览**：一键在播放页打开当前作品。

## 节点类型

| 类型   | 说明                                     |
| ------ | ---------------------------------------- |
| 开始   | 故事起点，相当于剧情节点                  |
| 剧情   | 显示一段文字，一个「继续」走向下一节点    |
| 选择   | 显示文字 + 多个选项，每个选项指向不同节点 |
| 结局   | 没有选项，显示后提供「重新开始/返回标题」 |

## 自定义主题

故事 JSON 的 `meta.theme` 可自定义背景色、卡片色、文字色、强调色：

```json
"theme": { "bg": "#141824", "card": "#1d2433", "text": "#e8e8f0", "accent": "#e94560" }
```

> 小提示：本地用 `python -m http.server` 起个静态服务更方便调试 `?story=` 加载。