Skip to content

Latest commit

 

History

History
319 lines (234 loc) · 8.23 KB

File metadata and controls

319 lines (234 loc) · 8.23 KB

🎮 GameHub - Premium Game Collection

GitHub stars GitHub forks GitHub issues GitHub license PRs Welcome

中文 | English

A beautiful and cool HTML5 game collection homepage featuring 42 carefully categorized mini-games.

⚡ Quick Start | 📖 Documentation | 🚀 Deployment Guide | 🐛 Report Issue


🎯 How to Run

Local Quick Start

  1. Clone the project

    git clone https://github.com/SinceraXY/GameHub.git
    cd GameHub
  2. Open the homepage

    • Double-click index.html file, or
    • Use a local server (recommended):
    # Python
    python -m http.server 8000
    
    # Node.js
    npx http-server -p 8000

    Then visit http://localhost:8000

  3. Start playing 🎮

    • Browse 42 games
    • Click any game card to start

📖 For more ways to run, see Quick Start Guide

Online Deployment

For online deployment, refer to Deployment Guide, supporting:

  • GitHub Pages (free)
  • Netlify / Vercel
  • Self-hosted servers

🌟 Features

🎨 Beautiful Design

  • ✨ Modern gradient UI design
  • 🌈 Rich color combinations
  • 💫 Smooth animations
  • 🎭 Dynamic background effects

🎯 Smart Categorization

  • 📂 7 major game categories
  • 🔍 Real-time search functionality
  • 🏷️ One-click category filtering
  • 📊 Visual statistics

🎮 Gaming Experience

  • 🚀 Play instantly, no download required
  • 📱 Fully responsive design for all platforms
  • ⚡ Fast loading
  • 🎯 42 premium games

🎯 Key Highlights

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

📁 Project Structure

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)

🚀 Quick Start

Method 1: Direct Open (Recommended)

  1. Double-click index.html
  2. Browser will automatically open the homepage
  3. Start playing!

Method 2: Local Server

# 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 Server

Then visit: http://localhost:8000


🎮 Game Categories

🧩 Puzzle (8 Games)

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

⚡ Action (11 Games)

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

🕹️ Arcade (8 Games)

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

♟️ Board (3 Games)

Strategy and rule-based games

  • Gomoku - Five in a row
  • Rock Paper Scissors - Rock paper scissors
  • Tic Tac Toe - Tic-tac-toe

🧠 Memory (4 Games)

Memory and observation training

  • Color Match - Color matching
  • Match Pairs - Pair matching
  • Memory Card - Memory card flip
  • Simon Says - Simon says

⌨️ Typing (4 Games)

Improve typing speed and accuracy

  • Hangman - Word guessing
  • Speed Typing - Speed typing practice
  • Type Master - Typing master
  • Typing Speed Challenge - Typing challenge

🎲 Casual (4 Games)

Relaxing and fun

  • Dice Roll Simulator - Dice simulator
  • Quiz - Knowledge quiz
  • Speak Number Guessing - Voice number guessing
  • Type Number Guessing - Type number guessing

🛠️ Tech Stack

  • 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 Compatibility

Browser Version Support
Chrome 90+
Firefox 88+
Safari 14+
Edge 90+
Opera 76+

📝 Changelog

v1.0.0 (2025-10-28)

  • ✅ Initial release
  • ✅ 42 games fully included
  • ✅ 7 category system
  • ✅ Search and filter functionality
  • ✅ Responsive design
  • ✅ Beautiful UI
  • ✅ Animation effects
  • ✅ Complete documentation and deployment guides

🗺️ Roadmap

  • 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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

For more details, see CONTRIBUTING.md


📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.


🙏 Acknowledgments

Thanks to all game developers for their hard work!


📞 Contact

If you have any questions or suggestions, feel free to reach out!


⭐ Star History

Star History Chart


🎮 GameHub - Make Gaming More Fun!

Made with ❤️ for gamers