PDA

View Full Version : Using images and arrays to make calculations...



Elvellon
Nov 27th, 2005, 08:14 AM
Hi everyone.

I've been coding a dice game for an assignment at Uni and am stuck. Here's what I'm trying to do:

I have 6 images (representing each side of a dice). I need to display two of these images randomly when the user clicks "Roll the Dice!". I have set up an array with all my images contained, and I have no problem getting two random images to display when the user clicks the button. This is the easy bit. Here's my code:


<script language=JavaScript>
function dice_roll() {
var randice = new Array
randice[0] = "images/1.gif"
randice[1] = "images/2.gif"
randice[2] = "images/3.gif"
randice[3] = "images/4.gif"
randice[4] = "images/5.gif"
randice[5] = "images/6.gif"
var ranimage=Math.round(Math.random()*5)
var ranimage2=Math.round(Math.random()*5)
document.randoimage2.src=randice[ranimage2]
document.randoimage1.src=randice[ranimage]
}
</script>

<form name="roll">
<input type="button" value="Roll the Dice!" onClick="dice_roll()">
</form>

<img src="images/1.gif" width=80 height=80 name="randoimage1">
<img src="images/1.gif" width=80 height=80 name="randoimage2">

The next bit is where I am stuck. I then need to display the outcome of the dice in an alert message. In other words, if the images that represent the numbers 1 and 3 are displayed I need to tell the user that the total equals 4. After that I need to let them know if they've won or lost, but that's a seperate issue. For now I just need to get this to work.

I am completely stumped. Does anyone have any suggestions?

If it helps you understand what I am trying to achieve, click this link (http://elvellonsrequests.50webs.com/game.htm). It's my non-working template.

Thank you in advance to anyone who tries to help out!

PhotoJoe47
Nov 27th, 2005, 08:30 AM
I think this should work:




<script language=JavaScript>
function dice_roll() {
var randice = new Array
randice[0] = "images/1.gif"
randice[1] = "images/2.gif"
randice[2] = "images/3.gif"
randice[3] = "images/4.gif"
randice[4] = "images/5.gif"
randice[5] = "images/6.gif"
var ranimage=Math.round(Math.random()*5)
var ranimage2=Math.round(Math.random()*5)
document.randoimage2.src=randice[ranimage2]
document.randoimage1.src=randice[ranimage]

alert("Dice total = " + (Number(ranimage) + Number(ranimage2) + 2));

}
</script>

<form name="roll">
<input type="button" value="Roll the Dice!" onClick="dice_roll()">
</form>

<img src="images/1.gif" width=80 height=80 name="randoimage1">
<img src="images/1.gif" width=80 height=80 name="randoimage2">



I came back because I noticed that the random number was going to be between 0 - 5 and the images were number 1 - 6. So the total had to be adjusted by plus 2.

Elvellon
Nov 27th, 2005, 08:43 AM
Oooh, so close! Lol. Just had to change the array numbers to get it to work. It was always bringing up a number 2 less than what it was supposed to.

I just changed:



<script language=JavaScript>
function dice_roll() {
var randice = new Array
randice[1] = "images/1.gif"
randice[2] = "images/2.gif"
randice[3] = "images/3.gif"
randice[4] = "images/4.gif"
randice[5] = "images/5.gif"
randice[6] = "images/6.gif"
var ranimage=Math.round(Math.random()*5)
var ranimage2=Math.round(Math.random()*5)
document.randoimage2.src=randice[ranimage2]
document.randoimage1.src=randice[ranimage]

alert("Dice total = " + (Number(ranimage) + Number(ranimage2)));

}
</script>

<form name="roll">
<input type="button" value="Roll the Dice!" onClick="dice_roll()">
</form>

<img src="images/1.gif" width=80 height=80 name="randoimage1">
<img src="images/1.gif" width=80 height=80 name="randoimage2">

Thank you very much for your help! One question though, does it matter that the arrays don't start at 0?

PhotoJoe47
Nov 27th, 2005, 08:50 AM
you were posting while I was writing. Either change will work and no it does not really matter about leaving element 0 of the array null.

_Aerospace_Eng_
Nov 27th, 2005, 08:52 AM
Do you think your professor would mind that you started the array at 0. I know if it were my professor she would say arrays start at 0, blah, blah. Wonder why its off by two though.

PhotoJoe47
Nov 27th, 2005, 08:56 AM
Ok, I change my mind. The change that I made is the one you should use. Because the random number is going to between 0 - 5. Even if you change the * 5 to * 6, the random number will between 0 - 6. So every once in awhile one of the numbers will be 0 and you will get a javascript error.

PhotoJoe47
Nov 27th, 2005, 08:58 AM
Do you think your professor would mind that you started the array at 0. I know if it were my professor she would say arrays start at 0, blah, blah. Wonder why its off by two though.

I wish you people would not post a message I haven't seem while I'm busy writting my reply.:D

Elvellon
Nov 27th, 2005, 08:59 AM
:D Lol

Yeah, I noticed that after a few "dice rolls" I was getting some problems. It wasn't displaying an image at times and was adding 0.

Adding 2 fixes that though, so thank you both very much for your help!

Now I just have to work out how to grade them. How can I store the outcome of my dice roll? Would it be best to set up a variable say "dice_outcome" to make calculations on, or is there a better way?

PhotoJoe47
Nov 27th, 2005, 09:08 AM
:D Lol

Yeah, I noticed that after a few "dice rolls" I was getting some problems. It wasn't displaying an image at times and was adding 0.

Adding 2 fixes that though, so thank you both very much for your help!

Now I just have to work out how to grade them. How can I store the outcome of my dice roll? Would it be best to set up a variable say "dice_outcome" to make calculations on, or is there a better way?

If you are wanting to keep a running total just add the two varibles that were used in the alert message + 2 of course to the variable you will use for the total. Or if you want to keep track of the each pair of dice throws create an array (two single or 1 multi by 2). then have a number rolls counter variable to use to index the array for each roll. That should be enough of a hint. Remember homework is so that you can learn not just copy.:rolleyes:

Elvellon
Nov 27th, 2005, 09:17 AM
Oh no, I'm not copying. :) Believe me I've done the homework, and I do have something in mind to try. I was just checking to see if I was on the right track. ;)

I'm almost finished my assignment, which I consider huge for a newbie like myself, lol.

Thank you very much for your help! I'm sure I'll be back with another question soon. :D

PhotoJoe47
Nov 27th, 2005, 09:32 AM
Oh no, I'm not copying. :) Believe me I've done the homework, and I do have something in mind to try. I was just checking to see if I was on the right track. ;)

I'm almost finished my assignment, which I consider huge for a newbie like myself, lol.

Thank you very much for your help! I'm sure I'll be back with another question soon. :D

Hey, I still learning javascript myself. I'm not going to school (retired). But I like learning and I like learning on real projects. So that is why I am building my own website. So when I get stuck and ask for help here and somebody gives me some code that works I sometimes come back with questions. If after looking at the code I don't understand how it does what it does I will ask for details on the part I don't understand. That way I might be able to figure out ways to change to code to do somethings else that I might want.

Ok I'll get off the soapbox now.:cool:

PhotoJoe47
Nov 27th, 2005, 11:07 AM
I was reading an online book at sams publishing about javascript and saw this example:

function rand(num) { return Math.floor(Math.random() * num) + 1;}

This would create a random interger number between 1 and num.

In case you would like the link to the book (whole book is online)http://www.samspublishing.com/library/library.asp?b=STY_JavaScript_24_hours

Elvellon
Nov 27th, 2005, 11:13 AM
I think it's great that you're still learning JavaScript. :) It makes me feel less dumb, lol.

And thank you very much for going to the trouble to give me that link. I will definately take a look. It might help me with my new problem. Lol.

Elvellon
Nov 27th, 2005, 12:16 PM
Okay, I'm stuck again. Talk about a total mental block, :D.

I am now trying to test to see if the dice roll equals their prediction. The predictions are 1-4, 5-8 and 9-12. So if the dice roll equals 6 and they picked 5-8 then they win their bet. The only problem is that the rolls 5, 7 and 8 can also win their bet too.

So how do I seperate them so that my little program knows this? I was thinking of somehow making the prediction 1-4 equal 'a' and then the dice rolls 1, 2, 3 and 4 equal to 'a' as well so that I can test to see if they match. 5-8 would be 'b' and 9-12 would be 'c', the rolls of 5, 6, 7 and 8 would equal 'b' etc.

:: Scratches head ::

So my dice roll code looks like this
<script language=JavaScript>
function dice_roll() {
var randice = new Array
randice[0] = "images/1.gif"
randice[1] = "images/2.gif"
randice[2] = "images/3.gif"
randice[3] = "images/4.gif"
randice[4] = "images/5.gif"
randice[5] = "images/6.gif"
var ranimage=Math.round(Math.random()*5)
var ranimage2=Math.round(Math.random()*5)
document.randoimage2.src=randice[ranimage2]
document.randoimage1.src=randice[ranimage]

var dice_total = (Number(ranimage) + Number(ranimage2) + 2);
alert("Your roll = " + dice_total);
}
</script>

And my prediction code looks like:

<form name="choice">
<P><B>Pick your outcome:</B></P>
<input type="button" name="outcome1" value="1-4" onmousedown="no_choice()" onClick="user_choice = 1, document.chosen.userchoice.value='1-4', pick()">
<input type="button" name="outcome2" value="5-8" onmousedown="no_choice()" onClick="user_choice = 2, document.chosen.userchoice.value='5-8', pick()">
<input type="button" name="outcome3" value="9-12" onmousedown="no_choice()" onClick="user_choice = 3, document.chosen.userchoice.value='9-12', pick()">
</form>

<form name="chosen">
<input type="text" name="userchoice" value="" size="4">
</form>

<script language="JavaScript">
var user_choice = 0
function pick(form) {
if (user_choice == 1) {
alert("You have chosen 1-4") }
else {
if (user_choice == 2) {
alert("You have chosen 5-8") }
else {
if (user_choice == 3) {
alert("You have chosen 9-12") }
}}}
</script>

The output of the prediction (eg. when the user clicks a button) displays an alert and also displays their choice in a text box.

Obviously I'll need a new function to do this. The only problem is that we weren't taught just how to test this sort of thing, Lol. All my notes on javascript are here (http://dev.wit-tafe.nsw.edu.au/3627b/lo1_1.htm) if you're interested in what I've learned, :).

I can understand if people think that I'm cheating, but we're allowed to ask our teacher for help and have no penalties as long as we ask before the due date, lol.

Any comments would be great.