[GELÖST] Memory Spiel in JavaScript

TK102 · 01. Aug. 2016

Hallo Zusammen,

ich bin gerade dabei ein Memory Spiel zu schreiben und brauche ein wenig Hilfe. Ich bekomme es nicht hin, das man nicht mehr als 2 Karten anklicken kann ;/ Außerdem werden bei einem Fehlzug immer alle Karten resetet anstatt nur die die falsch waren (Hab keine Idee wie ich das Realisieren kann)

Dazu muss man sagen, das ich ein totaler Bob im Programmieren bin und das definitiv zu meinen Schwächen zählt. Hoffe mir kann jemand helfen.

HTML:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>

<title>Memory9.0</title>
<style type="text/css">
#Spielfeld {
	width: 300px;
	height: 300px;
	margin: auto;
	background-color: yellow;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

}
.Zellen {
	width: 50px;
	height: 50px;
	
}
table {
	border: 1px solid;
	border-spacing: 10px 10px;
	border-collapse: separate;table-layout: fixed;
	height: 300px;
	width: 300px;
	text-align: center;
	border-collapse: separate;
}

</style>

<script type="text/javascript" language="JavaScript">
var array = ['Server','Switch','HDD','SSD','SSHD','KVM','Server','Switch','HDD','SSD','SSHD','KVM'] //Enthält Werte für die einzelnen Karten
var werte = [];																						//Leerer Array in dem später die zu vergleichenden Karten stehen
var num = 0;																						//Zahl für den Counter(Max 2 angeklickte karten)
var status = 1;																						//Status der übergeben wird, um die flip funktion zu disabln
function shuffle(array) {																			//Mischt den Array durch
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}
function reset() {																					//Flippt alle umgedrehten Karten wieder zurück
document.getElementById("1").innerHTML = ("Klick!");
document.getElementById("2").innerHTML = ("Klick!");
document.getElementById("3").innerHTML = ("Klick!");
document.getElementById("4").innerHTML = ("Klick!");
document.getElementById("5").innerHTML = ("Klick!");
document.getElementById("6").innerHTML = ("Klick!");
document.getElementById("7").innerHTML = ("Klick!");
document.getElementById("8").innerHTML = ("Klick!");
document.getElementById("9").innerHTML = ("Klick!");
document.getElementById("10").innerHTML = ("Klick!");
document.getElementById("11").innerHTML = ("Klick!");
document.getElementById("12").innerHTML = ("Klick!");
num = 0;
werte=[];
}

</script>
</head>

<body>
<script type="text/javascript" language="JavaScript">
shuffle(array);

</script>

<div id="Spielfeld">
 <table border="1">
	<tr>
	 <td class="Zellen" id="1"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="2"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="3"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="4"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>                                              
	<tr>                                               
	 <td class="Zellen" id="5"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="6"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="7"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="8"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>                                             
	<tr>                                              
	 <td class="Zellen" id="9"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="10"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="11"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="12"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>
 </table>
	<input type="button" onclick="reset()" value="ResetAll"/>
</div> 
<script type="text/javascript" language="JavaScript">

function onclick() {																				//Funktion, um die flip funktion aufzurufen und die entsprechend angeklickten Felder definiert	
		document.getElementById("1").onclick = function() {flip(1);count()};
		document.getElementById("2").onclick = function() {flip(2);count()};
		document.getElementById("3").onclick = function() {flip(3);count()};
		document.getElementById("4").onclick = function() {flip(4);count()};
		document.getElementById("5").onclick = function() {flip(5);count()};
		document.getElementById("6").onclick = function() {flip(6);count()};
		document.getElementById("7").onclick = function() {flip(7);count()};
		document.getElementById("8").onclick = function() {flip(8);count()};
		document.getElementById("9").onclick = function() {flip(9);count()};
		document.getElementById("10").onclick = function() {flip(10);count()};
		document.getElementById("11").onclick = function() {flip(11);count()};
		document.getElementById("12").onclick = function() {flip(12);count()}; 
	}

function count() {																					//Zählt wie oft geklickt wurde, setzt Status um
	
	num++;
	if (num > 2) {
	alert("Nicht mehr als 2 anklicken, Programm status: crashed!");
	status =0;
	//document.getElementByName("onclick").function.disabled;
	}
}

function flip(id) {																					//Dreht die angeklickten Karten um und bereitet den leeren Array zum vergleich vor
	if (status ==1) {
	document.getElementById(id).innerHTML = array[id-1];
	werte.push(array[id-1]);
	setTimeout(function(){compare(); }, 1000);
	}
}

function compare() {																				//Vergleicht den Inhalt des Arrays miteinander und entscheidet dann, ob resetet wird oder nicht
		
	if (werte.length ==2) {
		if (werte[0]==werte[1]) {
			num = 0;			
		} else {
			num = 0;
			reset();
		}
		werte=[];
	}
}
//setTimeout(function(){ alert("Sind nicht gleich"); }, 3000);
//compare(array, werte);

onclick();
</script>

</body>
</html>

- - - Aktualisiert - - -

Update: Ich habe das Problem, das nicht mehr als 2 Karten angeklickt werden können gelöst.

Hier ist das neue Skipt:

HTML:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>

<title>Memory9.0</title>
<style type="text/css">
#Spielfeld {
	width: 300px;
	height: 300px;
	margin: auto;
	background-color: yellow;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

}
.Zellen {
	width: 50px;
	height: 50px;
	
}
table {
	border: 1px solid;
	border-spacing: 10px 10px;
	border-collapse: separate;table-layout: fixed;
	height: 300px;
	width: 300px;
	text-align: center;
	border-collapse: separate;
}

</style>

<script type="text/javascript" language="JavaScript">
var array = ['Server','Switch','HDD','SSD','SSHD','KVM','Server','Switch','HDD','SSD','SSHD','KVM'] //Enthält Werte für die einzelnen Karten
var werte = [];																						//Leerer Array in dem später die zu vergleichenden Karten stehen
var num = 0;																						//Zahl für den Counter(Max 2 angeklickte karten)
var status = 1;																						//Status der übergeben wird, um die flip funktion zu disabln
function shuffle(array) {																			//Mischt den Array durch
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}
function reset() {																					//Flippt alle umgedrehten Karten wieder zurück
document.getElementById("1").innerHTML = ("Klick!");
document.getElementById("2").innerHTML = ("Klick!");
document.getElementById("3").innerHTML = ("Klick!");
document.getElementById("4").innerHTML = ("Klick!");
document.getElementById("5").innerHTML = ("Klick!");
document.getElementById("6").innerHTML = ("Klick!");
document.getElementById("7").innerHTML = ("Klick!");
document.getElementById("8").innerHTML = ("Klick!");
document.getElementById("9").innerHTML = ("Klick!");
document.getElementById("10").innerHTML = ("Klick!");
document.getElementById("11").innerHTML = ("Klick!");
document.getElementById("12").innerHTML = ("Klick!");
num = 0;
werte=[];
}

</script>
</head>

<body>
<script type="text/javascript" language="JavaScript">
shuffle(array);

</script>

<div id="Spielfeld">
 <table border="1">
	<tr>
	 <td class="Zellen" id="1"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="2"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="3"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="4"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>                                              
	<tr>                                               
	 <td class="Zellen" id="5"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="6"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="7"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="8"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>                                             
	<tr>                                              
	 <td class="Zellen" id="9"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="10"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="11"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="12"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>
 </table>
	<input type="button" onclick="reset()" value="ResetAll"/>
</div> 
<script type="text/javascript" language="JavaScript">

function onclick() {																				//Funktion, um die flip funktion aufzurufen und die entsprechend angeklickten Felder definiert	
		document.getElementById("1").onclick = function() {flip(1)};
		document.getElementById("2").onclick = function() {flip(2)};
		document.getElementById("3").onclick = function() {flip(3)};
		document.getElementById("4").onclick = function() {flip(4)};
		document.getElementById("5").onclick = function() {flip(5)};
		document.getElementById("6").onclick = function() {flip(6)};
		document.getElementById("7").onclick = function() {flip(7)};
		document.getElementById("8").onclick = function() {flip(8)};
		document.getElementById("9").onclick = function() {flip(9)};
		document.getElementById("10").onclick = function() {flip(10)};
		document.getElementById("11").onclick = function() {flip(11)};
		document.getElementById("12").onclick = function() {flip(12)}; 
	}

//function count() {																					//Zählt wie oft geklickt wurde, setzt Status um
//	
//	num++;
//	if (num > 2) {
//	alert("Nicht mehr als 2 anklicken, Programm status: crashed!");
//	status =0;
//	//document.getElementByName("onclick").function.disabled;
//	}
//}

function flip(id) {																					//Dreht die angeklickten Karten um und bereitet den leeren Array zum vergleich vor
	num++	
	if (num > 2) {
	alert("Nicht mehr als 2 anklicken, Programm status: crashed!");
	} else {
	document.getElementById(id).innerHTML = array[id-1];
	werte.push(array[id-1]);
	setTimeout(function(){compare(); }, 1000);
	}
}

function compare() {																				//Vergleicht den Inhalt des Arrays miteinander und entscheidet dann, ob resetet wird oder nicht
		
	if (werte.length ==2) {
		if (werte[0]==werte[1]) {
			num = 0;			
		} else {
			num = 0;
			reset();
		}
		werte=[];
	}
}
//setTimeout(function(){ alert("Sind nicht gleich"); }, 3000);
//compare(array, werte);

onclick();
</script>

</body>
</html>

tsseh · 01. Aug. 2016

TK102 schrieb:
Ich bekomme es nicht hin, das man nicht mehr als 2 Karten anklicken kann ;/

erst zählen dann flippen. außerdem den status im flip nicht nur abprüfen sondern hinterher auch wieder zurücksetzen

TK102 schrieb:
Außerdem werden bei einem Fehlzug immer alle Karten resetet anstatt nur die die falsch waren (Hab keine Idee wie ich das Realisieren kann)

nur die beiden die umgedreht wurden wieder zurücksetzen

TK102 · 01. Aug. 2016

nein leider eben nicht. Wenn du 2 Karten richtig getippt hast und dann danach ein paar falsch, dann werden auch die richtigen wieder zurück gesetzt

Das zählen usw hab ich nun schon selbst gelöst.

mikdoe · 01. Aug. 2016

ist hier alles gelöst oder noch was offen?

TK102 · 01. Aug. 2016

es ist noch etwas offen.

tsseh · 01. Aug. 2016

TK102 schrieb:
nein leider eben nicht. Wenn du 2 Karten richtig getippt hast und dann danach ein paar falsch, dann werden auch die richtigen wieder zurück gesetzt

ja, weil du alle karten wieder zurücksetzt, du darfst aber nur die 2 die umgedreht wurden wieder zurücksetzen

TK102 · 01. Aug. 2016

Das ist mir bewusst!^^ Ich wollte wissen wie ich nur die zurücksetze, die ich auch angeklickt habe...
Das es irgendwie über die ID´s funktionieren könnte ist mir klar, aber wie...

tsseh · 01. Aug. 2016

wo ist denn das problem?
du setzt bisher alle zurück

Code:

function reset() {																		   //Flippt alle umgedrehten Karten wieder zurück
  document.getElementById("1").innerHTML = ("Klick!");
  document.getElementById("2").innerHTML = ("Klick!");
  document.getElementById("3").innerHTML = ("Klick!");
  document.getElementById("4").innerHTML = ("Klick!");
  document.getElementById("5").innerHTML = ("Klick!");
  document.getElementById("6").innerHTML = ("Klick!");
  document.getElementById("7").innerHTML = ("Klick!");
  document.getElementById("8").innerHTML = ("Klick!");
  document.getElementById("9").innerHTML = ("Klick!");
  document.getElementById("10").innerHTML = ("Klick!");
  document.getElementById("11").innerHTML = ("Klick!");
  document.getElementById("12").innerHTML = ("Klick!");
  num = 0;
  werte=[];
}

hier darfst du nur die 2 zurücksetzen die geklickt wurden.
die werte der beiden hast du im array werte. entweder merkst du dir die id in einem weiteren array oder speicherst im array werte die id anstelle der werte und holst dir die werte bei bedarf anhand der id oder du speicherst id und werte in einem array als objekt

TK102 · 01. Aug. 2016

ok und wie sehe das dann aus? ich schreibe die id`s in den ID Array mit:

id.push(werte[]); ?

tsseh · 01. Aug. 2016

TK102 schrieb:
id.push(werte[]);

das ist keine gültige js-syntax.
du musst die id in das array einfügen. jetzt überleg mal wo du die id zur verfügung hast.

TK102 · 01. Aug. 2016

Im HTML Teil in der Tabelle.

- - - Aktualisiert - - -

ok..ich schreibe die Variable die in der flip funktion übergeben wird in ein neues Array und wende das gleiche Prinzip dann in der reset funktion wieder an oder?

Kann man dann einfach als index 0 immer id schreiben?

var klicked = new Array();
klicked[0] = id
klicked[1] = id

etwa so? Aber dann ist ja das Problem, das er 0 und 1 dann gleich definiert und ich an beiden Stellen das gleiche stehen habe..

tsseh · 01. Aug. 2016

TK102 schrieb:
Kann man dann einfach als index 0 immer id schreiben?

var klicked = new Array();
klicked[0] = id
klicked[1] = id

etwa so? Aber dann ist ja das Problem, das er 0 und 1 dann gleich definiert und ich an beiden Stellen das gleiche stehen habe..

dann nimm wie bei den werten push

TK102 · 01. Aug. 2016

Würdest du mir das in Script Form mal schreiben?

var klicked = new Array();
klicked.push(id);
klicked.push(id);

??

- - - Aktualisiert - - -

ok, hab es hinbekommen, allerdings funktioniert es noch nicht zu 100%. Wenn man nun ein richtiges Paar aufgedeckt hat und danach ein falsches aufdeckt, dann wird das richtige Paar umgedreht und nicht das falsche :/

HTML:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>

<title>Memory9.0</title>
<style type="text/css">
#Spielfeld {
	width: 300px;
	height: 300px;
	margin: auto;
	background-color: #FC0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

}
.Zellen {
	width: 50px;
	height: 50px;
	
}
table {
	border: 1px solid;
	border-spacing: 10px 10px;
	border-collapse: separate;table-layout: fixed;
	height: 300px;
	width: 300px;
	text-align: center;
	border-collapse: separate;
}

</style>

<script type="text/javascript" language="JavaScript">
var array = ['Server','Switch','HDD','SSD','SSHD','KVM','Server','Switch','HDD','SSD','SSHD','KVM'] //Enthält Werte für die einzelnen Karten
var werte = [];																						//Leerer Array in dem später die zu vergleichenden Karten stehen
var num = 0;																						//Zahl für den Counter(Max 2 angeklickte karten)
var klicked = [];
var id;
function shuffle(array) {																			//Mischt den Array durch
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}
function reset() {																					//Flippt alle umgedrehten Karten wieder zurück
document.getElementById(klicked[0]).innerHTML = ("Klick!");
document.getElementById(klicked[1]).innerHTML = ("Klick!");
num = 0;
werte = [];
klicked = [];
}


</script>
</head>

<body>
<script type="text/javascript" language="JavaScript">
shuffle(array);

</script>

<div id="Spielfeld">
 <table border="1">
	<tr>
	 <td class="Zellen" id="1"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="2"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="3"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="4"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>                                              
	<tr>                                               
	 <td class="Zellen" id="5"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="6"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="7"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="8"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>                                             
	<tr>                                              
	 <td class="Zellen" id="9"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="10"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="11"><script type="text/javascript">document.write("Klick!");</script></td>
	 <td class="Zellen" id="12"><script type="text/javascript">document.write("Klick!");</script></td>
	</tr>
 </table>
	<input type="button" onclick="reset()" value="ResetAll"/>
</div> 
<script type="text/javascript" language="JavaScript">

function onclick() {																				//Funktion, um die flip funktion aufzurufen und die entsprechend angeklickten Felder definiert	
		document.getElementById("1").onclick = function() {flip(1)};
		document.getElementById("2").onclick = function() {flip(2)};
		document.getElementById("3").onclick = function() {flip(3)};
		document.getElementById("4").onclick = function() {flip(4)};
		document.getElementById("5").onclick = function() {flip(5)};
		document.getElementById("6").onclick = function() {flip(6)};
		document.getElementById("7").onclick = function() {flip(7)};
		document.getElementById("8").onclick = function() {flip(8)};
		document.getElementById("9").onclick = function() {flip(9)};
		document.getElementById("10").onclick = function() {flip(10)};
		document.getElementById("11").onclick = function() {flip(11)};
		document.getElementById("12").onclick = function() {flip(12)}; 
	}

//function count() {																					//Zählt wie oft geklickt wurde
//	
//	num++;
//}


function flip(id) {																					//Dreht die angeklickten Karten um und bereitet den leeren Array zum vergleich vor
	num++	
	if (num > 2) {
	alert("Nicht mehr als 2 anklicken, Programm status: crashed!");
	} else {
	document.getElementById(id).innerHTML = array[id-1];
	werte.push(array[id-1]);
	setTimeout(function(){compare();}, 1000);
	klicked.push(id);
	}
}

function compare() {													//Vergleicht den Inhalt des Arrays miteinander und entscheidet dann, ob resetet wird oder nicht
	if (werte.length ==2) {
		if (werte[0]==werte[1]) {
			num = 0;			
		} else {
			num = 0;
			reset();
		}
		werte=[];
		
	}
}
//document.write(id2[]);
//function flipback(id)
//setTimeout(function(){ alert("Sind nicht gleich"); }, 3000);
//compare(array, werte);

onclick();
</script>

</body>
</html>

tsseh · 01. Aug. 2016

TK102 schrieb:
ok, hab es hinbekommen, allerdings funktioniert es noch nicht zu 100%. Wenn man nun ein richtiges Paar aufgedeckt hat und danach ein falsches aufdeckt, dann wird das richtige Paar umgedreht und nicht das falsche :/

wenn du richtig liegst, steht auf idx 0 und index 1 die id der beiden richtigen.
die beiden werte lässt du einfach im array, wenn die nächsten beiden geklickt werden, stehen die auf idx 2 und 3. reset erwartet diese aber auf 0 und 1

TK102 · 02. Aug. 2016

ja genau das war auch der Fehler. Danke für deine Hilfe

Hab es nun fertig.

[GELÖST] Memory Spiel in JavaScript

TK102

New member

tsseh

Lounge-Member

TK102

New member

mikdoe

Moderator

TK102

New member

tsseh

Lounge-Member

TK102

New member

tsseh

Lounge-Member

TK102

New member

tsseh

Lounge-Member

TK102

New member

tsseh

Lounge-Member

TK102

New member

tsseh

Lounge-Member

TK102

New member