Tavern Games


Online version of D&D tavern games

About this project:


D&D Tavern Games

At this time, this project consists of two tavern game suggestions from the Wizards of the Coast website that have been converted into JavaScript and put online.

The first game, called "Beat the Bartender" is a simple dice rolling match up where players attempt to roll dice (two d6) and score a higher total than the bartender, or house.

The second game is is called "Dragon's Hoard," and involves a slightly more complex numbered game board where players place or pick up chips based on their dice roll totals. Both of the games have much more detailed instructions on their site pages.

Technologies used:


JavaScript: Both of these projects rely almost exclusively on JavaScript to play the games and track player chip/gold count. If at a future time I have the time to connect the games to the Character Sheets database project, I will do so using a combination of PHP and AJAX. For now, JavaScript works perfectly for the simple, client-side nature of these games.

Technical Talk:


Works best when viewing code on GitHub

Beat the Bartender

Functionally, the core of this project revolves around the Player object and the beatTheBartender Function. If you are viewing the code, both are below the section where variables are set based off of the IDs they will be targeting.

The Player object contains the methods for rolling dice, as well as storing the player's total gold. This object made it easy to create a number of players with similar but different names, rolls, gold, etc. Just below the object, the four players are created with their appropriate properties.

The beatTheBartender function, which runs the game, fires when the Roll the Dice button is clicked. This function initially gathers up all of the bet value amounts from each player, rolls their dice and sets it as the innerHTML of the correct locations, and then starts comparing roll amounts. Keep in mind, this is super straight forward, and each player's total roll is straight compared to the bartender's total. If the player wins, they double their bet, if they lose, they lose it—ties go to the bartender.

The settlePlayerBeat function, within the beatTheBartender function is what figures out if each player, and how to calculate the payouts. The relevant information for each player is set as the arguments of the function call (which is done once for each player), and the information is fed through settlePlayerBeat(). Rolls are compared, and then depending on if they player won or not, a message is displayed telling them of the outcome, and their bet is either added or subtracted from their total.

Dragon's Hoard

Dragon's Hoard is based around the same Player object, this time renamed dragonPlayers. It is functionally the same object just with an additional number variable included to track the player number throughout the game.

The first section of the script to run is the dragonSetup function, which is at the very bottom of the JS page (if you're looking at the code). This function is triggered by the player clicking on the popup asking how many players will be playing. The number is passed to the function, which then adds an event listener to the first (and only the first) player's section on the game board. The opacity of the other players is then set depending on if they were chosen as playable slots. Inactive characters are super faded out.

If you notice, the event listener in the dragonSetup uses a variable rather than a function to be triggered on click. If you look just below the function, you will see the corresponding variables. This method allows me to add/remove listeners later in the script. You are unable to remove an event listener with an anonymous function (the only way to pass values from within an event listener) due to it being a new instance every time it runs, and removeEventListener requires identical matches to remove the listener. In short, this lets me toggle the event listeners on and off when it is/ isn't the players turn to roll.

The runGame function, which is triggered from the players' Roll Dice buttons is fired off when the first player rolls their dice. The function will initially calculate the rolls/totals of the player's dice, and print them. Next, the function runs a switch statement based on what the player rolled in total. Each case resolves the outcome of the roll, be it collecting, or removing chips from the table—it also automatically adds or subtracts the relevant amount from the player's chip stack and announces the outcome on the screen.

The second part of the runGame function is the nested passTurn function (which is called right at the very end of runGame). This is another switch statement that checks the value of the player number and then determines how to pass off to the next player. For players One and Four, it's a simple matter of deactivating the current Roll Dice listener (so player cannot roll outside of their turn time), fading out the current player slot ever so slightly, and then setting up the next player's area (One always passes to Two, Four to One). In the cases of Two and Three, before the information can be passed, it needs to be determined how many players are in the current game. If only two, then Player Two needs to pass to Player One, whereas with 3+ players, Two would need to pass to Three. This is resolved with a simple if else statement, comparing it to the stored value that was saved at the very start of the game when the user clicked how many players they wanted in the game.

The game goes, much like Beat the Bartender, until people are tired of how much gold they've lost or won, and have closed the page.