Vue.js D&D Combat Simulator

Robert Zehnder

I suppose I have always been a little bit of a nerd. It was my 12th birthday and my family had just moved to a house that was almost but not quite in the middle of nowhere. Cable television would not even be an option at that house for at least five or six more years. It was the dark ages.

Things changed on that birthday though when my dad came home from work. He walked in my room, told me happy birthday and tossed me a bag from the local comic book shop. Inside the bag was a whole new world, shrink wrapped in a red box adorned with a warrior fighting a huge red dragon. The original Dungeons & Dragons Basic Set.

I still remember sitting in my room that night playing and replaying that first solo adventure.

That moment was life changing for me as it kicked off my love of fantasy, drawing and gaming. Some of my best friends were made sitting around a table top going on adventures as kids.

Brief history lesson is out of the way, I have been looking to start a new Vue.js learning project. Thinking back to what first got me in to gaming, that first solo adventure I played when I was 12, I thought that might be the perfect place to start.

Armed with the 5th Edition SRD rules I got to work.


The player character will be a human warrior with some heavy armor and a battle axe. You have the ability to set the character’s name and primary stats. Right now you really have no choice of gear or weapons, you just get what you get. Once stats are set you need to save your character which will apply racial bonuses to your stats, apply your constitution bonus if any, and “save” your character in your browser’s local storage. It will remain there until you purge it.

Once saved, it is time to go kill some things.


I originally started off with a handful of monsters, but I found a JSON file that had the listing of monsters from 5th Edition SRD . I did not want to modify their file so the first thing I do is filter the array to ensure only objects with a name key will be returned.

The eventLoop method is the heart of the combat simulator. Initiative is checked at the start of combat and determines the order of combat for the entire encounter. If the player wins initiative he will attack first and then any mobs will attack. If the mobs will initiative they will attack first and then the player will attack. This process repeats until someone dies.

The pcAttack and npcAttack methods were broken out in to their own methods to maintain readability. These methods handle attack and damage rolls and applying damage to the intended target.

Once each combat turn is completed I see either the character or the monster has died. If the monster died the correct experience is awarded. Restarting combat begins the process again.

Monster Manual

I was lucky enough to find the 5th Edition SRD Monster listing as a JSON payload which rocketed my initial 3 mobs to over 300!

I added a mob viewer to the application as a way to help debug issues in the combat logic, but it was also like a walk down memory lane. I have some ideas of how I would like the page to work and I also thought it would be cool to have a button where you could jump into combat with a specific monster.

Wrapping it all up

I think I am off to a good start. A majority of the time was spent integrating and dealing with the nuances of the monster data. Combat is working fairly well next I will look in to getting leveling working and polish up the character screen a bit.

Feel free to check it out:

Originally published at on August 24, 2018.

Robert Zehnder

Written by

full stack developer / coldfusion lead engineer / i love learning new things

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade