Javascript/PHP - Memoryspiel

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript/PHP - Memoryspiel

    Hallo zusammen,

    Ich hoffe ich bin hier richtig und möchte mich bereits jetzt für den Versuch einer Hilfe bedanken!


    Im Rahmen eines Programmierkurses für Anfänger muss ich für meine Fachhochschule ein Projekt einreichen, welches wir überwiegend mit PHP erstellen sollen. Überwiegend bedeutet, das wir nur PHP gelernt haben mit Verbindung zu MySQL(i) und dürfen allerdings so viel dazu nehmen wie wir können und benötigen.
    In meinem Fall möchte ich gerne ein Memoryspiel für 2 Personen programmieren. Mein Problem ist dabei das ich dafür hauptsächlich mit JS arbeite und leider wenig Ahnung habe was ich wie machen kann. :/


    Ich habe soweit ein bisschen schon geschrieben nur bin ich jetzt an einen Punkt angelangt, wo ich denke das alles falsch ist bzw. meine Herangehensweise falsch ist und ich neu anfangen muss, nur weiß ich nicht wie.

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <link href="bootstrap.css" rel="stylesheet">
    <title>DAS SPIEL!!!!!!</title>
    <script type="text/javascript" language="javascript">
    var bilder0 = new Array('Bilder/Bild0.jpg' , 'Bilder/Bild1.jpg', 'Bilder/Bild1.jpg');
    var bilder1 = new Array('Bilder/Bild0.jpg' , 'Bilder/Bild2.jpg', 'Bilder/Bild2.jpg');
    
    ... Hier habe ich alle Bilder in ein Array mit dem Kartenhintergrund gelegt. Damit ständen hier 21 Arrays....
    
    var zaehler = 0;
    var anzeigen = 0;
    
    function Bilderwechsel0(grafik)
    { 
    zaehler++;
    anzeigen = zaehler%3;
    grafik.src = bilder0[anzeigen];
    
    ---> Hier dachte ich könnte man das so erstellen, dass man 2 Züge macht und dann die Karten wieder zurückdreht. Allerdings scheitere ich daran, die erste Karte mit umzudrehen----
    if (zaehler == 2) { 
    setTimeout(function() {grafik.src = bilder20[0]}, 3500);
    zaehler = 0;
    
    }
    }
    
    function Bilderwechsel1(grafik)
    { 
    zaehler++;
    anzeigen = zaehler%3;
    grafik.src = bilder1[anzeigen];
    
    if (zaehler == 2) { 
    setTimeout(function() {grafik.src = bilder20[0]}, 3500);
    zaehler = 0;
    }
    }
    
    ....Hier habe ich die Funktionen für jedes Array erstellt (21 mal)....
    </script>
    
    </head>
    <body>
    <center>
    <div style="background-color:grey; border:0.1cm solid black; height:2cm; width:25cm; margin:0.2cm">
    <table>
    <h2 align=center>Spieler 1: ***Punktzahl*** &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Spieler 2: ***Punktzahl***</h2> 
    </table>
    </div>
    </center>
    <center>
    <div style="margin:0.7cm">
    <table border="2">
    
    <?php
    
    $Position = array ("1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "0");
    shuffle($Position);
    $a = 0;
    $Zug = 0;
    
    for ($i=1; $i <=6 ; $i++) { 
    echo "<tr>\n";
    for ($j=1; $j <=7 ; $j++) { 
    echo "\t<td><img src='Bilder/Bild0.jpg' onClick='";
    
    
    
    echo "Bilderwechsel$Position[$a](this)' height='100' width='100'/></td>\n";
    // $a = $a + 1;
    // // $Zug = $Zug + 1;
    // if ($Zug >=0) {
    // // $Zug1 = $Position[$a];
    // }
    // elseif ($Zug = 2) {
    // zurück;
    // }
    
    }
    echo "</tr>\n";
    }
    ?>
    
    
    
    </table>
    </div>
    </center>
    </body>
    </html>




    Irgendwie komme ich nicht darauf wie ich herangehen muss und es umsetzen kann.
    Ich habe aber auch durch Foren durchforsten und Bücher lesen dazu erfahren, das jQuery auch ne alternative wäre. Falls da Ideen eurer seit´s sein sollten, wäre das auch ok. Versuche mich da sonst auch mit reinzudenken.

    Würde mich über Denkanstöße, weitere Anregungen und Hilfe freuen!



    Gruß,
    Sascha
Lädt...
X