# activity-generator

**Repository Path**: ljh_01/activity-generator

## Basic Information

- **Project Name**: activity-generator
- **Description**: 一个用于快速生成各类营销活动互动页面的 Web 应用工具，支持多种有趣的游戏模板，可一键导出独立的 HTML 文件。


- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-31
- **Last Updated**: 2026-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README




🎪 活动互动页面生成器

[English](#english) | 中文说明

一个用于快速生成各类营销活动互动页面的 Web 应用工具，支持多种有趣的游戏模板，可一键导出独立的 HTML 文件。

---

## ✨ 功能特性

### 🎯 支持的模板类型

| 模板 | 描述 |
|------|------|
| 🎡 转盘 | 幸运大转盘，旋转随机抽奖 |
| 🎴 刮刮卡 | 刮开涂层揭示奖品 |
| 🎰 翻牌阵 | 卡片翻转匹配游戏 |
| 🎲 老虎机 | 经典老虎机效果 |
| 🎳 Plinko 弹珠台 | 弹珠下落轨迹抽奖 |
| 🎤 随机点名 | 随机抽取名单中的名字 |

### 🛠️ 核心功能

- **可视化配置**：实时预览所见即所得的配置界面
- **概率控制**：灵活设置各奖品的中奖概率
- **主题定制**：多套预置主题可选，支持自定义配色
- **预设模板**：内置多套预设配置，快速开始
- **JSON 编辑**：高级用户可直接编辑 JSON 配置
- **一键导出**：生成独立的 HTML 文件，方便分享部署

---

## 🚀 快速开始

### 运行项目

```bash
# 直接在浏览器中打开
open index.html

# 或使用本地服务器（推荐）
python -m http.server 8080
# 然后访问 http://localhost:8080
```

访问 http://localhost:8080 即可进入生成器主页。

### 使用流程

1. **选择模板**：在首页卡片网格中选择想要的互动类型
2. **配置奖品**：在左侧编辑器中添加/编辑奖品及其概率
3. **调整外观**：选择主题、设置颜色、调整动画效果
4. **预览测试**：在右侧预览区实时查看效果并测试抽奖
5. **导出使用**：点击顶部导出按钮生成独立 HTML 文件

---

## 📁 项目结构

```
activity-generator/
├── index.html              # 主应用入口
├── css/
│   └── generator.css       # 应用样式
├── js/
│   ├── app.js             # 主应用逻辑
│   ├── state.js           # 状态管理
│   ├── router.js         # 路由处理
│   ├── templates.js     # 模板注册中心
│   ├── themes.js        # 主题管理
│   ├── download.js      # 导出功能
│   ├── output-utils.js  # 输出工具
│   ├── templates/       # 各模板实现
│   │   ├── wheel.js
│   │   ├── scratch.js
│   │   ├── flip.js
│   │   ├── slot.js
│   │   ├── plinko.js
│   │   └── rollcall.js
│   ├── components/      # UI 组件
│   │   ├── appearance-editor.js
│   │   ├── json-editor.js
│   │   ├── preset-loader.js
│   │   ├── prize-editor.js
│   │   └── probability-bar.js
│   └── presets.js       # 预设配置
└── tests/
    └── test.js          # 测试用例
```

---

## 🏗️ 技术架构

- **纯前端**：无后端依赖，单页面应用
- **模块化设计**：模板系统采用插件式架构
- **Canvas 渲染**：转盘、老虎机等使用 Canvas 实现高性能动画
- **状态驱动**：统一的状态管理，数据流向清晰
- **零依赖**：不使用任何外部框架，原生 JS 实现

### 技术栈

- Vanilla JavaScript (ES6+)
- HTML5 Canvas
- CSS3 (Flexbox/Grid)
- 本地存储 (LocalStorage)

---

## 🔧 添加新模板

项目采用插件式架构，添加新模板步骤：

1. 在 `js/templates/` 目录创建新的模板文件
2. 实现模板接口（init, render, generateHTML）
3. 在 `js/templates.js` 中注册新模板
4. 添加对应的 CSS 样式

详细规范请参考 `docs/phase1-tech-spec.md`。

---

## 📦 导出 HTML 规范

导出的 HTML 文件包含：

- 完整的内联 CSS 样式
- 无外部依赖的 JavaScript 代码
- 可自定义的奖品配置数据
- 响应式布局，适配移动端

---

## ✅ 运行测试

```bash
node tests/test.js
```

---

## 📄 License

MIT License - 请查看 LICENSE 文件了解详情。

---

## 📱 线上示例

- 幸运转盘示例：`snack-llottery-wheel.html`

---
如果你觉得有用，请点个Star.

如有问题或建议，欢迎提交 Issue 或 Pull Request。