• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Brauche Hilfe bei programmieren von einem Memorie (HTML, CSS, JavaScript)

L

Lena18

New member
Hallo,

ich programmiere zur Zeit ein Memorie. Allerdings funktioniert der Quellcode nicht so, wie ich möchte. Ich weiß aber nicht wo der Fehler liegt. Mein Problem: Die Karten im Memory werden zwar gemischt, aber das Programm erkennt nicht wenn zwei gleiche Karten aufgedeckt werden und blendet diese dann wieder aus. Würde mich sehr freuen, wenn mir jemand helfen könnte.

Hier der HTML-Code:
HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset= "UTF-8">
	<title> Memory Spielseite </title>
	<link rel="stylesheet" href="css_memory.css">	
	<script src="jquery-3.1.1.min.js"> </script>
	<script src="js_memory.js"> </script>
</head>
<body>
<div id="seite-1">
	<h2> Memory </h2>
	<center> Wie heißt du? <input id="namensfeld" type="text" name="" value=""> </center>
	<br> </br>
	<center>
		<button class="Startbutton" id="kinderserien" onclick="kategorie_Serien"> Start - Kinderserien </button> <center>	
</div>

<div id="seite-2">
	<h1> Memory </h1>
	<p> </p>
	<div> 
		<button id="neues_spiel" onclick="zurück()"> Neues Spiel </button> 
		<button id="pause" onclick="pause()"> Pause </button> 
	</div>
	
	<div id="memory_board">
		<div class="Memoriekarte" id="karte-1" data-kartenpaar="1" onclick="kartenwechsel(1)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-2" data-kartenpaar="2" onclick="kartenwechsel(2)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-3" data-kartenpaar="3" onclick="kartenwechsel(3)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-4" data-kartenpaar="4" onclick="kartenwechsel(4)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-5" data-kartenpaar="5" onclick="kartenwechsel(5)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-6" data-kartenpaar="6" onclick="kartenwechsel(6)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-7" data-kartenpaar="7" onclick="kartenwechsel(7)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-8" data-kartenpaar="8" onclick="kartenwechsel(8)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-9" data-kartenpaar="9" onclick="kartenwechsel(9)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-10" data-kartenpaar="10" onclick="kartenwechsel(10)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-11" data-kartenpaar="11" onclick="kartenwechsel(11)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-12" data-kartenpaar="12" onclick="kartenwechsel(12)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-13" data-kartenpaar="12" onclick="kartenwechsel(13)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-14" data-kartenpaar="11" onclick="kartenwechsel(14)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-15" data-kartenpaar="10" onclick="kartenwechsel(15)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-16" data-kartenpaar="9" onclick="kartenwechsel(16)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-17" data-kartenpaar="8" onclick="kartenwechsel(17)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-18" data-kartenpaar="7" onclick="kartenwechsel(18)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-19" data-kartenpaar="6" onclick="kartenwechsel(19)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-20" data-kartenpaar="5" onclick="kartenwechsel(20)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-21" data-kartenpaar="4" onclick="kartenwechsel(21)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-22" data-kartenpaar="3" onclick="kartenwechsel(22)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-23" data-kartenpaar="2" onclick="kartenwechsel(23)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
		<div class="Memoriekarte" id="karte-24" data-kartenpaar="1" onclick="kartenwechsel(24)"> <img src="Rückseite.jpg" alt="Rückseite"> </div>
	</div>
	
	<center id="klickZaehler"> Klicks: </center>
	<center id="zeit"> Deine Zeit: </center>
</div>


Hier der JS-Code:
var kartenarray=[];
var ersteKarte=0;
var zweiteKarte=0;
var ersteKartenKartenpaar=0;
var zweiteKartenKartenpaar=0;
var klickZaehler =0;
var gesperrt=false;
var ersteKarteId=0;
var zweiteKarteId=0;
var startzeit=0;

function kartenwechsel(kartennummer){
	if(gesperrt){return;}
	if(startzeit==0){
		startzeit = new Date();
	}
	klickZaehler++;
	$('#klickZaehler').html('Klicks: '+klickZaehler);
	$('#karte-'+kartennummer).html('<img src="karte-'+kartennummer+'.jpg" alt="Motivkarte">');
	if(ersteKarte==0){
		ersteKarte=$('#karte-'+kartennummer).data('kartenpaar');
		ersteKarteId='karte-'+kartennummer;
	} else{
		zweiteKarte=$('#karte-'+kartennummer).data('kartenpaar');
		zweiteKarteId='karte-'+kartennummer;
			if(ersteKarteId==zweiteKarteId){
				return;
			}
		zweiteKarte=$('#karte-'+kartennummer).data('kartenpaar');
			if(ersteKarteId==zweiteKarteId){
				alert('Paar gefunden!');
				
				//hier noch gefundenes Paar ausblenden
			} else{
				gesperrt=true;
				setTimeout(karteZurueck, 1000);
				//hier noch falsches Paar wieder umdrehen
			}					
		ersteKarte=0;
		zweiteKarte=0;
	}
	$('#karte-'+kartennummer).html('<img src="'+kartenarray[kartennummer]+'" alt="Motivkarte">');
};
 
Zuletzt bearbeitet von einem Moderator:
du vergleichst immer die KartenID aber die wird nie gleich sein. weil die ist von 1 - 24 vergeben.
Z.B.
PHP: 
//   if(ersteKarteId == zweiteKarteId){alert('Paar gefunden!');}

// besser wäre die data-attribute zu vergleichen

if(ersteKarte == zweiteKarte){	alert('Paar gefunden!');}
 
Ich habe das jetzt mal geändert, Aber das Programm erkennt immernoch nicht, wenn zwei Karten gleich sind.

Könnte das vielleicht am dem "data-kartenpaar"1"" liegen ?

Bin über jede Antwort froh ! Danke!
 
bei mir hat so funktioniert
HTML: 
<script>

//Hier der JS-Code:
var kartenarray=[];
var ersteKarte=0;
var zweiteKarte=0;
var ersteKartenKartenpaar=0;
var zweiteKartenKartenpaar=0;
var klickZaehler =0;
var gesperrt=false;
var ersteKarteId=0;
var zweiteKarteId=0;
var startzeit=0;

function kartenwechsel(kartennummer){
	if(gesperrt){return;}
	if(startzeit==0){
		startzeit = new Date();
	}
	klickZaehler++;
	$('#klickZaehler').html('Klicks: '+klickZaehler);
	$('#karte-'+kartennummer).html('<img src="karte-'+kartennummer+'.jpg" alt="Motivkarte">');
	if(ersteKarte==0){
		ersteKarte=$('#karte-'+kartennummer).data('kartenpaar');
		ersteKarteId='karte-'+kartennummer;
	} else{
		zweiteKarte=$('#karte-'+kartennummer).data('kartenpaar');
		zweiteKarteId='karte-'+kartennummer;
			if(ersteKarteId==zweiteKarteId){
				return;
			}
		zweiteKarte=$('#karte-'+kartennummer).data('kartenpaar');
			if(ersteKarte==zweiteKarte){
				alert('Paar gefunden!');
				
				//hier noch gefundenes Paar ausblenden
			} else{
				gesperrt=true;
				setTimeout(karteZurueck, 1000);
				//hier noch falsches Paar wieder umdrehen
			}					
		ersteKarte=0;
		zweiteKarte=0;
	}
	$('#karte-'+kartennummer).html('<img src="'+kartenarray[kartennummer]+'" alt="Motivkarte">');
};
</script>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben