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).
The Code for Magic Tower
<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:
- Head First JavaScript (introductory)
- JavaScript Cookbook
- The Principles of Object-Oriented JavaScript
- Speaking JavaScript
- JavaScript: The Good Parts
If you start writing scripts of more than a dozen lines, get yourself a good text editor. For Windows, try NotePad++. For Mac, try TextWrangler. 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.
