Embedded Micro Generators for Dungeons & Dragons Blogs

(If you want to read this post with a slightly more readable presentation, go here.)

JDJarvis over at Aeons & Augauries inspired me to write this with his little generators like the Foul Tomes of Carcosa.

You can include generated content in you blog posts by adding a script like the ones below. Put the code into your post using your blog editor’s text/HTML mode (on Blogger, click the “HTML” button next to the “Compose” button). Each example is entirely self-contained. Cut, paste, and tinker!

d20 Example

Here we click a button to generate a random number.

The Code for d20:

<script>
function roll20() {
    var min = 1;
    var max = 20;
    var roll = Math.floor(Math.random() * (max - min + 1)) + min;
    var outputSpan = document.getElementById("d20result");
    outputSpan.innerHTML = roll;
}
</script>
<div>
<button onclick="roll20();">d20</button>
<span id="d20result"></span>
</div>

Magic Tower Example

Here we combine random selections from various lists, and do it without a button.

Click this paragraph to generate a Magic Tower (then click it again to generate another).

<script>
function generateMagicTower() {
    function arnd(a) {
        // Return random element of array a.
        var i = Math.floor(Math.random() * (a.length));
        if (typeof a[i] === 'function') {
            return a[i]();
        }   
        return a[i];
    }
    var colors = ["Red", "Black", "White", "Gray", "Pearlescent", "Lurid", "Hoary"];
    var structures = ["Tower", "Spire", "Turret", "Belfry", "Citadel", "Seculsium"];
    var outputParagraph = document.getElementById("magictower");
    outputParagraph.innerHTML = "The " + arnd(colors) + " " + arnd(structures);
}
</script>
<p id="magictower" onclick="generateMagicTower();">Click this paragraph to generate a Magic Tower (then click it again to generate another).</p>

Dynamic Hit Points Example

In the paragraph below, the hit points are randomly generated each time the page loads. Reload this page to see the hit points change.

An Ogre (HP ; AC 5; Move 9”; HD 4+1) glowers from the cave entrance.

The Code for Dynamic Hit Points:

<p>An Ogre (HP <span id="ogrehitpoints"></span>; AC 5; Move 9"; HD 4+1) glowers from the cave entrance.</p>
<script>
function rollHitPoints(hdNumber, hdPlus, hdSize) {
    hdNumber = hdNumber || 1;
    hdPlus = hdPlus || 0;
    hdSize = hdSize || 6;
    var hitPoints = 0;
    for (var i = 0; i < hdNumber; i++) {
        hitPoints = hitPoints + Math.floor(Math.random() * hdSize) + 1;
    }
    hitPoints = hitPoints + hdPlus;
    return hitPoints;
}
var ogreHitPoints = document.getElementById("ogrehitpoints");
ogreHitPoints.innerHTML = rollHitPoints(4, 1);
</script>

Learn More About JavaScript

You can learn a lot of JavaScript using free tutorials on the web.

Start a cheat sheet and keep track of what you learn. Refine it over time as your understanding increases. Here’s my JavaScript cheat sheet, for example.

You may also want to keep a code clipping file to store useful and clever little bits of JavaScript to reuse.

Mozilla Developer Connection has a good JavaScript reference. It’s a better than many of the alternatives that rank higher on Google results. (In fact, when I search for JavaScript reference info, I include “MDN” in my search terms.)

If you want to learn from books, these are good:

If you start writing scripts of more than a dozen lines, get yourself a good text editor. For Windows, try NotePad++. For Mac, try Atom. If you’re on Linux, you probably already have a favorite text editor, but if not try gEdit (or go all hardcore and learn vim).

Finally, you should at least be aware of JSLint and JSHint. They’re alternative sites that find errors in JavaScript code. JSLint is more rigorous/harsher. If your JavaScript gets an error you can’t solve, these tools may help you find it. About These Micro Generators

This code was written by Paul Gorman. You may copy, reuse, redistribute, and modify the example code however you see fit.

3 comments:

Zenopus Archives, June 5, 2014 at 10:01 PM

That’s really cool! I downloaded Textwrangler and have been playing around with using your code for the Magic Tower to make one for my Holmesian Random Names. Right now I just have a few of the syllables and titles in there but I put in a side bar and it works! Is there a way to randomize whether it selects an element; for example, what if you wanted to only pick the tower’s color 40% of the time?

Paul Gorman, June 5, 2014 at 10:13 PM

I’ll post another example or two with with a slightly more elegant way to do this when I have a few minutes, but the simplest way would be to add empty elements to the color list like:

var colors = ["red", "blue", "brown", "green", "", "", "", "", "", ""];

Don’t worry about extra spaces between words; web browsers should collapse them into a single space.

JDJarvis, June 5, 2014 at 11:41 PM

Nice stuff. Javascript really is pretty easy to use to create simple bits of code to whip up custom generators or customized content, it’s actually a little surprising it isn’t more widely used by RPG bloggers.

⬅ Older Post Newer Post ➡

The Devil Ghost logo