🎮 GameHub

---

🧭 Table of Contents

• 💡 About GameHub
• 🚀 Demo
• ✨ Features
• 🎮 Games
• 🛠️ Tech Stack
• 💡 Prerequisites
• 🚀 Quick Start
• 📁 Project Structure
• 📸 Screenshots
• 🔧 Adding New Games
• 🌟 Contributing
• 📱 Browser Support
• 📄 License
• 🙏 Acknowledgments
• ✨ Contributors

---

💡 About GameHub

GameHub is a free, open-source collection of classic browser games designed to bring nostalgia, fun, and learning together in one place. Built with modern web technologies and a focus on simplicity, GameHub offers smooth gameplay, responsive design, and clean code that makes it easy for developers to explore, learn, and contribute.

🎯 Our Mission

• Nostalgia Meets Modern Web: Recreate beloved classic games using cutting-edge web technologies
• Learn by Playing: Provide a codebase that's educational, well-documented, and beginner-friendly
• Open Source First: Foster a welcoming community where developers can contribute and grow
• Performance & Accessibility: Deliver fast, lightweight experiences that work seamlessly across all devices

🌟 Why GameHub?

In an era of complex game engines and heavy frameworks, GameHub proves that amazing gaming experiences can be built with vanilla JavaScript, thoughtful design, and attention to performance. Whether you're a student learning web development, a developer looking to contribute to open source, or simply someone who loves classic games, GameHub welcomes you.

🚀 Future Vision

• Expand the game library with community contributions
• Add multiplayer capabilities for real-time competition
• Implement achievement systems and global leaderboards
• Create educational tutorials for each game's implementation
• Build a thriving community of game developers and enthusiasts

---

🚀 Demo

• Play Now
• Mobile Demo

---

✨ Features

• 5 Classic Games: Tic Tac Toe, Snake, Simon Says, Memory Flip, Rock Paper Scissors
• Fully Responsive: Optimized for desktop, tablet, and mobile
• Modern Glassmorphism UI: Built using Tailwind CSS and DaisyUI
• Fast & Lightweight: Pure vanilla JS, zero frameworks
• Score Persistence: Progress saved in LocalStorage
• Real-time Search: Instantly filter and find games
• Smooth Animations: AOS.js and Animate.css integration

---

🎮 Games

Game	Description	Features
Rock Paper Scissors	Classic hand game	Win/loss stats, animations
2048 Game	Tile sliding number puzzle	Score tracking, smooth animations
Sudoku Puzzle	Number placement puzzle	Multiple difficulties, hints
Minesweeper	Mine avoidance logic game	Flagging cells, timer
Breakout	Brick-breaking arcade game	Paddle control, increasing difficulty
Balloon Popper	Pop balloons before time runs out	Timer-based gameplay, score system
Boom Runner	Dodge bombs and survive	Reflex-based controls, speed increase
Brick Breaker	Break bricks using a paddle	Power-ups, levels
Bubble Shooter	Match and pop colored bubbles	Aim mechanics, combo scoring
Candy Match Mania	Match candies to score points	Chain reactions, colorful UI
Code Unlock	Crack codes using logic	Pattern recognition, increasing difficulty
Color Grid	Color-matching puzzle	Visual logic, timed challenges
Dodge Square	Avoid obstacles and survive	Fast-paced movement, reflex testing
Firefly Flow	Guide fireflies through patterns	Precision control, calming visuals
Flappy Block	Navigate obstacles by flapping	Score tracking, increasing difficulty
Freeze Frame	Stop motion at the right moment	Timing-based gameplay
Fruit Slice	Slice fruits with precision	Swipe controls, combo points
Glow Chain	Trigger glowing chain reactions	Visual effects, chain mechanics
Glow Drops	Tap glowing drops before disappearing	Speed-based taps, score counter
Glow Tap	Tap glowing circles in time	Timing accuracy, reflex training
Gravity Flip Ball	Flip gravity to move the ball	Physics-based gameplay, level progression
Hangman Hero	Guess the hidden words	Vocabulary building, hint system
Jump Counter	Jump to increase your score	Score tracking, timing precision
Jump Tag	Tag targets by jumping	Movement accuracy, reflex-based
Logic Path	Guide the ball using logic	Puzzle-solving, progressive levels
Memory Blink	Remember blinking patterns	Memory training, increasing speed
Pattern Memory	Remember and repeat patterns	Sequence memory, difficulty scaling
Pipe Twister	Rotate pipes to connect flows	Logic rotation puzzles
Reaction Speed Test	Test your reaction speed	Tap-time measurement, instant feedback
Sand Draw	Draw freely in virtual sand	Relaxing UI, creative drawing
Sliding Puzzle	Slide blocks to complete image	Logical movement, image puzzles
Speed Tap Grid	Tap targets quickly on a grid	Reflex speed, time challenge
Symbol Swap	Swap symbols to match rows	Pattern logic, strategic thinking
Tap Counter	Tap repeatedly to score	Speed tracking, real-time counter
Tetris	Classic falling block puzzle	Line clearing, increasing speed
Tower of Hanoi	Solve disk puzzle in minimum moves	Algorithmic thinking, step counter
Typing Sprint	Type words quickly to score	Speed tracking, accuracy scoring
Vortex Jump	Jump through twisting vortex paths	Precision jumps, reaction timing
Word Chain	Form chains of related words	Vocabulary skills, word logic
Word Scramble	Unscramble letters to form words	Time-based challenges, hints
Typing Speed Test	Measure typing speed and accuracy	WPM tracking, clean UI

---

🛠️ Tech Stack

• Frontend: HTML5, CSS3, JavaScript
• Styling: Tailwind CSS, DaisyUI
• Animations: AOS.js, Animate.css
• Icons: Font Awesome
• Storage: LocalStorage API

---

💡 Prerequisites

• Modern web browser: Chrome, Firefox, Safari, or Edge

---

🚀 Quick Start

Follow these steps to run the GameHub Django project locally:

1️⃣ Clone the Repository

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

2️⃣ Install Django

pip install django

3️⃣ Navigate to the Project Folder

Move into the folder where manage.py is located:

cd gamehub_project

4️⃣ Run the Development Server

python manage.py runserver

5️⃣ Open in Browser

Visit:

http://127.0.0.1:8000/

Your GameHub website will now be live locally 🎮🚀

---

📁 Project Structure

GameHub/
├── gamehub_project/
│   ├── accounts/                   # Authentication app
│   │   ├── migrations/
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── models.py
│   │   ├── urls.py
│   │   └── views.py
│   │
│   ├── gamehub_project/            # Core Django settings
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   │
│   ├── static/                     # Static files (CSS, JS, Images)
│   │   ├── assets/                 # Game thumbnails & icons
│   │   ├── games/                  # HTML files for games
│   │   ├── scripts/                # All game logic JS files
│   │   │   ├── snake.js
│   │   │   ├── simon.js
│   │   │   ├── rps.js
│   │   │   ├── sudoku.js
│   │   │   ├── memory.js
│   │   │   ├── breakout.js
│   │   │   ├── minesweeper.js
│   │   │   ├── tic-tac-toe.js
│   │   │   ├── audio-system.js
│   │   │   └── audio-ui.js
│   │   ├── main.js
│   │   ├── script1.js
│   │   └── style.css
│   │
│   ├── staticfiles/                # Auto-generated (ignored in git)
│   │
│   ├── templates/                  # Django HTML templates
│   │   ├── index.html              # Homepage
│   │   └── login.html              # Authentication page
│   │
│   ├── db.sqlite3                  # Local database
│   └── manage.py
│
├── .gitignore
├── LICENSE
├── CODE_OF_CONDUCT.md
└── README.md

---

📸 Screenshots

Homepage

Games Collection

---

🔧 Adding New Games

1. Add a new HTML file in static/games/
2. Write the game's JS in static/scripts/
3. Register your game in the games array in static/main.js:

{
    id: 'your-game',
    title: 'Your Game',
    description: 'Game description',
    image: 'path/to/image',
    file: 'games/your-game.html',
    category: 'arcade'
}

---

🌟 Contributing

We welcome contributions from developers of all skill levels! Whether you're fixing bugs, adding new games, improving documentation, or suggesting features, your input is valuable.

How to Contribute

• Fork the repository
• Create a new branch: git checkout -b feature/YourFeature
• Commit & push:

  git commit -m "Add: YourFeature"
  git push origin feature/YourFeature

• Open a Pull Request

Check out our Contributing Guidelines for more details!

---

📱 Browser Support

Browser	Supported
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
Mobile	✅

---

📄 License

Licensed under the MIT License.

---

🙏 Acknowledgments

• Tailwind CSS
• DaisyUI
• AOS.js
• Font Awesome

---

✨ Contributors

Thanks to all the wonderful contributors 💖

See full list of contributor contributions: Contribution Graph

---

⭐ Star this repo • 🐛 Report Bug • ✨ Request Feature

Made with ❤️ by Kaif Ansari