# Memory Spiel



## hoppi (11. Aug 2009)

Hallo,

habe folgendes Probelm
ich versuche ein Memory zu programmieren.
Das Programm funktioniert auch schon ganz gut.
Allerdings klappt die zufällige Bilderanordnung noch nicht. Es werden einige Bilder öfter als 2 mal angezeigt und andere gar nicht

Ich hab keine Ahnung voran das liegen könnte. Kann mir da vielleicht jemand helfen?

Die Bilderanordnung funktioniert über eine math.random funktion

Hier mein Quelcode wo die Bilder angeordnet werden


```
<script type="text/javascript">

var bilder = new Array(
						"100 Jahre Pfadfinder.jpg", 		"Stamm Hohenlimburg.JPG",
						"Baden Powell.jpg", 				"60 Jahre Stamm Hohenlimburg.JPG",
						"dpsg_banner.jpg", 					"dpsg-banner.jpg",
						"DPSG-Lilie.jpg", 					"wbk09_2.jpg",
						"Friedenslicht2008.jpg", 			"stufen.jpg",
						"jurte_mit_feuer.jpg", 				"lilieGruen2.jpg",
						"Pfadfindergruss.jpg", 				"Lilie_gelb.jpg",
						"woodbadgekltzchen.jpg", 			"WOSM.jpg",
						"Lilie_Kornfeld.jpg", 				"woe_neu.jpg",
						"72stunden.jpg", 					"Westernohe.jpg",
						"80JahreDPSG_logo.jpg", 			"wbk.jpg",
						"dpsg_juffis.jpg", 					"rüthen.jpg",
						"dpsg_logo.jpg", 					"rover.jpg",
						"feuer.jpg", 						"Kluft.jpg", 			
						"friedenslicht-2007.jpg",			"Jurtenburg_Weltjugendtag.jpg",
						"friedenslicht2006.jpg", 			"friedenslicht2006.jpg",
						"Jurte.JPG", 						"Jurte.JPG",
						"Jurtenburg_Weltjugendtag.jpg",		"friedenslicht-2007.jpg",
						"Kluft.jpg", 						"feuer.jpg",
						"rover.jpg", 						"dpsg_logo.jpg",
						"rüthen.jpg", 						"dpsg_juffis.jpg",
						"wbk.jpg", 							"80JahreDPSG_logo.jpg",
						"Westernohe.jpg", 					"72stunden.jpg",
						"woe_neu.jpg", 						"Lilie_Kornfeld.jpg",
						"WOSM.jpg", 						"woodbadgekltzchen.jpg",
						"Lilie_gelb.jpg", 					"Pfadfindergruss.jpg",
						"lilieGruen2.jpg", 					"jurte_mit_feuer.jpg",
						"stufen.jpg", 						"Friedenslicht2008.jpg",
						"wbk09_2.jpg", 						"DPSG-Lilie.jpg",
						"dpsg-banner.jpg", 					"dpsg_banner.jpg",
						"60 Jahre Stamm Hohenlimburg.JPG", 	"Baden Powell.jpg",
						"Stamm Hohenlimburg.JPG", 			"100 Jahre Pfadfinder.jpg"
						);

document.writeln('<table width="1200" height="750" border="1" cellspacing="0" cellpadding="0" align="center">');					

for(i=0; i<=63; i++) {
	var tr_anfang = '';
	var tr_ende = false;
	if ((i==0)||(i==8)||(i==16)||(i==24)||(i==32)||(i==40)||(i==48)||(i==56)){
		tr_anfang = "<tr>";
	} else {
		tr_anfang = '';
	}
	if ((i==7)||(i==15)||(i==23)||(i==31)||(i==39)||(i==47)||(i==55)||(i==63)){
		tr_ende = "</tr>"
	} else {
		tr_ende = '';
	}
       
		zufall = Math.round(Math.random()*(i+1));

		
		
	
	var string = tr_anfang;
	string = string + '<td width="150" height="93.75"><p align="center"><img id="'+i+'" onClick="javascript:bildwechsel(\''+i+'\',\''+bilder[zufall]+'\');" src="Bilder/Fragezeichen.jpg" width="150" height="93.75"></p></td>';
	string = string+tr_ende;
	document.writeln(string);
	
	
}
document.writeln('</table>');
</script>
```


----------



## Opnox (11. Aug 2009)

Im JavaScript Bereich oder sogar in einem extra JavaScript Forum wärst du besser dran.
Für Verirrte - Fragen zu JavaScript - java-forum.org


----------



## hoppi (11. Aug 2009)

Meinst du hier kann mir keiner helfen??


----------



## Illuvatar (11. Aug 2009)

Verschoben.
Eventuell kann das jemand. Wahrscheinlich fragst du aber besser nochmal in einem passenden Forum. Die Leute kommen eben nicht in dieses Forum, um Javascript Fragen zu beantworten.


----------



## Marco13 (11. Aug 2009)

Naja - Java und JavaScript haben ungefähr so viel gemeinsam wie ein Wal und eine Walnuss.

Grundsätzlich kann man aber nachvollziehen, was passiert: Du blendest an jeder Stelle des Gitters _irgendeine_ zufällige Karte ein. Es gibt keinen Mechanismus, der verhindert, dass eine Karte mehrfach oder garnicht angezeigt wird. 

Du willst ja nicht an jeder Gitterstelle irgendeine zufällige Karte anzeigen, sondern 64 Karten in einer zufälligen Reihenfolge. Wie man das in JavaScript umsetzt... mit ein bißchen Websuche und probieren würd' ich's hinkreigen, aber so aus dem Stegreif... :bahnhof: 

EDIT: Ach, es sollen immer ALLE Karten sein - dann ist das nicht so schwer: Du musst nur am Anfang den Array mischen, und dann einfach der Reihe nach alle Karten anzeigen:

```
for (int i=0; i<64; i++)
{
    int index0 = zufälligerIndex();
    int index1 = zufälligerIndex();
    Bild temp = array[index0];
    array[index0] = array[index1];
    array[index1] = temp;
}
```


----------



## hoppi (11. Aug 2009)

Ist halt nur die Frage wie das funktionieren soll.
Hab bei google schon gesucht aber keine Lösung zu dem Probelm gefunden.

Dein (Marco13) Lösungsvorschlag versteh ich nicht so ganz.
Wie meinst du das?


----------



## faetzminator (11. Aug 2009)

Also, du hast n (n%2 == 0; gerade Anzahl) Felder. In diesen n Feldern sollen n/2 (immer zwei gleiche) verschiedene Bilder angezeigt werden. Also machst du dir ein zufällig generiertes Array mit n/2 Bildern (falls dies nicht der Gesamtanzahl der Bilder entspricht; ansonsten gleich diese verwenden). Mit diesem wiederum machst du ein Array mit n Einträgen, in welchem jeweils jeder der n/2 Einträge zwei Mal erscheint. Dann kannst du einfach jedes Feld dieses Arrays ausgeben. Also in Pseudocode etwa so:

```
var boardSize = 64;
var usedImages = getRandomFields(allImages, boardSize / 2); // 32 bilder zufällig aus allen holen
usedImages = duplicateEntries(usedImages); // die bilder duplizieren (rein aus schönheit), aus 32 mach 64
usedImages = shuffle(usedImages); // alles schön mischen
for(i = 0; i < boardSize; i++) { // jedes bild ausgeben, dein code mit "<tr>" etc kann auch generisch gemacht werden
    [...]
}
```


----------



## hoppi (11. Aug 2009)

weiß grad nicht wirklich wie ich das einbauen soll.

Bin auch noch ein recht neu auf dem gebiet.

Kannst du mir bitte einen genauere beschreibung geben wie das klappt


----------



## faetzminator (11. Aug 2009)

so etwa:

```
document.writeln('<table width="1200" height="750" border="1" cellspacing="0" cellpadding="0" align="center">');                    

var width = 8;
var boardSize = width * width;
var usedImages = getRandomFields(allImages, boardSize / 2); // 32 bilder zufällig aus allen holen
usedImages = duplicateEntries(usedImages); // die bilder duplizieren (rein aus schönheit), aus 32 mach 64
usedImages = shuffle(usedImages); // alles schön mischen

for(i = 0; i < boardSize; i++) {
    if (i % width == 0) {
        document.writeln('<tr>');
    }
    document.writeln('<td width="150" height="93.75"><p align="center">');
    document.writeln('<img id="'+i+'" onClick="javascript:bildwechsel(\''+i+'\',\''+usedImages[i]+'\');" src="Bilder/Fragezeichen.jpg" width="150" height="93.75" alt="" />');
    document.writeln('</p></td>');
    if ((i + 1) % width == 0) {
        document.writeln('</tr>');
    }
}

document.writeln('</table>');
```


----------



## hoppi (11. Aug 2009)

an welcher stelle greif ich denn jetzt auf mein array zu???


----------



## faetzminator (11. Aug 2009)

Du nennst dein Array mit den Pfaden [c]allImages[/c] und implementierst die Funktionen [c]getRandomFields(array, size)[/c], [c]duplicateEntries(array)[/c] und [c]shuffle(array)[/c].


----------



## hoppi (11. Aug 2009)

Mein Quelltext sieht jetzt so aus.
allerdings klappt jetzt nix mehr


```
<script type="text/javascript">

var bilder = new Array(
						"100 Jahre Pfadfinder.jpg", 		"Stamm Hohenlimburg.JPG",
						"Baden Powell.jpg", 				"60 Jahre Stamm Hohenlimburg.JPG",
						"dpsg_banner.jpg", 					"dpsg-banner.jpg",
						"DPSG-Lilie.jpg", 					"wbk09_2.jpg",
						"Friedenslicht2008.jpg", 			"stufen.jpg",
						"jurte_mit_feuer.jpg", 				"lilieGruen2.jpg",
						"Pfadfindergruss.jpg", 				"Lilie_gelb.jpg",
						"woodbadgekltzchen.jpg", 			"WOSM.jpg",
						"Lilie_Kornfeld.jpg", 				"woe_neu.jpg",
						"72stunden.jpg", 					"Westernohe.jpg",
						"80JahreDPSG_logo.jpg", 			"wbk.jpg",
						"dpsg_juffis.jpg", 					"rüthen.jpg",
						"dpsg_logo.jpg", 					"rover.jpg",
						"feuer.jpg", 						"Kluft.jpg", 			
						"friedenslicht-2007.jpg",			"Jurtenburg_Weltjugendtag.jpg",
						"friedenslicht2006.jpg", 			"Jurte.JPG" 						
						);


var width = 8;
var boardSize = width * width;
var usedImages = getRandomFields(allImages, boardSize / 2); // 32 bilder zufällig aus allen holen
usedImages = duplicateEntries(usedImages); // die bilder duplizieren (rein aus schönheit), aus 32 mach 64
usedImages = shuffle(usedImages); // alles schön mischen

for(i = 0; i < boardSize; i++) {
    if (i % width == 0) {
        document.writeln('<tr>');
    }
    document.writeln('<td width="150" height="93.75"><p align="center">');
    document.writeln('<img id="'+i+'" onClick="javascript:bildwechsel(\''+i+'\',\''+usedImages[i]+'\');" src="Bilder/Fragezeichen.jpg" width="150" height="93.75" alt="" />');
    document.writeln('</p></td>');
    if ((i + 1) % width == 0) {
        
		document.writeln('</tr>');
    }
}
</script>
```


Fehlermeldung in zeile 40:
missing } in compound statement


[Klammr ergänzt]


----------



## hoppi (11. Aug 2009)

ah problem gelöst am ende fehlte ne }.

jetzt sagt er mir, dass getrandomfields nicht definiert ist. was muss ich da noch einbauen??


----------



## faetzminator (11. Aug 2009)

Wie bereits erwähnt musst du diese noch implementieren.
[c]getRandomFields()[/c]:
wenn die grösse des gegebenen Arrays <= dem 2. Param ist, dieses zurückgeben. Ansonsten zufällige Elemente in einem neuen Array zurückgeben, so dass keines zwei Mal vorkommt.
[c]duplicateEntries()[/c]:
jeden Eintrag im Array verdoppeln und Array zurückgeben
[c]shuffle()[/c]:
alle Einträge wild durchmischen


----------



## hoppi (11. Aug 2009)

wie implementiere ich die??

wie gesagt ich bin zeimlich neu auf dem gebiet
wäre schön wenn du mir das noch erklären könntest


----------



## faetzminator (11. Aug 2009)

1. Erklärt hab ich dir das schon
2. Ich kaue es dir extra nicht vor, da der Lernfaktor 0 wär
3. javascript shuffle array - Google Search
3b.: Verwend in [c]getRandomFields()[/c] ebenfalls [c]shuffle()[/c] und mach ein neues Array mit den ersten n Einträgen des alten
4. Eine Funktion in JS schreibt man so:

```
function functionName(paramA, paramB) {
    [...]
    return x;
}
```


----------



## hoppi (12. Aug 2009)

Habe das Problem jetzt so gelöst


```
function arrayShuffle(){
  var tmp, rand;
  for(var i =0; i < this.length; i++){
    rand = Math.floor(Math.random() * this.length);
    tmp = this[i]; 
    this[i] = this[rand]; 
    this[rand] =tmp;
  }
}

Array.prototype.shuffle =arrayShuffle;

Spieler1 = prompt("Spieler 1 gib bitte deinen Namen ein", "")
if (Spieler1 == null) {
		Spieler1 = 'Spieler 1'
		}
	else if (Spieler1 == '') {
		Spieler1 = 'Spieler 1'
		}
Spieler2 = prompt("Spieler 2 gib bitte deinen Namen ein", "")
if (Spieler2 == null) {
		Spieler2 = 'Spieler 2'
		}
	else if (Spieler2 == '') {
		Spieler2 = 'Spieler 2'
		}

document.getElementById('spieler1').innerHTML = 'Anzahl der gefundenen Paare '+ Spieler1+ ': 0';
document.getElementById('spieler2').innerHTML = 'Anzahl der gefundenen Paare '+ Spieler2+ ': 0';

var spieler = 0
var zahl = 0

zahl = (Math.random())

if (zahl <0.50) {
	alert (''+Spieler1 + ' fängt an!');
	spieler = 1
}
else if (zahl >0.50) {
	alert (''+Spieler2 + ' fängt an!');
	spieler = 0
}

var bilder = new Array(
						"100 Jahre Pfadfinder.jpg", 		"Stamm Hohenlimburg.JPG",
						"Baden Powell.jpg", 				"60 Jahre Stamm Hohenlimburg.JPG",
						"dpsg_banner.jpg", 					"dpsg-banner.jpg",
						"DPSG-Lilie.jpg", 					"wbk09_2.jpg",
						"Friedenslicht2008.jpg", 			"stufen.jpg",
						"jurte_mit_feuer.jpg", 				"lilieGruen2.jpg",
						"Pfadfindergruss.jpg", 				"Lilie_gelb.jpg",
						"woodbadgekltzchen.jpg", 			"WOSM.jpg",
						"Lilie_Kornfeld.jpg", 				"woe_neu.jpg",
						"72stunden.jpg", 					"Westernohe.jpg",
						"80JahreDPSG_logo.jpg", 			"wbk.jpg",
						"dpsg_juffis.jpg", 					"ruethen.jpg",
						"dpsg_logo.jpg", 					"rover.jpg",
						"feuer.jpg", 						"Kluft.jpg", 			
						"friedenslicht-2007.jpg",			"Jurtenburg_Weltjugendtag.jpg",
						"friedenslicht2006.jpg", 			"friedenslicht2006.jpg",
						"Jurte.JPG", 						"Jurte.JPG",
						"Jurtenburg_Weltjugendtag.jpg",		"friedenslicht-2007.jpg",
						"Kluft.jpg", 						"feuer.jpg",
						"rover.jpg", 						"dpsg_logo.jpg",
						"ruethen.jpg", 						"dpsg_juffis.jpg",
						"wbk.jpg", 							"80JahreDPSG_logo.jpg",
						"Westernohe.jpg", 					"72stunden.jpg",
						"woe_neu.jpg", 						"Lilie_Kornfeld.jpg",
						"WOSM.jpg", 						"woodbadgekltzchen.jpg",
						"Lilie_gelb.jpg", 					"Pfadfindergruss.jpg",
						"lilieGruen2.jpg", 					"jurte_mit_feuer.jpg",
						"stufen.jpg", 						"Friedenslicht2008.jpg",
						"wbk09_2.jpg", 						"DPSG-Lilie.jpg",
						"dpsg-banner.jpg", 					"dpsg_banner.jpg",
						"60 Jahre Stamm Hohenlimburg.JPG", 	"Baden Powell.jpg",
						"Stamm Hohenlimburg.JPG", 			"100 Jahre Pfadfinder.jpg"
						);
						
bilder.shuffle();

document.writeln('<table width="1200" height="750" border="1" cellspacing="0" cellpadding="0">');					

for(i=0; i<=63; i++) {
	var tr_anfang = '';
	var tr_ende = false;
	if ((i==0)||(i==8)||(i==16)||(i==24)||(i==32)||(i==40)||(i==48)||(i==56)){
		tr_anfang = "<tr>";
	} else {
		tr_anfang = '';
	}
	if ((i==7)||(i==15)||(i==23)||(i==31)||(i==39)||(i==47)||(i==55)||(i==63)){
		tr_ende = "</tr>"
	} else {
		tr_ende = '';
	}
      
	var string = tr_anfang;
	string = string + '<td width="150" height="93.75"><p align="center"><img id="'+i+'" onClick="javascript:bildwechsel(\''+i+'\',\''+bilder[i]+'\');" src="Bilder/Fragezeichen.jpg" width="150" height="93.75"></p></td>';
	string = string+tr_ende;
	document.writeln(string);
	
}
document.writeln('</table>');
```


----------



## hoppi (12. Aug 2009)

Habe aber jetzt noch eine weitere Frage.

Gibt es eine möglichkeit ein Fenster ähnlich wie ein alert fenster zu öffnen, wo zwei buttons mit ja und nein zur auswahl stehen??
Habe das bis jetzt mit nem confirm gelöst
aber ok und abbrechen ist nicht das was ich haben möchte


```
neustart = confirm("Lust auf eine neue Runde?");
				if (neustart == false) {
				window.open ("Ende.html",target="_self");
				}
				else {
				window.location.reload();
```


----------

