H5小游戏管理器 – 苏的小站

成功 用自己的方式度过一生

个人作品展示

苏的小站 ·

面试作品 简历展示、项目简介、技术栈
风格 现代、简约

H5小游戏管理器

注:这是本人弄的一个小游戏管理系统

项目地址:suyihang15/h5-game-manager: 基于python的h5小游戏管理系统

下载地址:https://github.com/suyihang15/h5-game-manager/releases/download/1.0.0/H5GameManager.exe

H5 游戏管理器

桌面端 H5 游戏可视化管理工具 — 支持导入游戏压缩包、自动识别入口


1. 项目介绍

一个用 Python 编写、通过 WebView2 桌面窗口运行的可视化管理工具,用来统一管理 HTML5 游戏项目。支持导入 ZIP/压缩包自动解压识别、分类管理、导入导出等功能。本程序参考了飞牛上的轻游戏项目,本人突发奇想想做一个类似的,于是有了这么一个东西。

核心功能

功能说明
游戏包导入上传 .zip / .tar.gz 游戏压缩包,自动解压并识别入口文件(index.html)
本地运行导入的游戏本地托管,一键在浏览器中打开运行
游戏管理添加/编辑/删除游戏,上传图标,设置分类、状态、精选
分类管理创建分类,自定义图标和排序
用户管理管理管理员账号,区分超级管理员/普通管理员
系统设置应用名称、深色/浅色主题、分页设置
数据迁移JSON 格式批量导入导出
打包 EXEPyInstaller 打包为单一 .exe 文件

默认账号

用户名密码角色
adminadmin123超级管理员

2. 快速开始

环境要求

  • Windows 10 或更新(自带的 Edge WebView2 即可)
  • Python 3.8+

安装运行

cd h5-game-manager
pip install -r requirements.txt
python main.py

应用会以桌面窗口形式打开,无需浏览器。

打包为 EXE

pip install pyinstaller
python build.py build

生成的 H5GameManager.exe 在 dist/ 目录下,可以直接分发给用户使用。


3. 使用指南

登录

启动后输入默认账号密码登录。

添加游戏(URL 模式)

  1. 点击「游戏管理」→「+ 添加游戏」
  2. 游戏来源选择「URL 地址」
  3. 填写标题、游戏 URL、描述,选择分类
  4. 可上传图标(建议 256×256 PNG)
  5. 点击保存

添加游戏(压缩包导入)

  1. 点击「游戏管理」→「+ 添加游戏」
  2. 游戏来源选择「上传游戏包」
  3. 点击上传区域,选择一个 .zip / .tar.gz / .tgz 格式的 H5 游戏压缩包
  4. 系统自动解压并识别入口文件(优先 index.html
  5. 填写标题、分类等信息
  6. 点击保存

游戏包中必须包含 HTML 入口文件(如 index.html、game.html),系统会递归搜索所有目录。

运行游戏

在游戏卡片上,鼠标悬停点击 ▶ 按钮,游戏会在系统默认浏览器中打开。本地导入的游戏通过 Flask 本地托管,无需联网。

编辑/删除

鼠标悬停在游戏卡片上,点铅笔编辑或垃圾桶删除。删除本地游戏包会同时清除解压文件。


4. 技术原理

整体架构

┌──────────────────────────────────────────────────┐
│ main.py                                           │
│   │                                               │
│   ├─ Thread → Flask API (127.0.0.1:随机端口)      │
│   │     ├─ /api/auth/*         JWT 认证            │
│   │     ├─ /api/games/*        游戏 CRUD + 包导入   │
│   │     ├─ /api/categories/*   分类管理             │
│   │     ├─ /api/admin/users/*  用户管理             │
│   │     ├─ /api/dashboard/*    统计数据             │
│   │     ├─ /api/public/*       系统设置             │
│   │     ├─ /uploads/*          图标文件             │
│   │     └─ /games/<slug>/*     本地游戏文件         │
│   │                                               │
│   └─ Eel → Edge WebView2 桌面窗口                  │
│         └─ web/index.html (SPA 前端)               │
└──────────────────────────────────────────────────┘

压缩包导入流程

用户上传 game.zip
  │
  ├─ 1. 接收 multipart/form-data (package 字段)
  ├─ 2. 判断格式: .zip → zipfile / .tar.gz → tarfile
  ├─ 3. 解压到 games/<slug>/ 目录
  ├─ 4. 递归扫描入口文件:
  │      index.html > game.html > main.html > *.html
  ├─ 5. 返回文件列表和入口路径
  ├─ 6. Flask 路由 /games/<slug>/<path> 提供文件服务
  └─ 7. 点击运行时: 打开 http://127.0.0.1:PORT/games/<slug>/index.html

技术栈

技术说明
桌面框架Eel + Edge WebView2系统内置,无需额外运行时
后端FlaskREST API + 静态文件服务
数据库SQLite (WAL)单文件零配置
认证JWT + bcrypt无状态 token + 密码哈希
前端原生 JS + Bootstrap 5 CDN无需 npm/构建链
打包PyInstaller –onefile单 .exe 分发
解压zipfile + tarfilePython 标准库,无需额外依赖

数据库表

  • users — 管理员账号(bcrypt 密码)
  • categories — 游戏分类(名称/标识/图标/排序)
  • games — 游戏记录(标题/URL/图标/分类/状态/是否本地包)
  • play_records — 游玩记录
  • settings — 键值对配置

5. 项目结构

h5-game-manager/
├── main.py              # 入口:启动 Flask + Eel 桌面窗口
├── app.py               # Flask 应用工厂 (蓝图/CORS/错误处理)
├── database.py          # SQLite 建表 + 种子数据 + 迁移
├── auth.py              # JWT 认证 + 权限装饰器
├── build.py             # PyInstaller 打包脚本
├── requirements.txt     # 依赖清单
├── routes/
│   ├── games.py         # 游戏 CRUD + 压缩包导入 + 文件服务
│   ├── categories.py    # 分类 CRUD
│   ├── users.py         # 用户 CRUD
│   ├── dashboard.py     # 统计聚合
│   └── public.py        # 系统设置接口
├── web/                 # 前端 SPA
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── api.js       # fetch 封装 + JWT 注入
│       ├── app.js       # 路由/认证/全局工具
│       └── pages/       # 6 个页面模块
├── games/               # 导入的游戏包解压目录
├── uploads/icons/       # 游戏图标存储
└── data/games.db        # SQLite 数据库 (自动创建)

6. H5小游戏源码

这个本人不能提供,毕竟涉及版权问题,请使用者自行寻找,并尊重作者。


7. 效果展示

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注