🎮 GameHub - 精品小游戏合集

一个精美炫酷的HTML5游戏合集主页，包含42款精心分类的小游戏。

🎯 如何运行

本地快速体验

克隆项目

git clone https://github.com/SinceraXY/GameHub.git
cd GameHub

打开主页
- 直接双击 index.html 文件，或
- 使用本地服务器（推荐）：
```
# Python
python -m http.server 8000

# Node.js
npx http-server -p 8000
```
然后访问 http://localhost:8000
开始游戏 🎮
- 浏览42款游戏
- 点击任意游戏卡片即可开始

📖 更多运行方式请查看快速开始指南

在线部署

如需在线部署，请参考部署指南，支持：

GitHub Pages（免费）
Netlify / Vercel
自托管服务器

🌟 特色功能

🎨 精美设计

✨ 现代化渐变UI设计
🌈 丰富的色彩搭配
💫 流畅的动画效果
🎭 动态背景特效

🎯 智能分类

📂 7大游戏分类
🔍 实时搜索功能
🏷️ 一键过滤分类
📊 可视化统计

🎮 游戏体验

🚀 即点即玩，无需下载
📱 全平台响应式设计
⚡ 快速加载
🎯 42款精品游戏

📁 项目结构

小游戏部署集合/
├── index.html          # 主页面
├── style.css           # 样式文件
├── script.js           # 交互脚本
├── README.md           # 说明文档
└── games/              # 游戏目录
    ├── Puzzle/         # 益智解谜 (8款)
    │   ├── 2048/
    │   ├── Jigsaw-Puzzle/
    │   ├── Klotski/
    │   ├── Maze-Escape/
    │   ├── Minesweeper/
    │   ├── Spot-Difference/
    │   ├── Sudoku/
    │   └── Tilting-Maze/
    ├── Action/         # 动作反应 (11款)
    │   ├── Archery/
    │   ├── Breakout/
    │   ├── Crossy-Road/
    │   ├── Emoji-Catcher/
    │   ├── Flappy-Bird/
    │   ├── Fruit-Slicer/
    │   ├── Insect-Catch/
    │   ├── Piano-Tiles/
    │   ├── Ping-Pong/
    │   ├── Shape-Clicker/
    │   └── Whack-A-Mole/
    ├── Arcade/         # 经典街机 (8款)
    │   ├── Bubble-Shooter/
    │   ├── Candy-Crush/
    │   ├── Jump-Game/
    │   ├── Pac-Man/
    │   ├── Snake/
    │   ├── Space-Invaders/
    │   ├── Tetris/
    │   └── Tower-Blocks/
    ├── Board/          # 棋牌策略 (3款)
    │   ├── Gomoku/
    │   ├── Rock-Paper-Scissors/
    │   └── Tic-Tac-Toe/
    ├── Memory/         # 记忆训练 (4款)
    │   ├── Color-Match/
    │   ├── Match-Pairs/
    │   ├── Memory-Card/
    │   └── Simon-Says/
    ├── Typing/         # 打字练习 (4款)
    │   ├── Hangman/
    │   ├── Speed-Typing/
    │   ├── Type-Master/
    │   └── Typing-Speed-Challenge/
    └── Casual/         # 休闲娱乐 (4款)
        ├── Dice-Roll-Simulator/
        ├── Quiz/
        ├── Speak-Number-Guessing/
        └── Type-Number-Guessing/

🚀 快速开始

方法1：直接打开（推荐）

双击 index.html 文件
浏览器会自动打开主页
开始畅玩游戏！

方法2：使用本地服务器

# 使用 Python
python -m http.server 8000

# 使用 Node.js (http-server)
npx http-server -p 8000

# 使用 VSCode Live Server
# 右键 index.html -> Open with Live Server

然后访问：http://localhost:8000

🎯 游戏分类详情

🧩 Puzzle（益智解谜）- 8款

需要逻辑思维和策略规划

2048 - 经典数字合并益智游戏
Jigsaw Puzzle - 趣味拼图挑战
Klotski - 华容道滑块解谜
Maze Escape - 迷宫逃脱冒险
Minesweeper - 经典扫雷游戏
Spot Difference - 找不同挑战
Sudoku - 数独逻辑游戏
Tilting Maze - 重力迷宫

⚡ Action（动作反应）- 11款

需要快速反应和手眼协调

Archery - 射箭竞技
Breakout - 打砖块游戏
Crossy Road - 过马路挑战
Emoji Catcher - 表情符号捕捉
Flappy Bird - 飞翔的小鸟
Fruit Slicer - 水果切切乐
Insect Catch - 昆虫捕捉
Piano Tiles - 别踩白块
Ping Pong - 乒乓球对战
Shape Clicker - 形状点击
Whack A Mole - 打地鼠游戏

🕹️ Arcade（经典街机）- 8款

经典游戏，怀旧元素

Bubble Shooter - 泡泡龙射击
Candy Crush - 糖果消消乐
Jump Game - 跳跃冒险
Pac-Man - 经典吃豆人
Snake - 贪吃蛇
Space Invaders - 太空入侵者
Tetris - 俄罗斯方块
Tower Blocks - 叠叠乐

♟️ Board（棋牌策略）- 3款

策略对战，规则博弈

Gomoku - 五子棋对战
Rock Paper Scissors - 石头剪刀布
Tic Tac Toe - 井字棋

🧠 Memory（记忆训练）- 4款

训练记忆力和观察力

Color Match - 颜色匹配记忆
Match Pairs - 配对记忆
Memory Card - 记忆卡片翻牌
Simon Says - 西蒙说记忆

⌨️ Typing（打字练习）- 4款

提升打字速度和准确度

Hangman - 猜单词游戏
Speed Typing - 速度打字练习
Type Master - 打字大师
Typing Speed Challenge - 打字速度挑战

🎲 Casual（休闲娱乐）- 4款

轻松休闲，简单有趣

Dice Roll Simulator - 骰子模拟器
Quiz - 知识问答
Speak Number Guessing - 语音猜数字
Type Number Guessing - 打字猜数字

💡 功能说明

🔍 搜索功能

在顶部搜索框输入游戏名称
支持模糊搜索
实时显示搜索结果

🏷️ 分类过滤

点击分类按钮快速过滤
显示当前分类游戏数量
支持"全部"查看所有游戏

📊 统计信息

可视化显示各分类游戏数量
百分比进度条
动画效果展示

🎨 视觉效果

动态渐变背景
悬停动画
平滑滚动
响应式设计

🛠️ 技术栈

HTML5 - 结构语义化
CSS3 - 现代化样式
- Flexbox / Grid 布局
- CSS Variables
- 动画和过渡
- 渐变效果
Vanilla JavaScript - 原生JS
- DOM操作
- 事件处理
- Intersection Observer
- 动态渲染

📱 浏览器兼容性

浏览器	版本	支持
Chrome	90+	✅
Firefox	88+	✅
Safari	14+	✅
Edge	90+	✅
Opera	76+	✅

🎯 使用建议

新手推荐

Casual - 轻松上手
Arcade - 经典易懂
Board - 规则简单

进阶挑战

Puzzle - 挑战智力
Action - 考验反应
Typing - 提升技能

专项训练

Memory - 记忆力训练
Typing - 打字速度提升
Puzzle - 逻辑思维锻炼

📈 统计数据

总游戏数: 42款
总分类数: 7类

分类占比:
┌─────────────────────────┐
│ Action  ████████ 26%    │
│ Puzzle  ████████ 19%    │
│ Arcade  ████████ 19%    │
│ Memory  ████ 10%        │
│ Typing  ████ 10%        │
│ Casual  ████ 10%        │
│ Board   ███ 7%          │
└─────────────────────────┘

🔧 自定义修改

添加新游戏

在 games/ 对应分类文件夹中添加游戏
修改 script.js 中的 gamesData 对象
添加游戏信息：名称、路径、图标、描述

{
    name: '游戏名称',
    path: 'games/分类/游戏文件夹/index.html',
    icon: 'fas fa-图标',
    desc: '游戏描述'
}

修改主题颜色

在 style.css 的 :root 中修改CSS变量：

:root {
    --primary: #667eea;      /* 主色调 */
    --secondary: #764ba2;    /* 次要色 */
    --accent: #f093fb;       /* 强调色 */
    /* ... */
}

🎨 设计特点

色彩系统

Puzzle - 紫色系（#667eea）
Action - 粉色系（#f093fb）
Arcade - 黄色系（#feca57）
Board - 蓝色系（#48dbfb）
Memory - 红色系（#ff6348）
Typing - 绿色系（#1dd1a1）
Casual - 玫红系（#ee5a6f）

动画效果

淡入动画
悬停提升
渐变移动
进度条动画
背景漂浮

🎯 核心亮点

特性	说明
🎮 42款游戏	精心挑选的HTML5游戏，涵盖7大分类
🚀 即点即玩	无需下载安装，打开浏览器即可畅玩
📱 响应式设计	完美适配桌面、平板和移动设备
🎨 精美UI	现代化设计，渐变色彩，流畅动画
🔍 智能搜索	实时搜索，快速定位你想玩的游戏
🏷️ 分类过滤	7大游戏分类，一键筛选
⚡ 性能优化	懒加载、动画优化，流畅体验
🎯 易于部署	支持GitHub Pages等多种部署方式

📝 更新日志

v1.0.0 (2025-10-28)

✅ 初始版本发布
✅ 42款游戏完整收录
✅ 7大分类系统
✅ 搜索和过滤功能
✅ 响应式设计
✅ 精美UI界面
✅ 动画特效
✅ 完整文档和部署指南

🗺️ 路线图

⭐ Star History

🤝 贡献指南

欢迎贡献新游戏或改进建议！

Fork 本项目
创建特性分支
提交改动
推送到分支
创建 Pull Request

📄 许可证

Apache License

🙏 致谢

感谢所有游戏开发者的辛勤付出！

📞 联系方式

如有问题或建议，欢迎反馈！

🐙 GitHub: SinceraXY/GameHub
📧 Email: 2952671670@qq.com
💬 QQ: 2952671670

🎮 GameHub - 让游戏更有趣！

Made with ❤️ for gamers

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
.github		.github
docs		docs
games		games
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
PROJECT_SUMMARY.md		PROJECT_SUMMARY.md
QUICKSTART.md		QUICKSTART.md
README.md		README.md
README_EN.md		README_EN.md
index.html		index.html
robots.txt		robots.txt
script.js		script.js
sitemap.xml		sitemap.xml
style.css		style.css

Folders and files

Latest commit

History

Repository files navigation