Memory Spiel

Status
Nicht offen für weitere Antworten.
H

hoppi

Mitglied
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

Java: 
<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>
 
I

Illuvatar

Top Contributor
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.
 
M

Marco13

Top Contributor
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:
Code: 
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;
}
 
Zuletzt bearbeitet:
H

hoppi

Mitglied
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

faetzminator

Gesperrter Benutzer
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:
Code: 
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
    [...]
}
 
H

hoppi

Mitglied
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

faetzminator

Gesperrter Benutzer
so etwa:
Code: 
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>');
 
faetzminator

faetzminator

Gesperrter Benutzer
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].
 
H

hoppi

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

Java: 
<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]
 
Zuletzt bearbeitet:
H

hoppi

Mitglied
ah problem gelöst am ende fehlte ne }.

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

faetzminator

Gesperrter Benutzer
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
 
H

hoppi

Mitglied
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

faetzminator

Gesperrter Benutzer
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:
Code: 
function functionName(paramA, paramB) {
    [...]
    return x;
}
 
H

hoppi

Mitglied
Habe das Problem jetzt so gelöst

Java: 
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>');
 
H

hoppi

Mitglied
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

Java: 
 neustart = confirm("Lust auf eine neue Runde?");
				if (neustart == false) {
				window.open ("Ende.html",target="_self");
				}
				else {
				window.location.reload();
 
Status
Nicht offen für weitere Antworten.
Ähnliche Java Themen
  Titel Forum Antworten Datum
S Memory Spiel Angular, React, JQuery - Fragen zu JavaScript 3

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben