Announcement

Collapse
No announcement yet.

Memory klappt nicht ganz

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Memory klappt nicht ganz

    Hallo!
    Wir müssen für die Schule ein sehr simples Memory bauen. Es funktioniert schon soweit, dass über eine Schleife die Kartenrückseite angezeigt wird. Wenn ich ein bestimmtes Bild über toggle dagegen austauschen lasse, funktioniert es auch - also dann kann ich auf jedes der Bilder klicken und sehe dann Bild_12.jpg aus dem Ordner Bilder/. Sobald ich hier aber ein zufälliges Bild aus dem array bilder anzeigen lassen möchte, klappt es nicht mehr... Was mache ich falsch?

    Vielen Dank für eure Hilfe!

    Mein Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link type="text/css" href="jquery/css/sunny/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.11.custom.min.js"></script>
    <title>Memory</title>
    <style type="text/css">
    #box {
    padding: 10px;
    height: 640px;
    width: 830px;
    }


    #memory img {
    border: 2px outset #009;
    height: 113px;
    width: 113px;
    float: left;
    padding: 10px;
    }

    </style>

    <script type="text/javascript">

    //Initialisierung
    $(document).ready(function(){
    var bilder = new Array();

    for (var i = 1; i < 13; i++ )
    {
    bilder[i] = new Image();
    bilder[i].src = "Bilder/Bild_"+i+".jpg";
    }

    shuffle_bilder(bilder);
    zeigeBilder(bilder);
    dreheBild(bilder);
    document.write("Bilder/Bild_"+i+".jpg");

    });


    function shuffle_bilder(bilder){
    for (var i = 1; i < 13; i++ ){
    bilder.splice(Math.floor(Math.random() * bilder.length), 1);
    }
    }

    function zeigeBilder(bilder){
    for (var i = 1; i < 13; i++ ){
    $('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg">');
    $('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg">');
    }
    }

    function dreheBild(bilder){
    $(".imageDrehbar").toggle(function(){
    $(this).attr("src","Bilder/Bild_12.jpg");
    //hier müsste das stehen: $(this).attr("src","Bilder/Bild_"+i+".jpg");
    },function(){
    $(this).attr("src","Bilder/rueckseite.jpg");
    }
    );
    }

    </script>
    </head>

    <body style="background-color:white;color:black;">

    <div id="box">
    <h1>Das Memory-Spiel</h1>

    <div id="memory">
    </div>

    <div id="button_box">
    <form>
    <input type="button" value="neu mischen" onClick="location.reload();">
    </form>
    </div>
    </div>

    </body>
    </html>
    Tags: None
  • #2
    Hallo,
    Originally posted by rhythmuskind View Post
    ...Sobald ich hier aber ein zufälliges Bild aus dem array bilder anzeigen lassen möchte, klappt es nicht mehr...
    Was klappt nicht mehr, bzw. was genau geht schief? Kommt das falsche Bild, gar kein Bild, eine Fehlermeldung?

    Gruß Falk
    Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

    Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

    Comment

    • #3
      Hi Falk!

      Eine Fehlermeldung sieht so aus:
      Warnung: Unbekannte Eigenschaft 'zoom'. Deklaration ignoriert.
      Quelldatei: file:///J:/_SCHULE/3.Jahr/Roemke_JavaScript/JQuery/memory/jquery/css/sunny/jquery-ui-1.8.11.custom.css
      Zeile: 389

      Davon hab ich mehrere.... in der Art. Aber daran scheint es nicht zu liegen.

      Der letzte in der Reihe:
      Warnung: Unerwartetes Token im Attribut-Selektor: '!'.
      Quelldatei: file:///J:/_SCHULE/3.Jahr/Roemke_JavaScript/JQuery/memory/memory_v4.html
      Zeile: 0


      Nun habe ich es soweit geschafft, dass die Bilder bei klick aufgedeckt werden und immer 2x jedes Bild angezeigt wird. Nur liegen die brav nebeneinander, also Bild_1.jpg neben Bild_1.jpg, dann Bild_2.jpg neben Bild_2.jpg. Kurz: die function shuffle läuft nicht... die hatte aber mal geklappt. steht sie an der falschen Stelle? wieso wird nicht durchmischt? Und leider kann ich die Bilder mit einem weiteren klick auch nicht wieder zudecken.



      Neuer Code:

      <script type="text/javascript">
      //globale Variable
      var bilder = new Array();

      //erst mal alles laden
      $(document).ready(function(){
      for (var i = 1; i < 13; i++ )
      {
      bilder[i] = new Image();
      bilder[i].src = "Bilder/Bild_"+i+".jpg";
      }

      shuffle_bilder();
      zeigeBilder();
      });

      //Bilder werden durchmischt
      function shuffle_bilder(){
      for (var i = 1; i < 13; i++ ){
      bilder.splice(Math.floor(Math.random() * bilder.length), 1);
      }
      }

      //Bilder anzeigen
      function zeigeBilder(){
      for (var i = 1; i < 13; i++ ){
      $('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg" onClick="dreheBild('+i+')" >');
      $('#memory').append('<img id="'+i+'" class="imageDrehbar rueckseite" src="Bilder/rueckseite.jpg" onClick="dreheBild('+i+')" >');
      }
      }

      //Bilder drehen: Rückseite/Vorderseite
      function dreheBild(i){
      $(".imageDrehbar").toggle(function(){
      $(this).attr("src","Bilder/Bild_"+i+".jpg");
      },function(){
      $(this).attr("src","Bilder/rueckseite.jpg");
      }
      );
      }


      </script>
      </head>

      <body style="background-color:white;color:#333;">

      <div id="box">
      <h1>Das Memory-Spiel</h1>

      <div id="memory">
      </div>

      <div id="button_box">
      <form>
      <input type="button" value="neu mischen" onClick="location.reload();">
      </form>
      </div>
      </div>

      </body>
      Zuletzt editiert von rhythmuskind; 13.04.2011, 11:14.

      Comment

      • #4
        Hallo,

        dein JS sieht sehr verworren und für meine Begriffe zu kompliziert aus. Die Methode splice() des Array-Objektes erwartet z.B. mindestens DREI Parameter. Der erste ist die Position ab der gelöscht/eingefügt wird, der Zweite die Anzahl der zu löschenden Einträge und der Dritte bis n die neu einzufügenden Elemente. Dein Aufruf hat nur ZWEI Parameter. Damit wird an einer zufälligen Position jeweils ein Element gelöscht und das in einer Schleife. Dein Bilder-Array dürfte also anschließend einfach nur leer sein.

        Hast du mal an den relevanten Stellen ein paar Debug-Ausgaben eingebaut, um zu kontrollieren was da überhaupt passiert?

        Das id-Attribut eines HTML-Elementes darf übrigens nicht nur aus Zahlen bestehen und darf auch nicht mit einer Zahl beginnen!

        Gruß Falk
        Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

        Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

        Comment

        • #5
          Hallo Falk,

          ich habe meinen Code etwas verbessert - hoffe ich. Nun ist dieses splice-Objekt raus und die Bilder werden sogar randomisiert. Das Problem ist nur: die BIlder werden zufällig mal 5 x und mal 2x angezeigt, also ich kann nicht kontrollieren, wie oft welche randomisierte Zahl ausgegeben wird... Kann man das kontrollieren? Habe ich das Math.random an der falschen Stelle stehen? Was muss ich tun?

          Vielen Dank!!

          Mein Code:

          <script type="text/javascript">

          //Initialisierung
          var bilder = new Array();

          $(document).ready(function(){
          for (var i = 1; i < 13; i++ )
          {
          bilder[i] = new Image();
          bilder[i].src = "Bilder/Bild_"+i+".jpg";
          }

          zeigeBilder();
          });

          function zeigeBilder(){
          for (var i= 1; i < 13; i++ ){
          $('#memory').append('<img id="'+i+'A" class="imageDrehbar" src="Bilder/rueckseite.jpg" >');
          $('#memory').append('<img id="'+i+'B" class="imageDrehbar" src="Bilder/rueckseite.jpg" >');
          }


          //hier wird der Handler fuer das Drehen bei onclick angehaengt
          $(".imageDrehbar").toggle(
          function(){
          var id = $(this).attr("id"); //id des geclickten
          //alert(id);
          var idWert = parseInt(id); //daraus die Nummer entnehmen (ersten Buchstaben)
          idWert = Math.floor(13*Math.random());
          $(this).attr("src","Bilder/Bild_"+idWert+".jpg");
          },
          function(){
          $(this).attr("src","Bilder/rueckseite.jpg");
          }
          );
          }

          </script>

          Comment

          • #6
            Hallo,

            deine Logik ist mir immer noch nicht ganz klar. Wozu dient z.B. dein globales Array bilder? Dieses wird zwar bei onReady über eine anonyme Funktion befüllt, aber danach nie wieder verwendet. Warum schreibst du nicht einfach deine Bilder in zufälliger Reihenfolge in dieses Array und greifst dann bei der Anzeige auf dieses Array zu?

            Wenn ich davon ausgehe, dass es 12 Bilder gibt von denen je zwei gleich sind, also insgesamt 6 Paare:
            [highlight=javascript]
            <script type="text/javascript">

            //Initialisierung
            var bilder = new Array();

            $(document).ready(function(){
            var tooks = new Array(false, false, false, false, false, false,
            false, false, false, false, false, false);
            for (var i = 1; i <= 12; i++) {
            // Zufallsposition ermitteln, die noch nicht vergeben wurde
            do {
            var pos = Math.round(Math.random() * 12);
            } while (tooks[pos]);

            // Zufallsposition als "vergeben" markieren
            tooks[pos] = true;

            // Bild erzeugen
            bilder[i] = new Image();
            bilder[i].src = "Bilder/Bild_"+pos+".jpg";
            }

            zeigeBilder();

            ...

            $(".imageDrehbar").toggle(
            function()
            {
            var id = $(this).attr("id"); //id des geclickten
            //alert(id);
            var idWert = parseInt(id); //daraus die Nummer entnehmen (ersten Buchstaben)

            $(this).attr("src", Bilder[idWert]);
            },
            function()
            {
            $(this).attr("src","Bilder/rueckseite.jpg");
            }
            );
            [/highlight]

            Achtung! Ungetestet!

            Gruß Falk
            Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

            Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

            Comment

            • #7
              Hallo!

              Ich habe versucht, das einzubauen, kann es aber nicht. Was bedeutet dieses false überall? Klar, übersetzt heißt es "falsch", aber warum soll ich das in merin array schreiben?

              Mir wurde gesagt, die bilder-Variable müsste global sein. Warum weiss ich nicht. Ich habe echt keine Ahnung vom Programmieren, brauche also einen Hinweis für Dummies... Danke Euch trotzdem für eure Hilfe.

              Weiss jemand, wo genau das Problem liegt bei meinem Code? Was muss ich wo und wie ändern?

              Comment

              • #8
                true/false boolsche Werte um die entsprechenden Zustände anzuzeigen. In Zeile 7 wird das Array mit diesen Werten vorbelegt. in Zeile 11-13 wird eine Zufallszahl ermittelt. Ist diese noch nicht vergeben, wird die Position im Array auf true gesetzt und das Bild geladen.

                Es wird damit diese Anforderung gelöst

                also ich kann nicht kontrollieren, wie oft welche randomisierte Zahl ausgegeben wird... Kann man das kontrollieren?
                Christian

                Comment

                • #9
                  Originally posted by rhythmuskind View Post
                  ...Ich habe versucht, das einzubauen, kann es aber nicht.
                  Was bedeutet: "kann es aber nicht"?
                  Originally posted by rhythmuskind View Post
                  ...Was bedeutet dieses false überall? Klar, übersetzt heißt es "falsch", aber warum soll ich das in merin array schreiben?
                  Christian hat es genau richtig erklärt. Du wills ja eine zufällige Sortierung erreichen. Es muss also jede Position zwar zufällig aber eben nur genau einmal vergeben werden. Technische Zufallszahlen unterliegen zwar einer statistischen Gleichverteilung, es kann aber durchaus sein, dass zweimal hintereinander oder innerhalb von 12 Zahlen mehrfach die GLEICHE Zufallszahl ermittelt wird, was natürlich für die Positionierung "ungünstig" ist. Mit Hilfe des tooks-Arrays und der Schleife wird einfach sichergestellt, dass jede Position nur einmal vergeben wird.

                  Originally posted by rhythmuskind View Post
                  ...Mir wurde gesagt, die bilder-Variable müsste global sein. Warum weiss ich nicht. Ich habe echt keine Ahnung vom Programmieren, brauche also einen Hinweis für Dummies...
                  Was verstehst du unter einem "Hinweis für Dummies"? Soll dir jemand dein Script ausprogrammieren? Zum großen Teil habe ich das ja schon fast gemacht!
                  Wenn du nicht ewig an diesem Punkt verharren willst, dann solltest du einfach Programmieren lernen und so ein kleines Memo ist dafür eine gute Aufgabe.

                  In meiner Lehrzeit gab es da z.B. PAP, also grafische Ablaufpläne um das Problem zu visualisieren (sowas verwende ich bei komplexen Problemen heute noch). Dann wurde das Problem in einer (auch für Nichtprogrammierer verständlichen) "Pseudosprache" formuliert und erst ganz zum Schluß in den eigentlichen Sprachcode "übersetzt".
                  Versuch einfach mal mit deinen Worten zu beschreiben was bei deinem Memo passieren muß und du wirst ggf. schnell feststellen:
                  Originally posted by rhythmuskind View Post
                  wo genau das Problem liegt bei meinem Code?
                  Gruß Falk
                  Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

                  Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

                  Comment

                  Previous template Next
                  Working...
                  X