A beautiful and cool HTML5 game collection homepage featuring 42 carefully categorized mini-games.
⚡ Quick Start | 📖 Documentation | 🚀 Deployment Guide | 🐛 Report Issue
-
Clone the project
git clone https://github.com/SinceraXY/GameHub.git cd GameHub -
Open the homepage
- Double-click
index.htmlfile, or - Use a local server (recommended):
# Python python -m http.server 8000 # Node.js npx http-server -p 8000
Then visit
http://localhost:8000 - Double-click
-
Start playing 🎮
- Browse 42 games
- Click any game card to start
📖 For more ways to run, see Quick Start Guide
For online deployment, refer to Deployment Guide, supporting:
- GitHub Pages (free)
- Netlify / Vercel
- Self-hosted servers
- ✨ Modern gradient UI design
- 🌈 Rich color combinations
- 💫 Smooth animations
- 🎭 Dynamic background effects
- 📂 7 major game categories
- 🔍 Real-time search functionality
- 🏷️ One-click category filtering
- 📊 Visual statistics
- 🚀 Play instantly, no download required
- 📱 Fully responsive design for all platforms
- ⚡ Fast loading
- 🎯 42 premium games
| Feature | Description |
|---|---|
| 🎮 42 Games | Carefully selected HTML5 games across 7 categories |
| 🚀 Instant Play | No installation needed, play directly in browser |
| 📱 Responsive | Perfect on desktop, tablet, and mobile |
| 🎨 Beautiful UI | Modern design with gradients and animations |
| 🔍 Smart Search | Real-time search to find games quickly |
| 🏷️ Category Filter | 7 game categories, one-click filtering |
| ⚡ Optimized | Lazy loading, animation optimization |
| 🎯 Easy Deploy | Support GitHub Pages and more |
GameHub/
├── index.html # Main page
├── style.css # Stylesheet
├── script.js # Interactive scripts
├── README.md # Documentation (Chinese)
├── README_EN.md # Documentation (English)
├── LICENSE # Apache 2.0 License
└── games/ # Games directory
├── Puzzle/ # Puzzle Games (8 games)
├── Action/ # Action Games (11 games)
├── Arcade/ # Arcade Games (8 games)
├── Board/ # Board Games (3 games)
├── Memory/ # Memory Games (4 games)
├── Typing/ # Typing Games (4 games)
└── Casual/ # Casual Games (4 games)
- Double-click
index.html - Browser will automatically open the homepage
- Start playing!
# Using Python
python -m http.server 8000
# Using Node.js (http-server)
npx http-server -p 8000
# Using VSCode Live Server
# Right-click index.html -> Open with Live ServerThen visit: http://localhost:8000
Logic thinking and strategic planning
- 2048 - Classic number merging puzzle
- Jigsaw Puzzle - Fun puzzle challenge
- Klotski - Sliding block puzzle
- Maze Escape - Maze escape adventure
- Minesweeper - Classic minesweeper
- Spot Difference - Find the differences
- Sudoku - Sudoku logic game
- Tilting Maze - Gravity maze
Fast reaction and hand-eye coordination
- Archery - Archery competition
- Breakout - Break bricks game
- Crossy Road - Road crossing challenge
- Emoji Catcher - Catch emojis
- Flappy Bird - Flying bird
- Fruit Slicer - Fruit ninja
- Insect Catch - Catch insects
- Piano Tiles - Don't tap the white tile
- Ping Pong - Table tennis
- Shape Clicker - Shape clicking
- Whack A Mole - Whack-a-mole
Classic games, nostalgic elements
- Bubble Shooter - Bubble shooter
- Candy Crush - Candy crush
- Jump Game - Jumping adventure
- Pac-Man - Classic Pac-Man
- Snake - Snake game
- Space Invaders - Space invaders
- Tetris - Tetris
- Tower Blocks - Tower blocks
Strategy and rule-based games
- Gomoku - Five in a row
- Rock Paper Scissors - Rock paper scissors
- Tic Tac Toe - Tic-tac-toe
Memory and observation training
- Color Match - Color matching
- Match Pairs - Pair matching
- Memory Card - Memory card flip
- Simon Says - Simon says
Improve typing speed and accuracy
- Hangman - Word guessing
- Speed Typing - Speed typing practice
- Type Master - Typing master
- Typing Speed Challenge - Typing challenge
Relaxing and fun
- Dice Roll Simulator - Dice simulator
- Quiz - Knowledge quiz
- Speak Number Guessing - Voice number guessing
- Type Number Guessing - Type number guessing
- HTML5 - Semantic structure
- CSS3 - Modern styling
- Flexbox / Grid layout
- CSS Variables
- Animations and transitions
- Gradient effects
- Vanilla JavaScript - Pure JS
- DOM manipulation
- Event handling
- Intersection Observer
- Dynamic rendering
| Browser | Version | Support |
|---|---|---|
| Chrome | 90+ | ✅ |
| Firefox | 88+ | ✅ |
| Safari | 14+ | ✅ |
| Edge | 90+ | ✅ |
| Opera | 76+ | ✅ |
- ✅ Initial release
- ✅ 42 games fully included
- ✅ 7 category system
- ✅ Search and filter functionality
- ✅ Responsive design
- ✅ Beautiful UI
- ✅ Animation effects
- ✅ Complete documentation and deployment guides
- Add more games (target: 100+)
- User account system
- Game favorites feature
- Game ratings and reviews
- Multi-language support (Japanese, etc.)
- Dark/Light theme toggle
- PWA support (offline games)
- Game leaderboards
- Social sharing
- Game recommendation algorithm
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
For more details, see CONTRIBUTING.md
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Thanks to all game developers for their hard work!
If you have any questions or suggestions, feel free to reach out!
- 🐙 GitHub: SinceraXY/GameHub
- 📧 Email: 2952671670@qq.com
- 💬 QQ: 2952671670
🎮 GameHub - Make Gaming More Fun!
Made with ❤️ for gamers