Fighter's Realm

Inspiration

The inspiration for Fighter's Realm came from classic 2D fighting games and modern indie titles that prove browser-based games can rival native applications. I wanted to create something that would:

What it does

Real-time Combat System: Fluid fighting mechanics with combos, special moves, and strategic timing Adventure Mode: Open-world exploration with interactive buildings, NPCs, and dynamic environments Survival Mode: Wave-based combat in "The Forgotten Courtyard" arena with escalating difficulty Character Progression: 6 unique fighter classes with distinct abilities and upgrade paths Equipment System: Weapons, armor, and consumables with rarity-based progression Advanced Features AI-Driven Enemies: Sophisticated enemy behavior with pursuit, attack, and retreat patterns Dynamic World: Day/night cycles, weather systems, and multiple biomes (forest, snow, plains) Interactive Buildings: Enterable structures with unique interiors and collectible items XP Collection System: Visual orbs scattered throughout the world for character advancement Premium Integration: Stripe-powered monetization with exclusive characters and coin packages

How we built it

Frontend Stack: React 18 with TypeScript for type-safe component development Tailwind CSS for responsive, utility-first styling Zustand for lightweight state management Lucide React for consistent iconography Backend Infrastructure: Supabase for authentication, database, and edge functions Stripe for secure payment processing and subscription management Row Level Security for data protection and user isolation

Challenges we ran into

Images not displaying due to incorrect file paths and leading slash issues. Enemies appearing invisible or too small to interact with effectively.Creating believable enemy behavior without overwhelming performance.

Accomplishments that we're proud of

Dual Game Modes (Adventure + Survival) offering different experiences Premium Character Integration with balanced gameplay mechanics Dynamic World Systems including weather, day/night cycles, and interactive environments Visual Polish with particle effects, damage numbers, and micro-interactions

What we learned

Real-time Systems programming in JavaScript/TypeScript AI State Machines for enemy behavior Collision Detection and spatial optimization Visual Effects and animation systems

What's next for Fighter's Realm

Multiplayer Support with real-time synchronization using Supabase Realtime Mobile Optimization with touch controls and responsive layouts Sound System with background music and sound effects Save System with cloud synchronization across devices

Built With

• react
• typescript
• vite