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

Post a Comment

Popular posts from this blog

Random Character Generator for Warhammer Rolepaying Game 4th edition

WFRP 4th Edition Random character Generate character WFRP 4th Edition Random character Generate Now! Generate Human! Generate Dwarf! Generate Halfling! Generate Hight Elf! Generate Wood Elf! Generate Gnome! Ask Reroll Stats: Ask Reroll Career: Ask Simple Choices: Name . Species . Class and Career . XP 0/0 Characteristics Fate and Resilience Skills Talents Trappings Select a career: Submit To generate simpler NPCS like the ones you might meet in a tavern check my NPC Generator to create Merchants, Scholar, Soldiers and similar citizens that could be found in an inn or belonging to a cult . If you need a more dangerous set you might check my Monster Generator to create Mutants, Orcs, Goblins or worse. You can also create the loot carried by them using my Random Treasure Generator . To have a more detailed Old Worlders you can use the list of my Generic NPCs stats for 4th e
Read more

WFRP4 NPC Generator

WFRP 4th Edition Random NPC Generate NPCs WFRP 4th Edition Random Simple NPCs This is a simple NPC generator, it creates the kind on people you might meet in a tavern of the Old World or belonging to a cult . It uses the Traits mechanism and add a few relevant skills and trappings. If you need a more dangerous set you might check my Monster Generator to create Mutants, Orcs, Goblins or worse. To have a more detailed Old Worlders you can use the list of my Generic NPCs stats for 4th edition . You can also create the loot carried by them using my Random Treasure Generator . Generate Now! Generate Human! Generate Dwarf! Generate Halfling! Generate Elf! Generate Gnome! Merchant Soldier Guard Scholar Charlatan Commoner Noble Bandit Random . Characteristics Skills Traits Trappings Description Code: Francisco Muñoz 2019-2020. Inspiration: Encroatchment of Chaos, Treasure Generator by Dave Graffam . Inspirati
Read more

Treasure Generator

WFRP 4th Edition Random Treasure Generate Treasure WFRP 4th Edition Random treasure This is a simple treasure generator, currently it creates 5 random pieces of jewelry, clothes, weapons, armours and other things you could find adventuring in the Old World (the plan is to make it more flexible and with a larger set of items). If you need people you might meet in a tavern check my NPC Generator to create Merchants, Scholar, Soldiers and similar citizens. If you need a more dangerous set you might check my Monster Generator to create Mutants, Orcs, Goblins or worse. To have a more detailed Old Worlders you can use the list of my Generic NPCs stats for 4th edition . You can also create the loot carried by them using my Random Treasure Generator . Generate Now! Amount : Generate Jewels! Generate Clothing! Generate Coins! Generate Weapons! Generate Armours! Generate Documents! Generate Others!
Read more