Quick, dirty and ugly JavaScript tutorial for random generators

Random Generator Tutorial

Quick, dirty and ugly JavaScript tutorial for random generators

Part 1

There are a lot of useful tools like Perchance and Chartopia available to create random generatos for your rpg but here we are going to make things old-school, tinkering with HTML and JavaScript.

You will need a basic knowledge of how a webpage is created using HTML and some minor programming experience in any programming language so you can grasp the JavaScript parts. The code and web page will be just as simple as possible and we'll try to avoid any advanced features (or even good modern practices).

For the html part we can create a simple html template in any editor (save it and name it "rpggen.html" or whatever) where we'll add our stuff and check with a browser, if you need more help check a HTML tutorial .

<!DOCTYPE html>
<html>
<head>
<title>My RPG Generator</title>
<script>
//<![CDATA[

//]]>
</script>
</head>
<body>
<h1>Ultimate Generator</h1>
<p id="Random">Here we'll have our output!.</p>
<button type="button">Run!</button>
</body>
</html>

It has a page title, a big header, a line for the output and a button to call for the code to run. Currently there is no code but we'll add it now.

So our first example will be generation a number of coins in a monster hoard for your loot. Lets say we want from something beteen 1 to 100 gold crowns. So we add a simple function to be called on the press of the button, you can copy the following code in the black line of the html, between the //<![CDATA[ and //]]> lines.

function getRandomHoard() {
document.getElementById("Random").innerHTML = "The hoard contains" + Math.floor(Math.random() * 100) + " Gold Coins.";
}

The function just change the html code of our output paragraph to some text with a random number inside.

And modifiy to button line to look like this, so it calls the function we just defined when we click on it:

<button type="button" onclick="getRandomHoard()" >Run!</button>

When we load the the file we should get something like this:

Ultimate Generator

Here we'll have our output!.

Every time you click a new number of gold coins is generated. To do this we get a random value from 0 to 1 (with decimals) then we scale the value 100 times and then we round removing all the decimal part.

The perceptive reader or the experienced programmer should have found that the values generated have a range between 0 and 99. We are a coin short!. So better change the code to add it.

function getRandomHoard() {
document.getElementById("Random").innerHTML = "The hoard contains" + Math.floor(1 + Math.random() * 100) + " Gold Coins.";
}

Ultimate Generator

Here we'll have our output!.

The values are almost identical but now we have a clear conscience about stealing that last coin!

For our next trick we are going to add additional items to our monster hoard so we need to think in a few ones to pick, things like gems and jewelry. We'll create an array of them to create a varible with the desciptions.

function getRandomHoard() {
var Treasures = [
"a large ruby","a diamond ring","a pearl necklace","a silver idol","an emerald scepter"
];
document.getElementById("Random3").innerHTML = "The hoard contains " + Math.floor(1 + Math.random() * 100) + " Gold Coins and " + Treasures[ Math.floor( Math.random() * Treasures.length) ] + ".";
}

Ultimate Generator

Here we'll have our output!.

To select which treasure to pick we select a number from 0 to the length of our list, the variable Treasure.

Now, you can procedd to the second part if you dare

Comments

Popular posts from this blog

Random Character Generator for Warhammer Rolepaying Game 4th edition

WFRP4 NPC Generator

Treasure Generator