Eposic JavaScript D6 Dice Code

Part Three: Expanding Your Dice Rolling Capabilities

OK, so now you've got a dice roller on your web site. Your visitors can roll dice all day long on your site, and that's a good thing. But if you're like me, you want to do something with those dice rolls. Let's make the numbers mean something!

To make the dice rolling code trigger actions on your site, you register a callback with the roller. This is what's done in this example. If you want, go ahead and load this example file in your browser and roll the dice a few times to see what happens before we continue with our discussion...

This example file is set up to perform a simple attack roll, determining by a simple test whether or not an attack against an opponent is successful. For this test, I've hardcoded in the value of 6 as the minimum dice roll result on two dice to mean the opponent is hit; a total result of 5 or less on the dice means the opponent was missed. For this example, I use the innerHTML non-standard but widely supported property of DOM nodes to write out a message that confirms the dice roll total and states whether you hit or missed your opponent.

Here's the code:

  1 <html>
  2 <head>
  3 <title>Example File for Eposic D6 Dice Roller</title>
  4 <script type='text/javascript' src='d6.js'></script>
  5 </head>
  6 <body>
  7 <p>Roll 6 or higher on two dice to hit your opponent.</p>
  8 <script type='text/javascript'>
  9 function attack(result) {
 10   if (result < 6)
 11     alert('You rolled ' + result + '. You missed your opponent!');
 12   else
 13     alert('You rolled ' + result + '. You hit your opponent!');
 14 }
 15 D6.dice(2, attack);
 16 </script>
 17 </body>
 18 </html>

So let's discuss the pertinent code, shall we?

Line 4 loads the Eposic Dice Roller code into the web page.

Lines 9 through 14 are JavaScript code that defines our callback. A callback may accept up to three arguments; in this case, we only need the first one, which is the total result of the dice roll. That is, the argument that will be passed to our callback function by the dice roller is the sum of the individual die rolls. We thus only need to check the result against our required 'to-hit' value, which is what we're doing in line 10. If the result of the dice roll is less than 6, then line 11 is executed, telling us that we've missed the opponent. If the result is 6 or greater, the else statement on line 12 directs us to line 13, where we are told that we hit the opponent.

Line 15 is our call to the D6.dice function. In this example, we specify a non-null second argument to our call to D6.dice. This second argument is a reference to our callback function. That's all it takes to have our callback function fired when the dice are rolled! (Just make sure you define your callback function before you call D6.dice.)

And that's it. But let's say that you want to do something a little more clever than just popping up an alert box. For instance, let's say you want to send your visitor to one web page if an attack succeeds, and to another page if the attack fails. You can do that by modifying the above callback. Here's some code that demonstrates one way of doing that:

  1 <html>
  2 <head>
  3 <title>Example File for Eposic D6 Dice Roller</title>
  4 <script type='text/javascript' src='d6.js'></script>
  5 </head>
  6 <body>
  7 <p>Roll 6 or higher on two dice to hit your opponent.</p>
  8 <script type='text/javascript'>
  9 var newUrl = 'success.html';
 10 function attack(result) {
 11   if (result < 6)
 12     newUrl = 'failure.html';
 13   window.setTimeout('newpage()', 500);
 14 }
 15 function newpage() {
 16   location.replace(newUrl);
 17 }
 18 D6.dice(2, attack);
 19 </script>
 20 </body>
 21 </html>

Try out the preceding code.

The interesting code here is in lines 9 through 17. In line 9, we define a global variable, newUrl, that holds the URL that we'll visit if the attack is successful. Lines 10 through 14 define the attack callback, where we check to see if the attack failed; if it did, we change the global variable to hold the URL for a failed attack.

In line 13, we create a timer. This timer will delay for half a second (500 milliseconds) and then call the newpage function defined on lines 15 through 17. The newpage function replaces the current web page with the web page identified by our global variable, newUrl. We use a timer to delay the loading of the new web page, to ensure that we can see the dice roll results before we are whisked away to the success or failure page. Without the timer, the browser might load the next page so quickly that you can't observe the dice roll results, which sort of defeats the purpose of animating the dice, eh?

If you've already got some programming experience under your belt, your head is probably reeling with ideas at this point. With the ability to register callbacks on the dice roller, the sky is the limit for someone that knows JavaScript. But, hey, there's more still to see! There are more arguments available to your callbacks, and there are more arguments available to the D6.dice function. So have a little patience and keep reading, so you don't miss out on some of the dice roller's best features!

Next up, we look at a more sophisticated example, where we implement a sample but functional combat system, in Part Four: A Sample, Functional Combat System.

Part Four: A Sample, Functional Combat System -->

<-- Part Two: Creating Your First Dice Roller

Trolf character trademark image