✔ memory spiel

gogopf

gogopf

Grünschnabel
scriptschnipsel soll folgendes machen.

1. Klick auf erste Karte: Karte wird aufgedeckt
2. Klick auf zweite Karte: karte wird aufgedeckt
3. je nachdem ob karten übereinstimmen oder nicht, werden Funktionen aufgerufen mit denen die Karten nach einer wartezeit von 2 sec. entweder "zurück gedreht" oder durch eine 1x1 px Grafik ersetzt.

Problem ist, ohne die Funktionen zum zurückdrehen, lassen sich die Karten aus Schritt 1 und 2 aufdecken. Mit den Funktionen lässt sich die zweite Karte nicht "umdrehen", aber die Funktionen zum zurückdrehen werden nach 2 sec. ausgeführt.

Also ich finde keinen Fehler, eventuell ein logischer Fehler. Warum wird die zweite Karte nicht aufgedeckt?

<script type="text/javascript">
var x=0;
var Karte1;
var Karte2;
var zelle;
var zellenr1="";
var zellenr2="";

function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}

function kartenweglegen (zelle1,zelle2) { //beide geöffneten Karten sind gleich
var seite = "images/pix.png";
$(zelle1).attr("src", seite).attr("width", "1px").attr("height", "1px");
$(zelle2).attr("src", seite).attr("width", "1px").attr("height", "1px");
}

function kartenzurueckdrehen (zelle1,zelle2) { //beide Karten sind nicht gleich und die karten werden zurückgedreht
var seite = "memoryback.jpg";
$(zelle1).attr("src", seite);
$(zelle2).attr("src", seite);
}

function funktionenoeffnen(kartennummer,zellennr) {
zelle = "#zelle"+zellennr;

var seite = "images/deck/gemischt/"+kartennummer+".jpg";
$(zelle).attr("src", seite); // Karte aufdecken

if (zellenr1 == "") { zellenr1=zelle; var zx=0 }
if (zellenr1 != "") zellenr2=zelle;


if (x==0) { Karte1=kartennummer; }
if (x==1) { Karte2=kartennummer; }

x++;

if (x>=2) {
if (Karte1==Karte2) { //beide geöffneten Karten sind gleich
sleep(2000);
kartenweglegen (zellenr1,zellenr2);
}
else { //beide Karten sind nicht gleich
sleep(2000);
kartenzurueckdrehen (zellenr1,zellenr2);
}
}


//$('#example-placeholder').html('<p><img src="loader.gif" /></p>');
//$('#example-placeholder').load(seite);
}
</script>

seite wo es gerade läuft oder nicht läuft
www.hoppaa.com/memory
 
sorry im falschen bereich gepostet, ich stell status auf gelöst und poste nochmal unter programmierung...

nein ist hier doch richtig :) sorry
 
Hi,

bitte das nächste mal deinen Code innerhalb von [code=javascript]...[/code] posten, so kann man den Code besser / überhaupt lesen.

Javascript: 
var x=0;
var Karte1;
var Karte2;
var zelle;
var zellenr1="";
var zellenr2="";

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

function kartenweglegen (zelle1,zelle2) { //beide geöffneten Karten sind gleich
    var seite = "images/pix.png";
   $(zelle1).attr("src", seite).attr("width", "1px").attr("height", "1px");
   $(zelle2).attr("src", seite).attr("width", "1px").attr("height", "1px");
}

function kartenzurueckdrehen (zelle1,zelle2) { //beide Karten sind nicht gleich und die karten werden zurückgedreht
   var seite = "memoryback.jpg";
   $(zelle1).attr("src", seite);
   $(zelle2).attr("src", seite);       
}

function funktionenoeffnen(kartennummer,zellennr) {
   zelle = "#zelle"+zellennr;
   
   var seite = "images/deck/gemischt/"+kartennummer+".jpg";
   $(zelle).attr("src", seite);  // Karte aufdecken
   
   if (zellenr1 == "") { zellenr1=zelle; var zx=0 }
   if (zellenr1 != "") zellenr2=zelle;
 
   
   if (x==0) { Karte1=kartennummer; }
   if (x==1) { Karte2=kartennummer; }
   
   x++;
   
     if (x>=2) {
           if (Karte1==Karte2) { //beide geöffneten Karten sind gleich
             sleep(2000);
             kartenweglegen (zellenr1,zellenr2);
         }
         else { //beide Karten sind nicht gleich
             sleep(2000);
             kartenzurueckdrehen (zellenr1,zellenr2);
         }
     }
   
 
  //$('#example-placeholder').html('<p><img src="loader.gif" /></p>');
  //$('#example-placeholder').load(seite);
}

Grüsse,
BK
 
  • Mit den a-Tags hast Du dir unnötige Problem eingebrockt, denn der Verweis wird ebenfalls beim Klick ausgeführt, so dass die Seite neu geladen wird.
  • Ebenso sind die divs in den Tabellenzellen IMO überflüssig.
  • Die Variable x muss zurück gesetzt werden, wenn die Karten zurück gedreht oder weg gelegt werden.
  • Statt des sleep besser setTimeout verwenden.
Dieses funktioniert:
Code: 
<!DOCTYPE html>
<html>
<head>
    <title>Memory</title>

    <style type="text/css">
        .tablememory {
            width: 500px;
            height: 500px;
        }

        .tablezelle {
            width: 125px;
            height: 125px;
        }

        .membackkarte {
            width: 125px;
            height: 125px;
        }
    </style>

    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">
        var x = 0;
        var Karte1;
        var Karte2;
        var zelle;
        var zellenr1 = "";
        var zellenr2 = "";

        function kartenweglegen(zelle1, zelle2) {
            var seite = "memory_files/pix.png";
            $(zelle1).attr("src", seite).attr("width", "1px").attr("height", "1px");
            $(zelle2).attr("src", seite).attr("width", "1px").attr("height", "1px");
            x = 0;
        }

        function kartenzurueckdrehen(zelle1, zelle2) {
            var seite = "memory_files/memoryback.jpg";
            $(zelle1).attr("src", seite);
            $(zelle2).attr("src", seite);
            x = 0;
        }

        function funktionenoeffnen(kartennummer, zellennr) {
            if (x < 2) {
                zelle = "#zelle" + zellennr;

                var seite = "memory_files/" + kartennummer + ".jpg";
                $(zelle).attr("src", seite);  // Karte aufdecken

                if (x == 0) {
                    Karte1 = kartennummer;
                    zellenr1 = zelle;
                }
                if (x == 1) {
                    Karte2 = kartennummer;
                    zellenr2 = zelle;
                }

                x++;

                if (x >= 2) {
                    if (Karte1 == Karte2) { //beide geöffneten Karten sind gleich
                        window.setTimeout(function () {
                            kartenweglegen(zellenr1, zellenr2);
                        }, 3000)
                    }
                    else { //beide Karten sind nicht gleich
                        window.setTimeout(function () {
                            kartenzurueckdrehen(zellenr1, zellenr2);
                        }, 3000)
                    }
                }


                //$('#example-placeholder').html('<p><img src="loader.gif" /></p>');
                //$('#example-placeholder').load(seite);
            }
            return false;
        }
    </script>
</head>
<body>

    <div id="bodydiv" align="center">
    </div>
    <table style="width: 100%">
        <tbody>
            <tr>
                <td style="height: 7px">
                    <div id="linksoben">
                        linksoben
                    </div>
                </td>
                <td rowspan="2" align="center">
                    <table id="tablememory">
                        <tbody>
                            <tr>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(3,1)" id="zelle1" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(1,2)" id="zelle2" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(2,3)" id="zelle3" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(3,4)" id="zelle4" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                            </tr>
                            <tr>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(6,5)" id="zelle5" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(8,6)" id="zelle6" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(1,7)" id="zelle7" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(2,8)" id="zelle8" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                            </tr>
                            <tr>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(4,9)" id="zelle9" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(8,10)" id="zelle10" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(7,11)" id="zelle11" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(7,12)" id="zelle12" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                            </tr>
                            <tr>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(6,13)" id="zelle13" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(4,14)" id="zelle14" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(5,15)" id="zelle15" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                                <td id="tablezelle"><img onclick="funktionenoeffnen(5,16)" id="zelle16" src="./memory_files/memoryback.jpg" width="150px" height="150px"></td>
                            </tr>
                        </tbody>
                    </table>

                </td>
                <td style="height: 7px">
                    <div id="rechtsoben">
                        rechtsoben
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="linksunten">
                        linksunten
                    </div>
                </td>
                <td>
                    <div id="rechtsunten">
                        rechtsunten
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <div id="example-placeholder">
        <p>Placeholding text</p>
    </div>

</body>
</html>
 
vielen dank, hab deine verbesserungsvorschläge übernommen, und die Lösung funktioniert !!! DANKE

ich hatte vorher auch setTimeout benutzt, funktionierte nicht, hatte die syntax wohl falsch verstanden. an der stelle wo "function()" steht, hab ich den funktionsnamen eingetragen gehabt welches aufgerufen werden sollte.
 
an der stelle wo "function()" steht, hab ich den funktionsnamen eingetragen gehabt welches aufgerufen werden sollte.
Zum Vergrößern anklicken....
Das muss gar nicht verkehrt sein, hat nur die Einschränkung, dass man keine Parameter an die Funktion übergeben kann. Und man muss die Klammern weg lassen:
Code: 
window.setTimeout(yourfunction, 5000);
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück