Eposic Archive: JavaScript Animated D6 Dice Roller, Part Two
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!
Creating Your First Dice Roller
You've successfully installed the JavaScript Animated D6 Dice Roller code and images on your web server, and now it's time to make some use of it in your own web pages. To that end, let's take a look at the code in the test page, which you've already used to test your installation.
Here's the source of that test file. We'll discuss the pertinent lines, and use this example to explain how to do something similar in your own web pages. I've numbered the lines; the numbers are not a part of the code, but are only for reference.
1 <html>
2 <head>
3 <title>Testing the JavaScript Animated D6 Dice Roller Classes</title>
4 <script type='text/javascript' src='d6.js'></script>
5 </head>
6 <body>
7 <script type='text/javascript'>
8 D6.dice(2);
9 </script>
10 </body>
11 </html>
The first three lines are basic HTML stuff. I'm not going to discuss such basic HTML stuff in this document.
Line 4 pulls the JavaScript Animated D6 Dice Roller code into
the web page. Since the test web page is in the same directory as the JavaScript
file, I referred to the file in the src attribute of the
script tag as simply 'd6.js'. When you create your
own web pages, you can keep this line as-is if your web page is in the
directory where you installed the dice code. If your web page is in
some other directory, you'll need to modify the value of the src
attribute of the script tag so that it refers to the correct
URL for the d6.js file. For instance, if you installed the
dice code in a directory named dice on your web server,
line 4 could look like this:
4 <script type='text/javascript' src='/dice/d6.js'></script>
You'll need to include line 4 (or your own modified version of it) in any HTML file that uses the dice code.
Lines 5 and 6 are more basic HTML stuff.
Lines 7 and 9 are the beginning and ending script tags that
enclose a line of JavaScript code, on line 8. Line 8 is very simple;
you can replace the 2 in that line with any positive number
(ok, it does have to be an integer), and you'll get that many dice on your
web page. Thus, to have three dice rolled, you'd replace line 8 with this line:
8 D6.dice(3);
If you are concerned about the performance of images, or if you don't have the
dice images installed on your web server, you can instruct the
dice roller to simulate the dice rolls using ascii text. You would then replace
line 8 with the following code, assuming you wanted to roll 3 dice:
8 D6.dice(3, null, null, false);
The second and third (null) arguments are placeholders for arguments you don't need to worry about at this point. The fourth argument (false) indicates that images are not to be used for the animations, but ascii text is to be used instead.
The D6 class assumes that your HTML file is in the same directory as the
dice images. If this is not the case, you will need to insert the following line
just before line 8 (replacing [url-of-image-directory] with the actual URL
of the directory where your dice images are located):
7.5 D6.setBaseUrl('[url-of-image-directory]');
To recap, here's the gist of what you have to do to include a dice roller on
your web page. First, make sure you have properly installed the dice code and images on
your web server. Second, include line 4 from the test file somewhere in your
web page (I prefer it inside the head tag, but that's not always convenient).
You may need to modify the line slightly if your web page is not in the same directory as
the installed code. Third, somewhere in the body of your web page below where
you inserted the line 4 code, you insert lines 7 through 9, modifying line 8 as necessary
for the number of dice you want. Lastly, if your web page is not in the same directory
as the dice images, then you need to set the url of the image directory in a call to
D6.setBaseUrl before you make the call to D6.dice.
All that being said, the easiest way to include the dice roller in a web page is to copy the following lines into the location in the body of your web page where you want the dice to appear:
1 <script type='text/javascript' src='d6.js'></script>
2 <script type='text/javascript'>
3 D6.dice(2);
4 </script>
Then change the 2 to the number of dice you want. As long as your web page, the
d6.js JavaScript file, and the dice images are all in the same directory
on your web server, then the above 4 lines will work, and you will have a dice roller
on your web page.
You can put anything else on the page that you want, with two huge exceptions.
The first exception is this: You can't use certain strings for the values of id
attributes of any of your HTML tags. If you don't set any id attributes, then
you're fine. Otherwise, you should avoid using as id attributes any strings
that start with the substring dice.
The second huge exception is that you can't use the D6.dice function more than once on any given page. If you want multiple sets of dice on your page, you'll have to use something other than the D6 class. There's no tutorial for these other classes, but feel free to read the documentation.
Though embedding a dice roller on your web page in this manner is simple, it doesn't let you react to your visitor's rolls. If you want to do something in response to your visitor rolling the dice, and you want that something to depend on the result of the dice roll, then you need to do a bit more coding. That's the topic of Part Three: Expanding Your Dice Rolling Capabilities.
