Dungeon-run

• 

  Front page

• 

  equipment selection(with active inventory system)

• 

  skills selection

• 

  Exercise page(mediapipe)

• 

  Exercise selection

• 

  Level selector(Forest-ruins)

• 

  Level selector(Ice-temple)

• 

  Level selector(Lava-caverns)

• 

  Level selector(Shadow-dungeon)

• 

  Forest-ruins map

• 

  Lava-caverns map(Crumbling platform: User can not move backwards to previous location)

• 

  Boss fight at lava-caverns

• 

  Shadow-dungeon map(Cat & mouse: Enemies move adaptively to the users movement)

• 

  Fight enemy at shadow-dungeon

• 

  ice-temple(Slippery floor: User moves bi-directionally to the nearest boundary)

Inspiration

As both gaming and fitness enthusiasts, we decided to incorporate the two into an app called Dungeon Run. In Dungeon Run, we aim to gamify the fitness process, making it appealing to people of all ages.

What it does

Essentially the app is divided into 2 parts - The fitness and game aspect. The fitness aspect consists of a variety of basic exercises for the user to choose from such as push-ups, pull-ups and running, each of which translates to significant buffs to the users character, which are important for the dungeon trials (game). The fitness aspect offers video support, meaning we implemented the use of AI to track repititions executed. The other aspect of the app - the game aspect - resembles a pokemon-like combat system, with the probability of dropping loot which can aid users in battle.

How we built it

We took advantage of Next.js and React for a fast, responsive frontend experience. To handle the "persistent world" feel without a backend, we utilized:

LocalStorage API: To sync stats (Strength, Agility, Level, XP) and inventory across the Workout, Equipment, and Dungeon pages.

CSS Tooltips & Keyframes: For immersive 8-bit UI elements and "Fog of War" effects in the Shadow Dungeon.

React Memo & UseEffect: To manage complex game states, such as the "Save Loop" protection and AI pursuit logic for stalking enemies.

Deterministic Map Generation: Using 2D arrays to define biome layouts (Lava Caverns and Shadow Dungeons).

Challenges we ran into

The biggest technical hurdle was State Synchronization. We encountered "Save Loops" where the equipment page would overwrite new loot with empty data before the storage could load. We solved this by implementing an isLoaded gatekeeper. Additionally, creating a Stalking AI for the Shadow Biome required careful coordinate math to ensure enemies moved toward the player without clipping through walls ("T" tiles).

Accomplishments that we're proud of

The Workout-to-Game Loop: Successfully linking real-life stat increases (Strength/Agility) to in-game damage and mana formulas.

Biome Variety: Creating distinct mechanics for different areas, such as the "Crumbling Floor" in the Lava biome and the "Stalking Pursuit" in the Shadow biome.

Inventory System: Developing a drag-and-drop equipment system that calculates stats dynamically based on the items equipped.

What we learned

We learned a great deal about React Lifecycle management, specifically how to handle side effects when dealing with browser storage. We also gained experience in Game Balance—ensuring that a player who works out in real life feels "Powerful" in the game without making the trials too easy.

What's next for Dungeon-run

Co-op features: Users can hop in with other users in aid of battle. More biomes: Wider variety of biomes and enemies. Robust exercise system: Implementation of 1-5 day training (with extra STRENGTH and AGILITY stats gain)

Built With

• javascript
• mediapipe
• openai
• typescript