How to Build a Dungeon Crawler Game with Lovable

Build a top-down dungeon crawler game in the browser using React and TypeScript.

Dungeon generation: Procedurally generate a dungeon as a grid (50x50 tiles). Use a room-and-corridor algorithm: place 6-10 rectangular rooms (sizes between 5x5 and 10x10 tiles) at random non-overlapping positions, then connect them with L-shaped corridors. Tile types: floor (walkable), wall (blocked), corridor (walkable), stairs-down (leads to next floor).

Player: Render the player as a colored character icon on the grid. Movement with arrow keys or WASD, one tile per keypress. The player has stats: HP (start 100), Attack (start 10), Defense (start 5). Show stats in a HUD panel on the right side of the screen.

Enemies: Spawn 3-6 enemies per room. Enemy types:
- Rat: 20 HP, 5 Attack, 2 Defense (floor 1-2)
- Skeleton: 40 HP, 10 Attack, 5 Defense (floor 2-3)
- Demon: 70 HP, 18 Attack, 8 Defense (floor 3+)
When the player moves onto an enemy tile, auto-combat resolves: both deal their Attack minus opponent's Defense as damage (minimum 1). Show a combat log in the HUD panel.

Items: Scatter items in rooms:
- Health Potion (red): restores 30 HP. Auto-pickup, goes to inventory.
- Sword upgrade (silver): +5 Attack permanently. Auto-pickup with notification.
- Shield upgrade (blue): +3 Defense permanently. Auto-pickup with notification.
- Key (gold): required to unlock the stairs to the next floor.
Show inventory slots in the HUD.

Fog of war: Tiles more than 5 tiles from the player should be hidden (black). Tiles the player has visited but moved away from should be dimmed (50% opacity). Only fully visible tiles within 5-tile radius of the player. This creates exploration tension.

Floors: Start on Floor 1. Finding the key and reaching the stairs generates a new floor. Each floor increases enemy count by 2 and spawns harder enemy types. Show "Floor X" in the HUD. Generate a completely new dungeon layout for each floor.

Visual style: Dark tile-based look. Floor tiles are dark gray (#333), walls are very dark (#111), the player is a bright green circle, enemies are red shapes, items are colored dots. The visible area should have a subtle radial gradient vignette effect from the player position.

Camera: The viewport should follow the player, keeping them centered on screen. Show a 20x15 tile viewport.

Mobile: Add on-screen arrow buttons in the bottom-left corner for touch controls.

Rebalance combat. When the player attacks an enemy, show a floating damage number above the enemy that fades out over 500ms. When the player takes damage, flash the HUD HP bar red briefly. If the player's HP drops to 0, show a "You Died" overlay with stats: floor reached, enemies killed, and a "Try Again" button that restarts from floor 1. Add a health regeneration mechanic: the player recovers 2 HP for every 10 steps taken outside of combat. Show kill count in the HUD.

Improve the item system. When picking up any item, show a toast notification at the top of the screen with the item name and its effect (e.g., "Sword +5 Attack!" in gold text). Add a new item type: Armor (purple) that gives +5 Defense. Add another item: Magic Scroll (cyan) that deals 30 damage to all enemies in the current room when used from inventory. The inventory panel should show item icons in a grid with item names on hover. Health Potions should be usable by clicking them in inventory — add a "Use" prompt.

Add a minimap in the top-right corner of the screen. The minimap should show a simplified version of the explored dungeon — rooms as small rectangles, corridors as thin lines, the player as a blinking green dot, the stairs as a yellow dot, and unexplored areas as black. The minimap should be about 150x150px and semi-transparent (80% opacity). Add a toggle button to show/hide the minimap. Update the minimap in real-time as the player explores.

Add sound effects and ambient audio. Play a footstep sound on each move (alternate between two slightly different step sounds). Play a sword clash sound during combat. Play a crunch sound when an enemy dies. Play a sparkle sound when picking up items. Play an ominous deep drone as ambient background that gets slightly louder on deeper floors. Play a dramatic staircase descent sound when moving to a new floor. Add a stone door opening sound when entering a new room for the first time. Include a mute toggle in the HUD.

Optimize for mobile devices. The on-screen d-pad arrows should be 56px buttons in the bottom-left corner with clear arrow icons. The HUD panel should collapse into a thin horizontal bar at the top on mobile showing just HP, Attack, Defense, Floor, and Key status as icons with numbers. The inventory should open as a full-screen overlay when tapping a backpack icon. The minimap should move to the top-right and shrink to 100x100px on mobile. The game viewport should fill the screen above the controls. Prevent all default touch behaviors (scrolling, zooming) on the game area.

Add a difficulty selection on the start screen. Easy: player starts with 150 HP, enemies deal 50% damage, more health potions spawn. Normal: default settings. Hard: player starts with 80 HP, enemies have 25% more stats, fewer items spawn, fog of war radius is only 4 tiles. Show the difficulty on the game over screen.

Add a run timer that starts when the player begins floor 1 and shows elapsed time in the HUD as minutes:seconds. On the game over screen, show total time survived. Track the deepest floor reached and the time it took as a personal best in localStorage. Show personal best on the start screen.

Add a smooth 150ms sliding animation when the player moves between tiles instead of instant teleportation. Add a screen flash when taking damage. Enemies should have a subtle idle bobbing animation. When an enemy dies, it should shrink and fade out over 300ms. Add a torch flicker effect — the fog of war boundary should shimmer slightly, simulating flickering torchlight.

Track run history in localStorage: deepest floor, enemies killed, items collected, and total time for each run. Show a "Run History" button on the start screen that displays the last 10 runs in a table sorted by deepest floor. Highlight the best run in gold. Add a "Clear History" button.

On every 3rd floor (3, 6, 9...), generate a large boss room (15x15) in addition to normal rooms. The boss room contains a single powerful boss enemy: Floor 3 boss has 150 HP, 20 Attack, 10 Defense. Floor 6 boss has 300 HP, 30 Attack, 15 Defense. The boss should be rendered as a larger icon (2x2 tiles). Defeating a boss drops a unique item that grants +10 to a random stat. Show a "Boss Floor!" warning when entering these floors.