# 王者荣耀英雄随机选择器

**Repository Path**: bingbingyihao/hero-random-selector

## Basic Information

- **Project Name**: 王者荣耀英雄随机选择器
- **Description**: 一款轻量级、响应式的网页工具，帮助《王者荣耀》玩家在游戏前快速随机选择英雄，打破选择困难症，增添游戏乐趣！
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-22
- **Last Updated**: 2025-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎮 王者荣耀英雄随机选择器

> 一款轻量级、响应式的网页工具，帮助《王者荣耀》玩家在游戏前**快速随机选择英雄**，打破选择困难症，增添游戏乐趣！

## 🌟 功能亮点

- ✅ **按分路筛选**：支持“全部”及六大职业分类（刺客、坦克、射手、战士、法师、辅助）随机
- 🎲 **动态滚动动画**：点击按钮后模拟抽奖式滚动效果，增强趣味性与仪式感
- 🖼️ **高清圆形头像展示**：实时显示随机结果的英雄形象和名称
- 📱 **移动端友好设计**：适配手机和平板设备，随时随地开抽
- 🔒 **纯前端运行**：无需登录、不收集数据，完全本地化逻辑处理
- ⚡ **预加载机制**：首次访问自动缓存所有英雄数据，后续切换流畅无等待

## 🛠 技术栈

| 技术       | 说明 |
|------------|------|
| HTML5 + CSS3 | 结构与样式构建，采用 Flex 布局居中 |
| JavaScript (ES6+) | 核心交互逻辑，异步加载 JSON 数据 |
| Fetch API   | 加载各分路英雄数据 |
| Nginx       | 静态资源服务器部署 |
| Bash 脚本   | 自动化安装、配置 HTTPS 和同步文件 |

## 🗂 目录结构

```bash
hero-random-selector/
├── README.md                    # 项目说明文档
├── code/                        # 前端源码
│   ├── index.html               # 主页面
│   └── heroes/                  # 英雄数据 JSON 文件
│       ├── 全部.json
│       ├── 刺客.json
│       ├── 坦克.json
│       ├── 射手.json
│       ├── 战士.json
│       ├── 法师.json
│       └── 辅助.json
├── bash/
│   ├── install.sh               # 安装 Nginx 并启动服务
│   ├── nginx_mod_https.sh       # 配置 Nginx 支持 HTTPS（含证书）
│   ├── sync_nginx.sh           # 同步前端代码到 Nginx 根目录
│   └── stop.sh                 # 停止所有相关服务
└── ssl/                         # （可选）SSL 证书存放目录（需手动添加）
    ├── bingbingyihao.cn.key
    └── bingbingyihao.cn.pem
```

## 🚀 快速开始

### 方法一：本地预览（开发调试）

1. 克隆仓库：
   ```bash
   git clone https://github.com/yourname/hero-random-selector.git
   cd hero-random-selector
   ```

2. 直接打开 `code/index.html` 浏览器即可使用（部分浏览器因 CORS 可能无法加载 JSON，建议使用本地服务器）。

3. 使用 Python 快启本地服务：
   ```bash
   python3 -m http.server 8000
   ```
   访问：[http://localhost:8000/code](http://localhost:8000/code)

---

### 方法二：生产环境部署（Linux + Nginx）

> 适用于 CentOS/RHEL/Fedora 系统（基于 yum 包管理器）

#### 1. 安装 Nginx 并启动基础服务
```bash
sudo bash bash/install.sh
```

#### 2. 同步前端代码到 Nginx 默认路径
```bash
sudo bash bash/sync_nginx.sh /usr/share/nginx/html
```
> 提示：可指定其他路径如 `/var/www/html`

#### 3. 配置 HTTPS（推荐）

确保已将 SSL 证书放入 `ssl/` 目录下（文件名必须为 `bingbingyihao.cn.key` 和 `.pem`），然后执行：
```bash
sudo bash bash/nginx_mod_https.sh
```
该脚本会：
- 创建证书目录并复制证书
- 修改 Nginx 配置以启用 HTTPS
- 设置 HTTP → HTTPS 强制跳转
- 开启 Gzip 压缩、安全头等优化项
- 重启 Nginx 生效

✅ 最终可通过 `https://bingbingyihao.cn` 安全访问站点

#### 4. 停止服务（需要时）
```bash
sudo bash bash/stop.sh
```

---

## 💡 使用提示

- 首次加载某一分路时会有短暂“加载中”状态，之后即可秒速抽取。
- 若网络异常导致加载失败，请检查 JSON 文件路径或服务器是否正常提供静态资源。
- 所有英雄图片均来自官方 CDN，加载速度依赖网络环境。

---

## 🧩 数据维护

若需新增英雄或更新头像链接，只需修改对应 `heroes/*.json` 文件即可。格式如下：

```json
[
  {
    "src": "图片URL",
    "alt": "英雄名称"
  }
]
```

> 注意：“全部”列表应包含所有英雄，其余分类请保持准确归属。

---

## 📄 许可证

Apache 2.0 License — 自由使用、修改与分发。  
详情见 [LICENSE](LICENSE) 文件（如存在）。

---

## ❤️ 致谢

感谢《王者荣耀》带来精彩的 MOBA 体验！  
本项目仅供学习交流之用，不涉及任何商业行为。

> 项目作者：bingbingyihao  
> 项目域名：https://bingbingyihao.cn

---

🎉 快来试试你的今日幸运英雄吧！