Dice Roller

Anonymous's picture
Anonymous
October 10, 2007 - 9:52pm
I made a dice roller I thought you all might like. Bill helped me trick it out with a blur image and sound. Bill has given me some more efficient code for the die roller. See below for three sets of dice rolled and the code for each set.

This is a small set of dice patterned after the original boxed set:


Below is the code:

<script>
  var blusm=new Array(10), redsm=new Array(10)
  var redsmX=new Image(); redsmX.src="/files/u21/red.jpg"
  var blusmX=new Image(); blusmX.src="/files/u21/blu.jpg"
  var redblursm=new Image(); redblursm.src="/files/u21/redblur.jpg"
  var blublursm=new Image(); blublursm.src="/files/u21/blublur.jpg"
  for (o=1; !(o>10); o++){
    blusm[o]=new Image(); blusm[o].src="/files/u21/blu"+(o-1)+".jpg"
    redsm[o]=new Image(); redsm[o].src="/files/u21/red"+(o-1)+".jpg"
  }
  function cleardicesm(){drawdiesm('tensm',blusmX);drawdiesm('onesm',redsmX)}
  function rollsm(numdicesm){
  cleardicesm()
  drawdiesm('onesm',redblursm)
  if (numdicesm==2) drawdiesm('tensm',blublursm)
    document.soundsm.Play()
    setTimeout('resultssm('+numdicesm+')',750)
  }
  function resultssm(numdicesm){
    drawdiesm('onesm',redsm[Math.round(Math.random()*9+1)])
    if (numdicesm==2) drawdiesm('tensm',blusm[Math.round(Math.random()*9+1)])
  }
  function drawdiesm(whichdiesm,whichsrcsm) {document.images[whichdiesm].src=whichsrcsm.src}
</script>
<form style="cursor: pointer">
  <embed src="/files/u21/DieRoll.wav" autostart="false" name="soundsm" enablejavascript="true" height="0" width="0"></embed>
  <img onclick="rollsm(2)" src="/files/u21/blu.jpg" name="tensm" />
  <img onclick="rollsm(1)" src="/files/u21/red.jpg" name="onesm" />
  <br /><input value="Clear" onclick="cleardicesm();" type="button" />
</form>

Here are the originals with double digit tens die:


Below is the code:

<script>
  var bluten=new Array(10), redone=new Array(10)
  var redoneX=new Image(); redoneX.src="/files/u21/dieX.jpg"
  var blutenX=new Image(); blutenX.src="/files/u21/dieXX.jpg"
  var redoneblur=new Image(); redoneblur.src="/files/u21/dieblurX.jpg"
  var bluetenblur=new Image(); bluetenblur.src="/files/u21/dieblurXX.jpg"
  for (m=1; !(m>10); m++){
    bluten[m]=new Image(); bluten[m].src="/files/u21/die"+(m-1)+"0.jpg"
    redone[m]=new Image(); redone[m].src="/files/u21/die"+(m-1)+".jpg"
  }
  function cleardicetop(){drawdietop('tens',blutenX);drawdietop('ones',redoneX)}
  function rolltop(numdicetop){
    cleardicetop()
    drawdietop('ones',redoneblur)
    if (numdicetop==2) drawdietop('tens',bluetenblur)
    document.sound1top.Play()
    setTimeout('resultstop('+numdicetop+')',750)
  }
  function resultstop(numdicetop){
    drawdie('ones',redone[Math.round(Math.random()*9+1)])
    if (numdicetop==2) drawdietop('tens',bluten[Math.round(Math.random()*9+1)])
  }
  function drawdietop(whichdietop,whichsrctop) {document.images[whichdietop].src=whichsrctop.src}
</script>
<form style="cursor: pointer">
  <embed src="/files/u21/DieRoll.wav" autostart="false" name="sound1top" enablejavascript="true" height="0" width="0"></embed>
  <img onclick="rolltop(2)" src="/files/u21/dieXX.jpg" name="tens" />
  <img onclick="rolltop(1)" src="/files/u21/dieX.jpg" name="ones" />
  <br /><input value="Clear" onclick="cleardicetop();" type="button" />
</form>

The following is with the single digit blue die from the boxed set:


Below is the code:

<script>
  var blu=new Array(10), red=new Array(10)
  var redX=new Image(); redX.src="/files/u21/dieX.jpg"
  var bluX=new Image(); bluX.src="/files/u21/dieXX.jpg"
  var redblur=new Image(); redblur.src="/files/u21/dieblurX.jpg"
  var blueblur=new Image(); blueblur.src="/files/u21/dieblurXX.jpg"
  for (n=1; !(n>10); n++){
    blu[n]=new Image(); blu[n].src="/files/u21/blue"+(n-1)+".jpg"
    red[n]=new Image(); red[n].src="/files/u21/die"+(n-1)+".jpg"
  }
  function cleardice(){drawdie('ten',bluX);drawdie('one',redX)}
  function roll(numdice){
    cleardice()
    drawdie('one',redblur)
    if (numdice==2) drawdie('ten',blueblur)
    document.sound1.Play()
    setTimeout('results('+numdice+')',750)
  }
  function results(numdice){
    drawdie('one',red[Math.round(Math.random()*9+1)])
    if (numdice==2) drawdie('ten',blu[Math.round(Math.random()*9+1)])
  }
  function drawdie(whichdie,whichsrc) {document.images[whichdie].src=whichsrc.src}
</script>
<form style="cursor: pointer">
  <embed src="/files/u21/DieRoll.wav" autostart="false" name="sound1" enablejavascript="true" height="0" width="0"></embed>
  <img onclick="roll(2)" src="/files/u21/dieXX.jpg" name="ten" />
  <img onclick="roll(1)" src="/files/u21/dieX.jpg" name="one" />
  <br /><input value="Clear" onclick="cleardice();" type="button" />
</form>

Enjoy!
Comments:

Anonymous's picture
w00t (not verified)
October 10, 2007 - 10:10pm
dice

wow, I rolled a One Hundred Two....... 102 Innocent
do I get a prize?

Corvus's picture
Corvus
October 10, 2007 - 11:17pm
w00t wrote:
dice

wow, I rolled a One Hundred Two....... 102 Innocent
do I get a prize?


That's a 12, you silly goose.
If you wish to make an apple pie from scratch, you must first invent the universe. -- Carl Sagan

blackchip's picture
blackchip
October 11, 2007 - 7:44am
Corvus wrote:
w00t wrote:
dice

wow, I rolled a One Hundred Two....... 102 Innocent
do I get a prize?


That's a 12, you silly goose.


I think w00t's point is it should display 0 2, or 2.  That's how the physical dice work.

CleanCutRogue's picture
CleanCutRogue
October 11, 2007 - 8:43am
Some dice have tens digits that say 10,20,30,...00. I have several sets like that. They do it so you can have a complete set of dice that all look the same color. The dice that came with Star Frontiers, however, were as blackchip implied. Two different colors to determine tens die. Since this site is very Star Frontiersified... can we have the tens digit look like a standard 1,2,3,4....8,9,0?
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack


Corvus's picture
Corvus
October 11, 2007 - 12:16pm
I like them the way Corjay has them.  Consider it the "Digital Remaster" of the dice in the box, maybe.  :P  Perhaps he could do a second set with the single digits on the tens-die?
If you wish to make an apple pie from scratch, you must first invent the universe. -- Carl Sagan

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 2:44pm
Yeah, I can do a blue die with a single digit. I'll do that tonight. By the way, Bill helped me trick out the code with a blur image when rolling the dice. Like?

Anonymous's picture
w00t (not verified)
October 11, 2007 - 3:50pm
the bottom red dice does not roll.....just the blue one.

Corvus's picture
Corvus
October 11, 2007 - 4:02pm
Corjay wrote:
Yeah, I can do a blue die with a single digit. I'll do that tonight. By the way, Bill helped me trick out the code with a blur image when rolling the dice. Like?


The blur is very spiffy, but lasts about twice as long as it should.  Just my opinion, though.
If you wish to make an apple pie from scratch, you must first invent the universe. -- Carl Sagan

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 4:21pm
w00t wrote:
the bottom red dice does not roll.....just the blue one.
Yeah, I fixed the bad roll.

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 4:09pm
Corvus wrote:
Corjay wrote:
Yeah, I can do a blue die with a single digit. I'll do that tonight. By the way, Bill helped me trick out the code with a blur image when rolling the dice. Like?


The blur is very spiffy, but lasts about twice as long as it should. Just my opinion, though.
You can adjust that in the code, where it says "750" to a smaller number. I may be adding a sound effect, so I need that much time for the sound to play. It's also a little more realistic.

CleanCutRogue's picture
CleanCutRogue
October 11, 2007 - 5:32pm
I personally like the suspense.  It's only 3/4 of a second... It takes way longer for real dice to roll.

Playing sound in javascript is a little tricky.  Which method are you planning to use?
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack


Anonymous's picture
Corjay (not verified)
October 11, 2007 - 6:12pm
The simplest I can find. :) Play sound on click.

<EMBED src="bark.wav" HIDDEN=TRUE AUTOSTART="false" MASTERSOUND NAME="soundfile">
<img onClick="javascript:document.soundfile.play()">

Though I'm not sure where I'm supposed to put the sound file. Does it go in the parentheses?

CleanCutRogue's picture
CleanCutRogue
October 11, 2007 - 6:29pm
That is the simplest, but I think it's modal.  The name of the file (the url) goes where you see "bark.wav".  It has to be a wav file (can't be mp3).
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack


Anonymous's picture
Corjay (not verified)
October 11, 2007 - 6:32pm
Wave file is all I need. Does the uploader handle mp3 only? If so, I guess I could do that. Do you have some code for mp3 inclusion?

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 6:34pm
By the way, I thought EMBED was developed for mp3 in the first place.

CleanCutRogue's picture
CleanCutRogue
October 11, 2007 - 7:19pm
Corjay wrote:
By the way, I thought EMBED was developed for mp3 in the first place.
sortof, yes.  It was actually designed to embed a song as a background sound for a webpage.  It can be used to embed nearly any sound file though - even midi files :-P  (memories of Ultima3's midi music on dozens of fantasy RPG websites in the late 80's come to mind...)
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack


Anonymous's picture
Corjay (not verified)
October 11, 2007 - 7:36pm
The embed works fine, but I can't seem to make the onclick command "javascript:document.soundfile.play()" work.

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 7:47pm
I just tried it with the onclick command without the "javascript:", as "document.soundfile.play()", but it still doesn't work.

CleanCutRogue's picture
CleanCutRogue
October 11, 2007 - 7:58pm
embedding wav files relies on apple quicktime to play - not sure why but it does.  Normally a client has to have apple quicktime installed locally on his/her client-side PC.  I told you it's sorta tricky (I looked into doing sound without FLASH and found that javascript supports it only through client-side plug ins).
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack


Anonymous's picture
Corjay (not verified)
October 11, 2007 - 8:16pm
There has got to be a way that is not browser specific, or at least which caters to all browsers by now. Grrr.

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 8:27pm
Okay, thanks to Bill, the code has been reduced and sound added. Thanks, Bill!Smile

Anonymous's picture
w00t (not verified)
October 11, 2007 - 8:43pm

/me is so memorized by the sound and the color shift pattern that
/me rolls again
that I
/me rolls again
are...
/me rolls again
Foot in mouth

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 8:48pm
I know. It's addicting. Foot in mouth

Errors are fixed.

CleanCutRogue's picture
CleanCutRogue
October 11, 2007 - 8:52pm
Corjay wrote:
Okay, thanks to Bill, the code has been reduced and sound added. Thanks, Bill!Smile
look at me I'm white and nerdy...
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack


Anonymous's picture
Corjay (not verified)
October 11, 2007 - 9:28pm
Man, changing code to allow two of those on the same page with different images is one big pain in the wazoo, but I did it. We now have functionality for both the blue die with double digits and the blue die with single digits.

CleanCutRogue's picture
CleanCutRogue
October 11, 2007 - 9:36pm
Can ya get rid of the gray line on the right of the blurred images? -- minor issue, I know...
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack


Anonymous's picture
Corjay (not verified)
October 11, 2007 - 9:43pm
Yeah, I was thinking of that. I'll do it.

Anonymous's picture
Corjay (not verified)
October 11, 2007 - 9:52pm
Okay, the gray line is gone. Refresh your browser and try it again.

Anonymous's picture
Corjay (not verified)
October 12, 2007 - 1:25am
Okay, I provided a smaller version of the dice from the boxed set and I posted the code for each set of dice.

CleanCutRogue's picture
CleanCutRogue
October 12, 2007 - 7:23am
I TOTALLY prefer the smaller version.  Those really *FEEL* like Star Frontiers original dice from the boxed set!  Love it.

If you go to your user profile and click "EDIT", then on the blue "Account" button to get to your personal account settings, you can now enable a "Dice Roller" block in your customization options.  It puts a lil dice roller right under your quicklinks in the left sidebar.

What about rolling other dice quantities - such as a frag grenade's 8d10?
3. We wear sungoggles during the day. Not because the sun affects our vision, but when you're cool like us the sun shines all the time.

-top 11 reasons to be a Yazirian, ShadowShack