...

View Full Version : Random Number Reset



sherlockturtle
07-25-2011, 04:23 PM
I am makeing a dice game and this is how i generate the numbers
var randomnumber1=Math.floor(Math.random()*13)But i have to relaode the page each time to randomize it again. How can i do this with out reloading the page? I am using a button to set the function of.

Philip M
07-25-2011, 06:09 PM
But i have to relaode the page each time to randomize it again. How can i do this with out reloading the page? I am using a button to set the function of.

Why? Each time the function is called it will generate a different random number.


<script type = "text/javascript">
function genrandy() {
for (var i =0; i<20; i++){
var randomnumber1 = Math.floor(Math.random()*13); // generates 0-12
document.write(randomnumber1 + " " );
}
}
genrandy();
</script>


Quizmaster: King Edward VIII abdicated the throne in order to marry whom?
Contestant: Anne Boleyn

sherlockturtle
07-25-2011, 06:14 PM
When i used it when i click a button to activiate it then the random number goes to a input box so i can read maby its the input box....
Edit(also can it do this wihtout reloading the page???)

jmrker
07-25-2011, 07:53 PM
Alternative attempt...



<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function getRandomNumber() {
return Math.floor(Math.random()*6)+1;
}
function RollDice() {
document.getElementById('dice1').innerHTML = getRandomNumber();
document.getElementById('dice2').innerHTML = getRandomNumber();
document.getElementById('dice3').innerHTML = getRandomNumber();
document.getElementById('dice4').innerHTML = getRandomNumber();
document.getElementById('dice5').innerHTML = getRandomNumber();
}
window.onload = function() {
RollDice();
}
</script>
<style type="text/css">
.dice { height:50; width:50; border:1px solid blue; }
</style>

</head>
<body>
<button onclick="RollDice()">Roll Dice</button>
<p>
<span class="dice" id="dice1"></span>
<span class="dice" id="dice2"></span>
<span class="dice" id="dice3"></span>
<span class="dice" id="dice4"></span>
<span class="dice" id="dice5"></span>
<p>
</body>
</html>

sherlockturtle
07-25-2011, 08:02 PM
Alternative attempt...



<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function getRandomNumber() {
return Math.floor(Math.random()*6)+1;
}
function RollDice() {
document.getElementById('dice1').innerHTML = getRandomNumber();
document.getElementById('dice2').innerHTML = getRandomNumber();
document.getElementById('dice3').innerHTML = getRandomNumber();
document.getElementById('dice4').innerHTML = getRandomNumber();
document.getElementById('dice5').innerHTML = getRandomNumber();
}
window.onload = function() {
RollDice();
}
</script>
<style type="text/css">
.dice { height:50; width:50; border:1px solid blue; }
</style>

</head>
<body>
<button onclick="RollDice()">Roll Dice</button>
<p>
<span class="dice" id="dice1"></span>
<span class="dice" id="dice2"></span>
<span class="dice" id="dice3"></span>
<span class="dice" id="dice4"></span>
<span class="dice" id="dice5"></span>
<p>
</body>
</html>


Thanks thats exatly what i need now i just have to integrate the dice into my game and change it! but how could i change dice1-dice5 to be input boxes?

sherlockturtle
07-25-2011, 09:56 PM
Heres more or less the bigger picture I have the random number generator.
var randomnumber1=Math.floor(Math.random()*13) and then the value of that is placed in input boxes after pressing a button.
function Roll(){
document.getElementById("D1").value = randomnumber1;
<input type="Text" ID="D1" size="1" value=" " READONLY />


But i can only press the button roll once then i have to reload the page.

devnull69
07-25-2011, 10:02 PM
This is because you are generating the random number only once ... in the global scope ... why don't you just do it inside the Roll() function right before you change the value of the input??


function Roll(){
var randomnumber1=Math.floor(Math.random()*13);
document.getElementById("D1").value = randomnumber1;
}

Philip M
07-25-2011, 10:08 PM
Well, yes, as you are only generating the random number once.


<script type = "text/javascript">
function Roll() {
var randomnumber1 = Math.floor(Math.random()*13); // generates 0-12
document.getElementById("D1").value = randomnumber1;
}
</script>

<input type = "button" value = "Roll" onclick = "Roll()">
<input type="text" id="D1" size="1" value=" " readonly>

sherlockturtle
07-25-2011, 10:09 PM
Thanks you devnull69 and Philiph M

Old Pedant
07-25-2011, 10:34 PM
Ummm.... How can you roll a zero if you roll a pair of dice? For that matter, how can you roll a 1? And not only that, as that code exists, the likelihood of rolling a 7 is the same as the likelihood of rolling a 12. Not a realistic simulation of rolling a pair of dice.

If you *REALLY* want to simulate rolling a *PAIR* of dice, you must make two separate "rolls", one per die.

Thus:


<script type = "text/javascript">
function Roll(form) {
var die1 = 1 + Math.floor(Math.random() * 6);
var die2 = 1 + Math.floor(Math.random() * 6);
form.D1.value = die1;
form.D2.value = die2;
form.Total.value = die1 + die2;
}
</script>
...
<form>
<input type="button" value="Roll" onclick="Roll(this.form)">
<input type="text" name="D1" size="1" value=" " readonly>
<input type="text" name="D2" size="1" value=" " readonly>
<input type="text" name="Total" size="2" value=" " readonly>
</form>
...

Of course, if you really *DO* have a funky 13-sided die, then doing

var randomnumber1 = Math.floor(Math.random()*13); // generates 0-12
could make sense. But I don't know of any way to make a 13-sided die in real life that would have an equal chance of each of the 13 numbers coming up.

jmrker
07-26-2011, 01:51 AM
I'm with 'Old Pedant' in that I don't understand the 13 sided die,
but if you want to use the <input> tag, this is one modification.

Note #1: If you don't want the user to change the random value generated
then add a "readonly" to the input tag, like:
<input type="text" class="dice" id="dice1" size="1" readonly>

Note #2: You could get fancy and substitute a die image for the <input> tags
with an <img> tag. Change the source of the image to match the random # generated.



<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function getRandomNumber() {
return Math.floor(Math.random()*6)+1;
}
function RollDice() {
document.getElementById('dice1').value = getRandomNumber();
document.getElementById('dice2').value = getRandomNumber();
document.getElementById('dice3').value = getRandomNumber();
document.getElementById('dice4').value = getRandomNumber();
document.getElementById('dice5').value = getRandomNumber();
}
window.onload = function() {
RollDice();
}
</script>
<style type="text/css">
.dice { border:1px solid blue; font-size:3em; }
</style>

</head>
<body>
<button onclick="RollDice()">Roll Dice</button>
<p>
<input type="text" class="dice" id="dice1" size="1">
<input type="text" class="dice" id="dice2" size="1">
<input type="text" class="dice" id="dice3" size="1">
<input type="text" class="dice" id="dice4" size="1">
<input type="text" class="dice" id="dice5" size="1">
<p>
</body>
</html>

Good Luck again!
:)

bullant
07-26-2011, 02:28 AM
Rather than hard code the number of dice into a function you could as another option create a single die object and then create as many instances of it you need for the number of dice you need.

In this demo, you input how many dice you want to throw and then when you click the Roll Dice button, the resuls of each die are shown.

If you want to display the results of the individual dice in html elements, imo it is better to create the elements dynamically according to the number of dice created. Otherwise, if you hard code the html results elements you will need to edit the html if the number of dice changes.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
function DieO(){
this.getValue = function(){
return 1+Math.floor(Math.random()*6);
}
}
function rollDie(){
var str='';
for(i=0; i < dieA.length; i++){
str += 'Die '+ (i+1) + ' = '+ dieA[i].getValue()+"\n";
}
alert(str);
}
window.onload=function(){
document.getElementById('btnCreateDice').onclick=function(){
var numDice = new Number(document.getElementById('txtNumDice').value);
dieA = new Array();
for(i=0; i < numDice; i++){
dieA[i] = new DieO();
}
alert(dieA.length+' dice created');
}
document.getElementById('btnRollDice').onclick=rollDie;
}
</script>
</head>
<body>
<div>
Enter number of dice you want to throw:
<input type="text" id="txtNumDice" />
<button id="btnCreateDice">Create Dice</button>
</div>
<div>
<button id="btnRollDice">Roll Dice</button>
</div>
</body>
</html>

bullant
07-26-2011, 04:20 AM
I don't know of any way to make a 13-sided die in real life that would have an equal chance of each of the 13 numbers coming up.

You could build a mould to make the dice. The mould would be a "sphere" with 13 equally sized and spaced "flat spots" on its surface. When you roll the "sphere" it will eventually come to rest on one of the flat spots.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum