Nebula Runner 🌌 Game 🎮

---

An Endless runner game featuring advanced physics, power ups, combo system, and particle effects 🚀 Built with Next.js 15, TypeScript, Canvas API, and Web Audio API with professional architecture and 60fps performance.

---

✨ Features

🎮 Gameplay

• Endless Runner with procedurally generated obstacles
• Combo System - Chain dodges for up to 5x score multiplier
• 3 Power Ups - Shield, Slow Motion, Invincibility
• Score Boosters - Collect for +25 points (affected by combo)
• Progressive Difficulty - Dynamic spawn rates and speeds
• High Score System - Persistent localStorage tracking

🪐 Obstacles

• Asteroids - Procedurally generated rock shapes
• Debris - Fast-moving square obstacles
• Black Holes - Gravity physics that pull your ship

🎨 Visual Effects

• Particle System - 30+ particles on collision/collection
• Warp Speed Stars - Accelerate based on score
• Dynamic Animations - Pulsing, rotating, glowing effects
• Power-Up UI - Real-time progress bars

🔊 Audio

• Web Audio API - Procedural sound generation
• 4 Sound Effects - Collect, collision, power up, combo
• Volume Controls - Separate music and SFX

🏗️ Architecture

• Enterprise-Level Code - Modular, scalable, maintainable
• TypeScript Strict Mode - Full type safety
• Custom Hooks - Reusable game engine logic
• Performance Optimized - 60fps with ref based state
• Configuration-Driven - All constants eternalized

---

🛠️ Getting Started

# Clone the repository
git clone https://github.com/MuhammadTanveerAbbas/nebula-runner.git
cd nebula-runner

# Install dependencies
npm install

# Run development server
npm run dev

---

📁 Project Structure

src/
├── lib/game/          # Game engine core
│   ├── constants.ts   # Configuration
│   ├── types.ts       # TypeScript types
│   ├── audio.ts       # Audio manager
│   ├── storage.ts     # LocalStorage
│   └── utils.ts       # Utilities
├── hooks/
│   └── useGameEngine.ts  # Game state hook
├── components/
│   ├── GameCanvas.tsx    # Main game
│   ├── Hero.tsx          # Landing page
│   ├── CTA.tsx           # Buttons
│   └── Stats.tsx         # Statistics
└── app/
    ├── page.tsx          # Main page
    └── layout.tsx        # Root layout

---

🎯 Game Controls

• Desktop: Move mouse to control ship
• Mobile: Touch and drag to control ship
• Objective: Dodge obstacles, collect power ups, maximize combo

---

🏆 Scoring System

• Dodge Obstacle: +1 point × combo multiplier
• Collect Booster: +25 points × combo multiplier
• Combo Multiplier: +0.5x per dodge (max 5x)
• Combo Timeout: 3 seconds without dodging

---

🔧 Configuration

All game parameters are in src/lib/game/constants.ts:

• Spawn rates
• Speeds
• Power up durations
• Particle counts
• Audio volumes

---

📊 Statistics

The game tracks:

• High score (persistent)
• Total games played
• Average score
• Stored in localStorage

---

🚀 Performance

• 60 FPS gameplay
• < 100ms input latency
• Optimized collision detection
• Efficient particle system
• No memory leaks

---

🧪 Tech Stack

• Next.js 15 - React framework with App Router
• TypeScript - Type safe development
• Tailwind CSS - Utility first styling
• Canvas API - 2D game rendering
• Web Audio API - Sound generation
• LocalStorage - Data persistence

---

📜 License

MIT License

---

Made with ❤️ by Muhammad Tanveer Abbas