Eposic JavaScript D6 Dice Code

Part Two: Creating Your First Dice Roller

You've successfully installed the Eposic D6 dice 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 Eposic D6 JavaScript 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 Eposic JavaScript dice 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 Eposic 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 Eposic 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 Eposic 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.

Part Three: Expanding Your Dice Rolling Capabilities -->

<-- Part One: Installing the Dice Code and Images

[Home] [What's New?] [Store] [Reviews] [RPG Online Tools] [Online Diversions] [Source Code] [Contributors Guidelines] [Policy] [Links] [Contact]

Copyright © 2006 by Eposic Diversions LLC, except as otherwise noted.
Eposic is a trade name and trademark of Eposic Diversions LLC
The Trolf character is a trademark of Eposic Diversions LLC

Trolf character trademark image