Sören: Fehler in einem Memoryspiel für ein Fachreferat!

Hi,

ich habe folgenden Code:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Memory</title>  
    <style type="text/css">  
 * {  
   padding: 0px;  
   margin: 0px;  
  
 }  
 .one {  
 position: relative;  
 top: 50px;  
 left: 50px;  
 border: #000 1px solid;  
 width: 80%;  
 }  
  
 .two {  
 position: relative;  
 width: 100px;  
 z-index: 1;  
 float:left;  
 background-repeat:no-repeat;  
 }  
    </style>  
</head>  
<body>  
<!--Script-->  
<script type="text/javascript">  
//Initialisieren der Variablen  
var count  = 0;  
var x  = 0;  
var test = 0;  
var n   = 0;  
var zeilebruch = 0;  
var d1 = "";  
var d2 = "";  
var versuche = 0;  
  
//Einlesen der Grafiken  
var pic_close = '<img src="img/back.jpg" />';  
  
//Erzeugung Der Zufallszahlen  
numbers1 = new Array();  
while (numbers1.length < 16) {  
    x = Math.floor(Math.random() * 16) + 1;  
    if (numbers1.length==0) {  
        numbers1.push(x);  
    } else {  
 test = 1;  
 for (i = 0; i < numbers1.length; i++) {  
     if (x == numbers1[i]){test++;break;};  
 }  
 if(test==1){numbers1.push(x);}  
 }  
}  
for (i = 0; i < numbers1.length; i++) {  
    if (numbers1[i] > 8) {numbers1[i] = numbers1[i] - 8;};  
}  
  
//Funktionen  
function versuch(element) {  
    element.style.visibility = "hidden";  
    if (d1 == "") {d1 = element.parentNode.id;}  
    else if (d1 != "") {d2 = element.parentNode.id;}  
    if (d1 == d2) {alert("Sie haben ein pärchen gefunden"); d1 = ""; d2 = ""}  
    else if (d1 != d2) {document.getElementById(d1).style.visibility = "visible"; document.getElementById(d2).style.visibility = "visible"; d1 = ""; d2 = ""}  
    versuche++;  
    document.getElementById('try').value = versuche  
}  
  
//Erstellen des Feldes  
n = numbers1.length;  
document.write('<div class="one">');  
for (i = 1; i <= numbers1.length; i++){  
     document.write('<span class="two" style="background-image: url(img/'+numbers1[count]+'.jpg)" id="s'+numbers1[count]+'"><img src="img/back.jpg"  onClick="versuch(this)" id=i'+numbers1[count]+'/></span>');  
     zeilebruch++;  
     if (zeilebruch==4) {document.write('<br style="clear: left;">'); zeilebruch=0};  
     count++;  
}  
document.write('<br><input type="text" id="try" value="Versuche"></div>');  
</script>  
</body>  
</html>  

Der Code ist ein Memoryspiel. Das Problem das ich dabei noch habe ist, das wenn ich zwei Karten aufdecke, die nicht gleich sind, sich die visibility von dem back.jpg nicht wieder auf visible setzt. Außerdem wird mir, wenn ich das erste mal auf ein Kärtchen klicke gesagt, das d2 keine Proporties hat. Ansonsten funktioniert der Code einwandfrei, jedenfalls soweit ich das beurteilen kann. Es wäre super, wenn mir jemand helfen kann, da ich es für ein Fachreferat in der Schule brauche. Unter [link]www.blackpanter.net/sonstiges/memory.html[/link] kann man es sich auch anschauen oder unter [link]www.blackpanter.net/sonstiges/fachreferat.zip[/link] runterladen

Gruß
Sören

  1. Hi,

    Das Problem das ich dabei noch habe ist, das wenn ich zwei Karten aufdecke, die nicht gleich sind, sich die visibility von dem back.jpg nicht wieder auf visible setzt.

    Onclick faengst du auf dem Bild selber ab, und machst dieses "hidden".
    Dann nimmst du dir aber die Referenz auf dessen parentNode, und veraenderst anschliessend ggf. dessen visibility.

    Außerdem wird mir, wenn ich das erste mal auf ein Kärtchen klicke gesagt, das d2 keine Proporties hat.

    Natuerlich - d1 enthaelt dann bereits eine ID, d2 aber nicht. Trotzdem wendest du auf *beide* getElementById an, und versuchst dann mit dessen Rueckgabe noch was anzustellen - aber getElementById liefert dir gar kein verwertbares Objekt, wenn die uebergebene ID lediglich "" ist.

    Ansonsten funktioniert der Code einwandfrei, jedenfalls soweit ich das beurteilen kann.

    Na ja, mit dem Encoding der Seite stimmt aber noch was nicht. Und die BOM bekomme ich im FireFox auch oben links in der Seite angezeigt.

    Es wäre super, wenn mir jemand helfen kann, da ich es für ein Fachreferat in der Schule brauche.

    Lernt ihr sowas in der Schule?
    Dann sollte euer Lehrer euch aber auch mal beibringen, wie man

    • sinnvoll lokale statt globaler Variablen verwendet,
    • Elemente per DOM-Methoden generiert und einhaengt (statt document.write zu benuzten),
    • selber auf die Fehlersuche geht.

    MfG ChrisB

    --
    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
    1. Hi,

      unser Lehrer bringt uns über JavaScript leider nix bei...er hat versucht uns VisualBasic beizubringen...

      JavaScript hab ich mir mehr oder weniger erfolgreich selber beigebracht...

      mit DOM-Methoden kenn ich mich leider überhaupt net aus...und reinlesen kann ich mich auch nich mehr...ich muss das bis Freitag fertig haben...

      Der Hinweis, das ich auf Span-Tag zu greife, hat mir sehr weitergeholfen...

      Die Funktion sieht jetzt so aus:

        
      function versuch(element) {  
          element.style.visibility = "hidden"  
          if (d1 == "") {d1 = element.id;}  
          else if (d1 != "") {d2 = element.id;}  
        
          if (d1 == d2) {alert("Sie haben ein P&auml;rchen gefunden!");d1 = ""; d2 ="";}  
          if (d1 != d2 && d1 != "" && d2 != "") {document.getElementById(d1).style.visibility = "visible"; document.getElementById(d2).style.visibility = "visible"; d1 = ""; d2 = "";}  
          versuche++;  
          document.getElementById('try').value = versuche  
      }  
      
      

      Dummerweise spinnt das ganze so rum...es wird nicht korrekt wieder zugedeckt...

      Ich hab auch leider nicht mehr viel zeit...muss das bis Freitag fertig haben...wäre echt sehr dankbar, wenn mir jemand sagen könnt, wie ichs hinbekomme, das es korrekt funktioniert.

      Gruß
      Sören

      1. Lieber Sören,

        function versuch(element) {
            element.style.visibility = "hidden"
            if (d1 == "") {d1 = element.id;}
            else if (d1 != "") {d2 = element.id;}

          
        Deine Variablen d1 und d2 sind globale Variablen? Jedenfalls werden sie in der Funktion nicht extra deklariert und müssen dann als global verstanden werden. Das kann sehr schnell größere Probleme bereiten. Je nach Browser kann das unterschiedliche weitere Problemstellen verursachen - muss aber nicht.  
          
        
        > Dummerweise spinnt das ganze so rum...es wird nicht korrekt wieder zugedeckt...  
          
        Das könnte damit zusammenhängen, dass Du nicht zwischen globalen und lokalen Variablen sauber trennst. Ich habe Dir oben ein zugegebenermaßen sehr komplexes und umfangreiches Script verlinkt, aber vielleicht findest Du in seinem Quelltext ein paar Hinweise, die Dir bei Deinen Strukturen helfen...  
          
        Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
          
        Felix Riesterer.
        
        -- 
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        
  2. Lieber Sören,

    suchst Du sowas? Memory Quiz

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)