Eposic Archive: JavaScript Animated D6 Dice Roller Code, Part Three
This page is in the Eposic Archive. Web pages in the Eposic Archive are possibly out of date and will not be maintained, but are being retained for historical purposes. Thank you for visiting Eposic!
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 a simple alert box 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 JavaScript Animated 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 JavaScript Animated D6 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 JavaScript Animated 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>
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.
