Header image for RPG HTML Game

RPG HTML Game

Prompt

Act as an expert frontend web game developer. Create a complete, fully playable, and robust retro Arcade RPG game contained entirely within a single, standalone HTML file (including all HTML, CSS, and JavaScript). The game must feature a wizard exploring a multi-level dungeon, fighting monsters. It must run immediately when opened in a browser with no external assets or dependencies. ### 1. Visuals & Rendering - Do NOT use external image URLs. Use HTML5 Canvas or inline SVG/CSS/Emoji rendering to create distinct, colorful, and recognizable graphical characters (e.g., a distinct sprite or styled token for the Wizard, different colors/shapes for monsters, walls, and floors). ### 2. Game Style & Turn-Based Core - **Turn-Based Rogue-like Mechanics:** The game is turn-based, but moves fast like an arcade game. The enemies only take their turn (move or attack) immediately after the player performs an action (moves, casts a spell, or passes a turn). - **Controls:** Use WASD or Arrow keys for 4-directional grid movement. ### 3. Combat & Wizard Mechanics - The player is a Wizard with a Health Pool (HP) and Mana Pool (MP). - **Basic Attack:** Bumping into an enemy attacks them. - **Spellcasting:** Implement at least two distinct magic spells mapped to hotkeys (e.g., '1' for a ranged Fireball that costs MP, '2' for a self-heal or area-of-effect spell). - Include combat log text on the screen showing damage dealt/taken (e.g., "Wizard casts Fireball! Goblin takes 10 damage"). ### 4. Enemy Intelligence & Progression - **AI:** Enemies should utilize a basic pathfinding algorithm (like Manhattan distance) to actively track, chase, and corner the player once the player enters their line of sight. - **Progression:** The dungeon must have at least 3 distinct levels, ending in a final Boss fight. Clearing a level requires finding the stairs to the next floor. Monsters should get progressively tougher. ### 5. UI & Polish - Include a sleek, retro arcade-style HUD overlay showing: Current Level, Player HP/MP bars, and Score/XP. - Include a simple Title Screen with a "Start Game" button, a "Game Over" screen, and a "Victory" screen with a brief narrative conclusion of the wizard's quest. ### 6. Code Constraints - Write clean, modular, and well-commented JavaScript. - Ensure all game states (Start, Playing, Game Over, Victory) transition smoothly without breaking. - Ensure the code is complete. Do not use placeholders like "// implement combat here". Write the full, functional logic.

A system prompt was added to support web rendering