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

Random Generator Tutorial

Quick, dirty and ugly JavaScript tutorial for random generators

Part 2

Welcome to the second part of my tutorial, you can find the first 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.

<!DOCTYPE html>
<html>
<head>
<title>My RPG Generator</title>
<script>
//<![CDATA[
function getRandomHoard() {
var Treasures = [
"a large ruby","a diamond ring","a pearl necklace","a silver idol","an emerald scepter"
];
document.getElementById("Random").innerHTML = "The hoard contains " + Math.floor(1 + Math.random() * 100) + " Gold Coins and " + Treasures[ Math.floor( Math.random() * Treasures.length) ] + ".";
}
//]]>
</script>
</head>
<body>
<h1>Ultimate Generator</h1>
<p id="Random">Here we'll have our output!.</p>
<button type="button" onclick="getRandomHoard()" >Run!</button>
</body>
</html>

So let's say now the treasure hoard is larger and we want to get at least a few items of it. It's as simple as adding the same code several times.

document.getElementById("Random").innerHTML = "The hoard contains " + Math.floor(1 + Math.random() * 100) + " Gold Coins, " + Treasures[ Math.floor( Math.random() * Treasures.length) ] + " and " + Treasures[ Math.floor( Math.random() * Treasures.length) ] + " and " + Treasures[ Math.floor( Math.random() * Treasures.length) ] + ".";

So now we get three treasures instead of one!.

Ultimate Generator

Here we'll have our output!.

Now we have two main new issues. Our code looks a bit messy, repeating the same stuff a lot of times and also we are getting the same item more than one time.

To fix our first concern we could just create a funtion to pick one item randomly from a given array. The variable Tresure with our treasure list could be left inside de function to generate the hoard or moved outside to the top, both approaches will work here but could have implications later.

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

Ultimate Generator

Here we'll have our output!.

To create a list that don't repeat elements will need to play a bit with the our array. We should remove each element when selected, to do it we'll use the splice method or our array.

If we moved our Treasure array outside our funtions after two clicks our array will be empty and the code will get you an error, to deal with it we'll make a copy of it with the method slice inside and leave the data definition at the top.

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

Ultimate Generator

Here we'll have our output!.

Now we can have lists with unique entries and we can be sure that are not picked more than once! You can combine this approach and have parts selected from unique lists and parts from reusable ones.

var Treasures = [
"large ruby","diamond ring","pearl necklace","silver idol","emerald scepter"
];
var Adjetives = [
"a valuable","a tarnished","a shiny","a fake","a cursed"
];
function pickOne(itemArray) {
return itemArray[Math.floor( Math.random() * itemArray.length)]
}
function pickOneNoRepeat(itemArray) {
return itemArray.splice([Math.floor( Math.random() * itemArray.length)],1)[0]
}
function getRandomHoard() {
var TreasuresCopy = Treasures.slice();
document.getElementById("Random").innerHTML = "The hoard contains " + Math.floor(1 + Math.random() * 100) + " Gold Coins, " + pickOne(Adjetives) + " " + pickOneNoRepeat(TreasuresCopy) + " and " + pickOne(Adjetives) + " "+ pickOneNoRepeat(TreasuresCopy) + " and " + pickOne(Adjetives) + " "+ pickOneNoRepeat(TreasuresCopy) + ".";
}

Ultimate Generator

Here we'll have our output!.

See you in part three!.

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