Quick, dirty and ugly JavaScript tutorial for random generators (Part 3)

Random Generator Tutorial (part 3)

Quick, dirty and ugly JavaScript tutorial for random generators

Part 3

Welcome to the third part of my tutorial, you can find the first parte here and second parte here. Now we are going to repeat some of the initial advice of that part.

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).

If you finished the previous part your hml file should contain a few basic parts already, a hearder section with a title and a Javacript block with a single function. Then some big letters to write in the screen, a line where the generated content is written and a button to run the code... and we are goind to start from scratch again!

And now for something completly different

We are going to leave the fantasy and reach the stars! We are going to implement some planet generation based on the charts from Stars Without Number.

The aim is to show how we can implement tables based on non uniform results, like the ones tha use 2D6 for entries. Even exotic ones like D66 ones or similar can use the same techniques and functions.

As a starting point we should create simple function that return the sum of 2 random numbers from 1 to 6.

Then lets have a look at one of the tables:

2D6Atmosphere
2Corrosive
3Inert gas
4Airless or too thin
5-9Breathable mix
10Thick
11Invasive
12Corrosive and Invasive

So well create in our code an array filled with this data. Each item will another array with the upper number needed to be rolled and the entry itself.

<!DOCTYPE html>
<html>
<head>
<title>My RPG Generator</title>
<script>
//<![CDATA[
var Atmosphere = [
[2,"Corrosive"],
[3,"Inert Gas"],
[4,"Airless or too thin"],
[9,"Beathable Mix"],
[10,"Thick"],
[11,"Invasive"],
[12,"Corrosive and Invasive"]
];
function roll2D6() {
  return Math.floor( 1 + Math.random() * 6) + Math.floor( 1 + Math.random() * 6);
}
//]]>
</script>
</head>
<body>
<h1>Ultimate Planet Generator</h1>
<p id="Random">Here we'll have our output!.</p>
<button type="button" onclick="GetPlanet()" >Run!</button>
</body>
</html>

The "only" thing missing is the main function that we'll run when we push the button (we named it GetPlanet). It should have a way to roll 2d6 and compare the results from the table we have until the roll is equal or more than the number we have- This last part should be in another function.

function pickFromTable (myNumber, myTable) {
  var myEntry;
  var myResult = "";
  for (myEntry in myTable){
   if ((myNumber <= (myTable[myEntry][0]) ) && (myResult == "" )) {
   myResult = myEntry[1];
   }
  }
  return myResult;
}
function GetPlanet () {
  document.getElementById("Random").innerHTML = "Atmosphere:<br>" + pickFromTable(roll2D6(),Atmosphere);
}

Ultimate Planet Generator

Here we'll have our output!.

Now our planet has atmosphere! Next will add other extra variables, for Temperature, Biosphere, Population and Tech Level. All of them have the similar structure.

2D6Temperature
2Frozen
3Cold
4-5Variable Cold
6-8Temperate
9-10Variable Warm
11Warm
12Burning

var Temperature = [
[2,"Frozen"],
[3,"Cold"],
[5,"Varieble Cold"],
[8,"Temperate"],
[10,"Variable Warm"],
[11,"Warm"],
[12,"Burning"]
];
var Biosphere = [
[2,"Remant"],
[3,"Microbial"],
[5,"None"],
[8,"Human Miscible"],
[10,"Inmiscible"],
[11,"Hybrid"],
[12,"Engineered"]
];
var Population = [
[2,"Failed Colony"],
[3,"Outpost"],
[5,"Fewer than millions Inhabitants"],
[8,"Several Millions Inhabitants"],
[10,"Hundreds of Millions Inhabitants"],
[11,"Billions Inhabitants"],
[12,"Alien Inhabitants"]
];
var TechLevel = [
[2,"TL 0, Neolithic"],
[3,"TL 1, Medieval"],
[5,"TL 2, early Industrial"],
[8,"TL 4, Modern postech"],
[10,"TL 3, present Earth"],
[11,"TL 4+, postech with specialities"],
[12,"TL5, pretech"]
];
function roll2D6() {
  return Math.floor( 1 + Math.random() * 6) + Math.floor( 1 + Math.random() * 6);
}
function pickFromTable (myNumber, myTable) {
  var myEntry;
  var myResult = "";
  for (myEntry in myTable){
   if ((myNumber <= (myTable[myEntry][0]) ) && (myResult == "" )) {
   myResult = myEntry[1];
   }
  }
  return myResult;
}
function GetPlanet () {
  document.getElementById("Random2").innerHTML = "Atmosphere: " + pickFromTable(roll2D6(),Atmosphere) + "<br>" +
  "Temperature: " + pickFromTable(roll2D6(),Temperature) + "<br>;" +
  "Biosphere: " + pickFromTable(roll2D6(),Biosphere) + "<br>" +
  "Population: " + pickFromTable(roll2D6(),Population) + "<br>" +
  "TechLevel: " + pickFromTable(roll2D6(),TechLevel) + ">br<";
}

Ultimate Planet Generator

Here we'll have our output!.

See you in part four!.

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 . Ins...
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