Eposic Sample Code: JavaScript Generators

Part One: Randomly Choosing One of Many
by Michael K. Eidson

If you've used some of the Eposic JavaScript Generators or seen similar tools on other web sites, you may be wondering how you could set up such a generator of your own. Well, read below, and I'll show you all the code you need, and explain how to customize your own JavaScript generator.

Just in case you're not quite sure what I mean by JavaScript generator, here's a working example. The generator below works because JavaScript has been embedded into this HTML file. This particular generator randomly chooses one thing from amongst a list of seven things. Click the Generate button to have the generator randomly choose one of the seven things and display it in the text field.

Thing:

The HTML: The following HTML, which includes embedded JavaScript, is the code for a web page which contains only the above generator. It is the complete code for the page. I will discuss how to customize it below the code segment.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!--
function makeArray(len)
{
for (var i=0; i<len; i++)
this[i] = null;
this.length = len;
}
function random(n)
{
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}
var now;
var seed;
var things;
var numThings;

function initvars()
{
now = new Date();
seed = now.getTime() % 0xffffffff;
numThings = 0;
things = new makeArray(0);
things[numThings++] = "Ring";
things[numThings++] = "Wand";
things[numThings++] = "Potion";
things[numThings++] = "Scroll";
things[numThings++] = "Weapon";
things[numThings++] = "Armor";
things[numThings++] = "Shield";
}

function genthing()
{
var whichThing = random(numThings);
var thingText = things[whichThing];
document.theform.Thing.value = thingText;
return;
}
// -->
</SCRIPT>
<TITLE>Thing Generator</TITLE>
</HEAD>

<BODY TEXT="black" BGCOLOR="white" onload="initvars()">

<FORM ACTION="javascript:genthing()" METHOD="POST" name="theform">
<P>
<B>Thing:</B>
<INPUT TYPE="TEXT" NAME="Thing" SIZE="25">
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Generate">
<INPUT TYPE="RESET" NAME="Reset" VALUE="Clear">
</P>
</FORM>
</BODY>
</HTML>


Customizing the Code: To customize the above code, there's really only three things you need to do. First, come up with the list of items you want to randomly choose from. Second, change the lines of the form

things[numThings++]="choice";

in the code above so that there are as many lines of that form as the number of things in your list, and use the items from your list instead of using the items I've used above. Third, change the title of the page and the label on the page, so they are a little more descriptive of what you're generating.

For example, suppose you wanted a generator for races in a fantasy RPG. Let's see how you would customize the above code to have it randomly choose one of several fantasy races each time you clicked on the Generate button.

First, you decide on our list of fantasy races. For this example, let's use the following list: Dwarf, Elf, Fairy, Giant, Half-Elf, Half-Orc, Hobbit, Human, Lizardman, Ogre, Orc, and Troll.

Second, you count the number of races you have in your list. We see that there's twelve of them in this instance. So we'll have twelve lines of the form

things[numThings++] = "choice";

where choice is replaced in each of the twelve lines by one of our race names. Our twelve lines will look like this:

things[numThings++] = "Dwarf";
things[numThings++] = "Elf";
things[numThings++] = "Fairy";
things[numThings++] = "Giant";
things[numThings++] = "Half-Elf";
things[numThings++] = "Half-Orc";
things[numThings++] = "Hobbit";
things[numThings++] = "Human";
things[numThings++] = "Lizardman";
things[numThings++] = "Ogre";
things[numThings++] = "Orc";
things[numThings++] = "Troll";

Third, and lastly, we change the title of the web page, and the label on the page. The modified code for our Fantasy Race Generator page is shown below. The lines in the code below that are different from the corresponding lines in the first code example are shown in bold.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!--
function makeArray(len)
{
for (var i=0; i<len; i++)
this[i] = null;
this.length = len;
}
function random(n)
{
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}
var now;
var seed;
var things;
var numThings;

function initvars()
{
now = new Date();
seed = now.getTime() % 0xffffffff;
numThings = 0;
things = new makeArray(0);
things[numThings++] = "Dwarf";
things[numThings++] = "Elf";
things[numThings++] = "Fairy";
things[numThings++] = "Giant";
things[numThings++] = "Half-Elf";
things[numThings++] = "Half-Orc";
things[numThings++] = "Hobbit";
things[numThings++] = "Human";
things[numThings++] = "Lizardman";
things[numThings++] = "Ogre";
things[numThings++] = "Orc";
things[numThings++] = "Troll";
}

function genthing()
{
var whichThing = random(numThings);
var thingText = things[whichThing];
document.theform.Thing.value = thingText;
return;
}
// -->
</SCRIPT>
<TITLE>Fantasy Race Generator</TITLE>
</HEAD>

<BODY TEXT="black" BGCOLOR="white" onload="initvars()">

<FORM ACTION="javascript:genthing()" METHOD="POST" name="theform">
<P>
<B>Race:</B>
<INPUT TYPE="TEXT" NAME="Thing" SIZE="25">
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Generate">
<INPUT TYPE="RESET" NAME="Reset" VALUE="Clear">
</P>
</FORM>
</BODY>
</HTML>

See the above Fantasy Race Generator in action.

By carefully studying the above examples, you should be able to build some simple generators of your own. Note that even though we didn't have much descriptive text in our above examples, you can do so without affecting the generator. Experiment!

In Part Two of the JavaScript Generators tutorial, we'll learn how to simulate dice rolls, and build a generator that creates random NPCs.