Dungeon Escape

A lightweight, roguelike-inspired dungeon crawler that runs entirely in the browser. Find the key, unlock the exit, and descend as far as you can — built with plain HTML, CSS, and JavaScript, no frameworks or build tools required.

Project Overview

Dungeon Escape drops you into a handcrafted dungeon that reshuffles a little on every run: the key, the exit, the enemies, and the coins all move, and a handful of optional wall segments randomly open or close to keep the layout feeling fresh while staying familiar. Clear a floor by finding the key and reaching the unlocked exit, then descend to a harder floor. There's no save system and no accounts — every run starts clean from the title screen.

Features

• Semi-random dungeon — a fixed, hand-designed room layout with randomized key/exit/enemy/coin placement and optional wall segments (30% / 50% / 70% chance to appear) for run-to-run variety, while the overall map always stays fully solvable.
• Progressive difficulty — each floor adds more enemies and coins and gives Slimes a small speed and detection boost.
• Key & exit system — the exit stays locked (and visually distinct) until the key is collected, then pulses green once unlocked.
• Slime enemies — patrol near their spawn point, chase on sight, and deal contact damage on a cooldown so a single collision doesn't chain-hit you.
• Coins & stats — collectible coins tracked in the HUD alongside health and floor number.
• Full responsive controls — keyboard on desktop, an on-screen virtual joystick on touch devices.
• Clean flat visual style — everything is drawn on <canvas>, no image assets, no neon or glow effects.
• Start, pause, and game-over flow — name entry, pause menu, and an end-of-run summary with Restart and Main Menu options.

Controls

Desktop

Input	Action
W A S D	Move
Arrow Keys	Move
Esc	Pause / Resume

Mobile

Input	Action
Virtual joystick (bottom-left)	Move
Pause button (top-right, HUD)	Pause

How To Play

1. Enter your name on the start screen (or leave it blank to play as Explorer) and press Start Game.
2. Explore the dungeon and pick up the glowing amber key.
3. Once collected, the exit unlocks and turns green.
4. Reach the exit to advance to the next floor. Enemies, coins, and the key all respawn in new spots, and the floor gets a little tougher.
5. Avoid Slime contact — each hit costs health, with a brief invulnerability window afterward. Health reaching zero ends the run.
6. From the Game Over screen, Restart begins a fresh run at Floor 1, or Main Menu returns to the title screen.

Project Structure

Dungeon-Escape/
│
├── index.html            # Page structure: screens, HUD, canvas, joystick
│
├── assets/                # Reserved for any future non-gameplay assets
│
├── css/
│   └── style.css          # All styling — responsive, mobile-first
│
├── js/
│   ├── config.js           # Constants, color palette, difficulty curve, map data
│   ├── map.js               # Dungeon generation, collision grid, map rendering
│   ├── player.js            # Player state, movement, damage, rendering
│   ├── enemy.js              # Slime AI (patrol/chase), collision, rendering
│   ├── controls.js           # Keyboard input + virtual joystick
│   ├── ui.js                  # DOM/HUD/screen management
│   └── game.js                 # Main loop, state machine, collision resolution
│
└── README.md

Scripts are loaded as plain <script> tags (no modules, no bundler) so the project opens directly from index.html — locally via file:// or hosted as-is on GitHub Pages.

Customization

Most tuning lives in js/config.js:

• Colors — edit DE.CONFIG.COLORS to reskin the palette.
• Difficulty curve — edit getFloorDifficulty() to change how enemy count, coin count, enemy speed, and detection radius scale per floor.
• Player feel — DE.CONFIG.PLAYER controls move speed, max health, damage per hit, and invulnerability duration.
• Enemy behavior — DE.CONFIG.ENEMY controls Slime speed range, detection radius range, patrol roaming distance, and hit cooldown.
• Dungeon layout — DE.MAP_DATA in the same file defines the rooms, the fixed (always-open) corridors that guarantee the dungeon is always solvable, and the list of optional wall tiles with their appearance chance. Add more entries to optionalWalls for more variation, or edit the room rectangles to reshape the dungeon.

License

This project is provided as-is for personal and educational use. Feel free to fork, modify, and build on it.

Credits

Created by AzkiVIP .