 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! |
October 10, 2007 - 10:10pm |  wow, I rolled a One Hundred Two....... 102  do I get a prize? |
 October 10, 2007 - 11:17pm | wow, I rolled a One Hundred Two....... 102 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 |
 October 11, 2007 - 7:44am | wow, I rolled a One Hundred Two....... 102 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. |
 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. |
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 |
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? |
October 11, 2007 - 3:50pm | the bottom red dice does not roll.....just the blue one. |
October 11, 2007 - 4:02pm | 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 |
October 11, 2007 - 4:21pm | the bottom red dice does not roll.....just the blue one. Yeah, I fixed the bad roll. |
October 11, 2007 - 4:09pm | 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. |
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. |
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? |
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. |
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? |
October 11, 2007 - 6:34pm | By the way, I thought EMBED was developed for mp3 in the first place. |
October 11, 2007 - 7:19pm | 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. |
October 11, 2007 - 7:36pm | The embed works fine, but I can't seem to make the onclick command "javascript:document.soundfile.play()" work. |
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. |
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. |
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. |
October 11, 2007 - 8:27pm | Okay, thanks to Bill, the code has been reduced and sound added. Thanks, Bill! |
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  ™ |
October 11, 2007 - 8:48pm | I know. It's addicting. Errors are fixed. |
October 11, 2007 - 8:52pm | Okay, thanks to Bill, the code has been reduced and sound added. Thanks, Bill! 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. |
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. |
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. |
October 11, 2007 - 9:43pm | Yeah, I was thinking of that. I'll do it. |
October 11, 2007 - 9:52pm | Okay, the gray line is gone. Refresh your browser and try it again. |
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. |
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. |
