# würfelspiel javascript



## yeronimo (13. November 2008)

Hi, 

ich habe angefangen eine art kleines würfelspiel zu bauen. soweit klappt auch alles. aber das bild das für die jeweils gewürfelte zahl angezeigt werden soll entspricht der randomnumber.gif

ist das so moeglich ? 

außerdem sollen nach jedem wurf die zahlen in den inputfeldern upgedatet werden(halt um zu zaehlen wieviele einsen,zweien, dreien usw gewürfelt wurden)


dices.html

```
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" language="javascript">



function throwDice() {
	var randomnumber=Math.floor(Math.random()*6);
	var theNode = getObj("filename");
	theNode.firstChild.nodeValue = "dice/dice"+randomnumber+".gif";;
			
}

function getObj(elementID){
	return document.getElementById(elementID);
}
</script>
    <link rel="stylesheet" type="text/css" href="notboring.css">
</head>
<body>
<div class="logostuff">
<span id="logo">Dices</span>
<span id="logoshadow">Dices</span>
</div>
<p id="filename">test</p>
<div class="boundaries">
<form name="dices">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" size="30" name="throw" value="Throw Dice" onClick="throwDice

();"><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" name="one">&nbsp;&nbsp;one's<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" name="two" id="randomnumber">&nbsp;&nbsp;two's<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" name="three" value="">&nbsp;&nbsp;three's<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" name="four" value="">&nbsp;&nbsp;four's<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" name="five" value="">&nbsp;&nbsp;five's<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="10" name="six" value="">&nbsp;&nbsp;six's<br><br>
</form>
</div>
<div class="image">
<img src=filename"> 
</div>
</body>
</html>
```

die css datei, hier zwar nicht wirklich wichtig. vollständigkeitshalber haeng ich sie aber mal an:

```
form {
	background: rgb(220,220,220);
	color: rgb(0,101,153);
	font-family: arial, sans-serif;
	margin-left: 20px;
	font-size: 14px;
}
#logo {
	position: absolute;
	z-index: 2;
	left: 21px;
	top: 30px;
	color: rgb(0,101,153);
} 
	
#logoshadow {
	position: absolute;
	z-index: 1;
	left: 25px;
	top: 34px;
	color: rgb(220,220,220);
	
} 

div.logostuff {
	font-family: arial, sans-serif;
	font-weight: bolder; 
	font-size: 3em;
}

div.image {
	position: absolute;
	z-index: 2;
	left: 270px;
	top: 110px;
	
}

div.boundaries {
	width: 300px;
	height: 20em;
	border: none;

	position: absolute;
	top: 110px;
	left: 10px;
	clip: rect(0px 200px 380px 0px);
	
}
```

danke fuer alle antworten


----------



## Pius Hermit (14. November 2008)

Nur ein unbedarfter Hinweis von einem Anfänger im Web-Design:
Wenn Du random- Zahlen (vermutlich zwischen 0 und 1) verwendest,
musst Du dann nicht weitere mathematische Operationen (MOD oder ROUND, o.s.ä.) verwenden, um die Ziffern 1...6 zu erhalten?
Nachdenklich,
Ulrich


----------



## yeronimo (14. November 2008)

nein sind ganze zahlen. wenn du auf den button drückst kannst du das oben am dateinmen sehen  

es werden nur zufallszahlen zwischen 0 und 6 generiert.


wie man mein problem lösen kann weiß keiner  ? denke ist doch eigentlich ein recht einfach zu lösendes problem für einen javascript fortgeschrittenen oder ? 

nochmal: 
ich will den mit der randomnumber kreeirten dateinamen zurückgeben und dann damit ueber ein html img tag (vielleicht gehts auch anders, aber eigentlich wr es so geplant) das passende bild dazu ausgeben lassen. 

problem:
der zurueckgegebene dateiname kann irgendwie nicht in den sourceteil vom html img tag gesetzt werden und außerdem auch noch ein "value" fuer die felder erneuert und gesetzt werden(javascript checkt welche zahl gewürfelt wurde und zaehlt dann die kjeweilige variable um 1 hoch)

bin dankbar fuer jede hilfe


----------



## Pius Hermit (14. November 2008)

Vielleicht nimmst Du eine Methode, welche einen "String" returned:

fileName() {
return ...gif"
}


----------



## yeronimo (14. November 2008)

funktioniert das dann zu sagen : 

<img src="stringMethode()"> ? 

ich glaub fast nicht oder ? probiers aber gleich gerne mal aus.


----------



## Pius Hermit (14. November 2008)

Vermutlich brauchst Du noch eine

ladeBild {
fenster = document.GetElementby....
fenster._Parameter für scr_ = ...

Methode.

Bin leider noch nicht Syntax-sicher, aber vielleicht hilft ja die Metasprache


----------



## Sven Mintel (14. November 2008)

yeronimo hat gesagt.:


> funktioniert das dann zu sagen :
> 
> <img src="stringMethode()"> ?
> 
> ich glaub fast nicht oder ? probiers aber gleich gerne mal aus.



Nö, das geht so nicht.

So sollte es was werden 

```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2008-11-01"  />
<title>Test</title>
<script type="text/javascript">
<!--
function throwDice()
{
  var randomnumber=Math.ceil(Math.random()*5); 
  getObj('input_dice').value=randomnumber;
  getObj('img_dice').src='http://www.tutorials.de/forum/images/rating/rating_'+
                          randomnumber+'.gif';
}

function getObj(elementID)
{
    return document.getElementById(elementID);
} 
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<input type="button" value="Throw Dice" onClick="throwDice();">
<img id="img_dice" src="http://www.tutorials.de/forum/clear.gif">
<input id="input_dice">
</body>
</html>
```


----------



## yeronimo (14. November 2008)

astrein  

jedoch noch eine sache, ich versuche den wert des feldes (dem input feld) bei jedem aufruf um 1 zu erhöhen und das dann neu ins´feld einzulesen. 
Jedoch wenn ich das mit 

var ones = getObj('input_dice').value; 
getObj('input_dice').value = ones + 1;


mache oder wenn ich das so 

getObj('input_dice').value += 1;


mache oder wenn ich das so 

getObj('input_dice').value = ones++;

oder so

getObj('input_dice').value = getObj('input_dice').value  + 1;

mache, habs auch schon mit extra rechnung versucht, immer haengt der an die zahl noch eine 1 hinten dran. hab schon mal in goole geguckt, aber die rehcnungen da sehen alle ganauso aus. was mache ich falsch ? 

danke


----------



## yeronimo (14. November 2008)

habs bereits gelöst  !

+ ist irgendwie ein ausnahme operant in javascript weil er auch fuer die vekettung von strings? verwendet wird.

deshalb muss man die zahl "explicit" als zahl kennzeichnen mit Number("1") oder mit Number(getObj.....) 
dann ist es möglich damit zu rechnen.
Hoffe habs so richtig erklärt.

Besten dank  !


----------



## Sven Mintel (14. November 2008)

Jo, du hast es richtig erklärt 

Die values von Formularfeldern sind immer vom Typ String, weshalb dort ohne die Umwandlung per Number() eine String-Verkettung stattfindet statt einer Addition.


----------

