Introduction to Clickable Encounter Tables + an Example Here is a snippet that could potentially be of use for any dungeon masters. After this walkthrough, you will understand how the script works and adapt it for your own games. The full example is here: https://codepen.io/mongo0se/pen/JjOvgZg Snippet Walkthrough The meat and potatoes is the JavaScript function : rollOnTable function rollOnTable() {
 
 // create a list of all table rows 
 var trs = document.getElementById("encounters").getElementsByTagName("tr");

 // pick a random number that is within the range of the number of table rows
 var rand = Math.floor( Math.random() * trs.length );
  
 // set all rows to white background (not highlighted). 
 // - this is in case we roll again on the table. Otherwise we would keep highlighting 
 //   rows at random and it would be unclear what the result would be.
 var trsList = Array.prototype.slice.call(trs);
 trsList.forEach((element) => { element.style.backgroundColor = "white"; })
 
 // highlight new row
 trs[rand].style.backgroundColor = "lightblue";
} In a nutshell, all that happens is that you run this function first on page load, and then again on a button press. The table (as shown in the codepen.io example) can be styled to fit. I included the dice roll number to make it printable, to give the option. Further Uses Beyond Encounter Tables + Flavour Text If you are still reading at this point, you probably already realize that the uses far exceed encounter tables. You could create a table for weather, loot or flavour text. For flavour text, I would suggest an adaption of my date night generator: . https://codepen.io/mongo0se/pen/oNwBxvz This snippet uses jQuery instead of vanilla JavaScript, like the last snippet. You could of course drop this dependency and apply the same logic. I have no reason to use jQuery here, it was purely out of habit. For example, the 3 arrays that contain pieces of date idea strings: var item=[
  "A broadsword",
  "A silk mask",
  "A withered hand" 
];
  
var itemAction=[
  " shimmers into existence",
  " glows menacingly",
  " emits an eldritch whispering from many low voices",
];
	
var itemSuffix=[
  ". ",
  ". ",
  " in the hand of a giant sprinting towards you.",
  " on an ornate wooden plinth."
]; In Closing: Write Your Own Clickable Encounter Tables I hope these snippets find use in a session somewhere, or at the very least get your creative juices flowing. Take it easy, and if you can’ take it easy, then take it any way you can.

Write Your Own D&D Encounter Tables in JavaScript for Dungeon Masters

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Ways to Load Less Imagery to Increase Ranking and Client Happiness

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

5 Ways to Load Less Imagery to Increase Ranking and Client Happiness

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps