AI Dungeon Master - Cinematic D&D Engine

AI game engine where the model acts as a living Game Director, controlling narrative, combat, and visual effects through structured outputs.

Role: Full Stack Developer. Team: Individual. Status: Live. Year: 2025.

Overview

AI Dungeon Master is an immersive D&D-style game engine where the AI model acts as a living Game Director. Unlike typical chatbot games, the AI returns structured NARRATIVE + STATE_JSON outputs that directly control scene transitions, quest progression, and visual effects.

Architecture:

  • Frontend: Vanilla JavaScript with CSS particle systems and animations
  • Audio: Web Audio API for procedural atmospheric soundscapes
  • Voice: Web Speech API for voice commands and text-to-speech narration
  • AI: Vertex AI Gemini with structured JSON output for game state

Why This Architecture:

  • Structured outputs enable deterministic game state management
  • Procedural audio eliminates need for large asset libraries
  • Voice I/O creates immersive hands-free gameplay
  • CSS-based effects work across all browsers without WebGL

Key features

  • AI Game Director with structured NARRATIVE + STATE_JSON outputs
  • 6 character races and classes with unique abilities
  • Dynamic combat system with visual d20 dice rolls
  • Procedural audio via Web Audio API (ambient, combat, exploration)
  • Voice input for commands and text-to-speech narration
  • CSS particle systems for visual effects (magic, weather)
  • Persistent save/load functionality
  • Scene transitions with cinematic effects

Technical details

  • Frontend: Vanilla JavaScript, CSS animations and particles
  • Audio: Web Audio API with oscillators for procedural sound
  • Voice: Web Speech API (recognition + synthesis)
  • AI: Vertex AI Gemini 2.0 Flash with JSON mode
  • State: Structured game state with deterministic rendering
  • Deployment: Vercel with serverless API routes

Challenges

  • Designing prompts that produce reliably parseable structured outputs
  • Synchronizing AI narrative with real-time visual and audio effects
  • Creating immersive procedural audio without pre-recorded assets
  • Handling voice recognition in noisy environments

Tags: JavaScript, Node.js, Vertex AI, Web Audio API, Web Speech API