Newsreel |
|
A
DNJ Dilemma scoreboard consists of a series of .gif images, one for each digit. I originally
designed the boards to solve the problem of displaying updateable values in
Netscape Navigator (unlike IE4, Navigator 4.x doesn't support an .innerText
property, so you can't just update the contents of <divs>). However I
like the effect so much that I often use them in IE-only pages too.
 |
 |
 |
| d1.gif | d2.gif | d3.gif |
Updating the display.
The tasks of updateScoreBoard() are:
-
Convert a numeric value to a fixed-length, leading-zeroes string;
-
For each character in the the string, set the .src property of the corresponding scoreboard <img> object to the name of the image file representing that character.
Here's the code for a basic version of updateScoreBoard():
function updateScoreboard(val) {
// Validate parameter
if (val < 0 | val > 99999 | isNaN(val)) {
alert("Error - you must type a number between 0 and 99999")
return
}
// Bludgeon the numeric value into a string - this method works for me!
var sval = "x"+val
sval = sval.substr(1, sval.length - 1)
/*
The string created above will be variable length, depending on the original numeric value,
e.g. "5", "255".
Here's a trick for creating fixed-length 'number strings', packed with leading zeros,
(e.g. "00005", "00255").
We need a five-digit result, so first create a string with a value of "00000", then take (5 minus the length of the number string) characters from it, and concatenate that with the number string - for example "00" + "255" giving "00255".
Note that a string literal ("00000")
has a
substr() method, just as a string variable would
*/
sval = "00000".substr(0, 5 - sval.length) + sval
/*
Now work through the scoreboard image objects, setting each one's .src property to
an image file which corresponds to this digit of the number string, e.g.
"d5.gif" for "5".
The actual .src-changing is done by a function
changepic(). I use string expressions as
parameters to
changepic(), which evaluate as follows:
"sc"+i evaluates to the NAME= value of an image object, e.g.
"sc2"
"d"+sval.substr(i-1, 1)+".gif" evaluates to the name of an image file, e.g. "d5.gif"
*/
var i
for (i=1; i<6; i++) {
changePic("sc"+i, "d"+sval.substr(i-1, 1)+".gif")
}
} // End of function
/*
The function
changePic() is compatible with Netscape Navigator and IE. To
use it with Navigator as well as IE, you must give your <img> tags name=
attributes, not id=.
*/
function changePic(picname, imgfile) {
// Make <img> object display a different image
file.
document.images[picname].src = imgfile
}
The version of updateScoreboard() in this page's source takes three extra parameters, and can update any scoreboard on the page, up to 10 digits long. See the page source for details.
|
DNJ Dilemma |
Overview of the game's processes
Indirectly-called strategy functions
Graphical scoreboards
Asynchronous left/right players
