Die, JavaScript, Die!

by David Wall

July 23, 2002 —

A couple of weeks ago, we talked about random numbers in JavaScript, and
a more useful function (more useful than the plain Math.random() method,
that is) for generating them. The good folks at JavascriptKit.com have
used a function very similar to the one I described to create a
JavaScript die (that's "die" as in "dice") simulator.

It works like this. First, they cache images representing the six faces
of a die:

var face0=new Image()
face0.src="d1.gif"
var face1=new Image()
face1.src="d2.gif"
var face2=new Image()
face2.src="d3.gif"
var face3=new Image()
face3.src="d4.gif"
var face4=new Image()
face4.src="d5.gif"
var face5=new Image()
face5.src="d6.gif"

Then, they define the function that incorporates the randomness feature,
geared toward six faces:

function throwdie()
{
var randomdice=Math.round(Math.random()*5)
document.images["die"].src=eval("face"+randomdice+".src")
}

With those snippets in the HEAD section, you're free to create an IMG
object (with a NAME attribute matching the one in your die-rolling
function), perhaps with a face image in place at the beginning:

All you need after that is a "Roll" button with an event handler that
calls the function:

This application is further documented (and appears with the die-face
images) here:

http://javascriptkit.com/script/script2/dice.shtml

ITworld