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.

CodePen

2022 - HackerNoon Contributor of the Year - Game Development

2022 - HackerNoon Contributor of the Year - Philosophy

2022 - HackerNoon Contributor of the Year - Self Improvement

clintveasey.co.uk

Nominated for 2022 - HackerNoon Contributor of the Year - Philosophy

Nominated for 2022 - HackerNoon Contributor of the Year - Game Development

Nominated for 2022 - HackerNoon Contributor of the Year - Self Improvement

Full Stack Web Developer

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

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

Too Long; Didn't Read

Company Mentioned

Clint Veasey

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Company Mentioned

Clint Veasey

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES