Dungeon Mode Kit - Embedding Guide

There are several ways to embed the game with a specific prototype:

Method 1: URL Parameter (for iframes)

Add ?prototype=name to the URL:

<iframe
    src="https://wileywiggins.com/dungeonkit/?prototype=labyrinth"
    width="800"
    height="600"
></iframe>

Direct link example: index.html?prototype=labyrinth

Method 2: Data Attribute (for inline embeds)

Set data-prototype on the game container:

<div id="game" data-prototype="labyrinth"></div>

<!-- Load scripts -->
<script src="lib/rot.js"></script>
<script src="lib/pixi.min.js"></script>
<script src="lib/tweenjs.js"></script>
<script src="lib/howler.js"></script>
<script src="globals.js"></script>
<script src="lighting.js"></script>
<script src="sound.js"></script>
<script src="interface.js"></script>
<script src="input.js"></script>
<script src="engine.js"></script>

<script>
    initializeGame();
</script>

Method 3: Global Config Object

Define window.DUNGEON_CONFIG before loading the engine:

<script>
    window.DUNGEON_CONFIG = {
        prototype: 'labyrinth'
    };
</script>

<div id="game"></div>

<!-- Load scripts... -->
<script src="engine.js"></script>

<script>
    initializeGame();
</script>

Priority Order

When multiple methods are used, the prototype is selected in this order:

  1. URL parameter - Highest priority (allows overriding for testing)
  2. Data attribute - Good for static embeds
  3. Global config - Good for programmatic control
  4. Default - Falls back to 'default' prototype

Available Prototypes

Add new prototypes in the /prototypes/ directory.

Minimal Embed Template

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Dungeon Game</title>
    <link rel="stylesheet" href="assets/main.css">
</head>
<body>
    <div id="game" data-prototype="labyrinth"></div>

    <script src="lib/rot.js"></script>
    <script src="lib/pixi.min.js"></script>
    <script src="lib/tweenjs.js"></script>
    <script src="lib/howler.js"></script>
    <script src="globals.js"></script>
    <script src="lighting.js"></script>
    <script src="sound.js"></script>
    <script src="interface.js"></script>
    <script src="input.js"></script>
    <script src="engine.js"></script>

    <script>
        window.addEventListener('load', () => initializeGame());
    </script>
</body>
</html>