Vorgegebene Klick Reihenfolge einhalten

Anacondi

Erfahrenes Mitglied
Hallo,
Ich bastel an einem kleinen Spiel, wo man die Strasse entlang gehen muß.
Funktioniert soweit auch, mein Problem ist aber, wie verhindere ich, das man wenn man z.b. auf Feld 3 ist, auf ein anderes Feld ausser vor auf Feld 4 oder zurück auf Feld 2 klicken kann.,

Code:
<td
 background="karte2_41.jpg">
    <img src="giphy2.gif"  id="a1" onclick="changeImage('a1'); change2('a2'); aktuell=1; next=2;"></td>
 <td background="karte2_42.jpg">
    <img id="a2" onclick="changeImage('a2'); change2('a1'); change2('a3'); aktuell=2;next=3;" src="bilder/leer.png"></td>
  <td background="karte2_43.jpg">
    <img id="a3" onclick="changeImage('a3'); change2('a2'); change2('a4'); aktuell=3;next=4;" src="leer.png"></td>
  <td background="karte2_44.jpg">
    <img id="a4" onclick="changeImage('a4'); change2('a3'); change2('a5'); aktuell=4; next=5;" src="/leer.png"></td>

Und die Funktionen:
Code:
<script>
    var aktuell = 1; var next=2;
   function changeImage(id)
    { 
       if(aktuell+1 == next){
            document.getElementById(id).src = "giphy2.gif";
     } }
    
  function change2(id)
    {
      document.getElementById(id).src = "Bilder/leer.png";
     }
    </script>

meine Überlegung war, wenn ich jede m Feld eine nummer gebe (aktuell) und dem feld auch sage, was das nächste Feld ist (next) und dann mit der if abfrage in der Funktion
if(aktuell+1 == next){}
könnte ich das Problem lösen, das man immer nur auf das nächste oder zurück kann, aber das geht wohl so nicht.
 
Hallo,

ich habe mich nicht an Deinen Vorgaben gehalten, aber es soll Dir auszeigen, wie es möglich wäre.
Gibt bestimmt bessere Wege, aber vielleicht hilft es Dir ja ;)

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Insert title here</title>
    </head>
    <body>
        <table>
        <td background="karte2_41.jpg">
            <img class="weg" id="1" src="giphy2.gif" onclick="jump(this);">
        </td>
        <td background="karte2_42.jpg">
            <img class="weg" id="2" src="leer.png" onclick="jump(this);">
        </td>
        <td background="karte2_43.jpg">
            <img class="weg" id="3" src="leer.png" onclick="jump(this);">
        </td>
        <td background="karte2_44.jpg">
            <img class="weg" id="4" src="leer.png" onclick="jump(this);">
        </td>
        </table>

        <script src="http://code.jquery.com/jquery-latest.js"></script>

        <script>
        function jump(werte){
            var bildSetzen = "giphy2.gif";
            var bildLeer = "leer.png";
            var bildID = 0;
            var aktuell = parseInt(werte.id);
            var moeglich_davor = aktuell - 1;
            var moeglich_danach = aktuell + 1;

            //Wo ist aktuell das bildSetzen und die ID in bildID speichern
            $(".weg").each(function() {
                if(this.src.split('/').pop() == bildSetzen){
                    bildID = this.id;
                }
            });

            //schauen, ob davor oder danach das bildSetzen ist, wenn ja ist es möglich dahin zu gehen
            if(moeglich_davor == bildID || moeglich_danach == bildID){
                //Wo die Class = weg ist, alle auf leer.png setzen, und danach das bildSetzen
                $(".weg").each(function() {
                    this.src = bildLeer;
                });
                werte.src = bildSetzen;
            }

        }

        </script>
    </body>
</html>

Dies sollte so klappen wie du es haben möchtest. Musst leider einiges an Deinem Code anpassen.
 
Hab alles umgeschrieben. Leider geht aber nur der erste Klick auf Bild 1

setze ich var bildID==3;

kann ich bild 2 und bild 4 klicken.
Also wie es aussieht schreibt er dann die neue BildID nicht, denn mehr kann ich nicht klicken
 
Zuletzt bearbeitet:
Ich muß das Thema noch mal raus kramen.
Ich sitze seit Wochen daran, das es nicht möglich ist, ein bild zu überspringen.
jetzt ist es so, das, wenn man z.b. 2 mal auf ein bild in der Mitte klickt, automatisch die BildID von dem klick genommen wird, so das man nicht am anfang der Bildrreihe beginnen muß.
 
Verstehe ich das richtig: Du willst verhindern, dass ein Bild übersprungen wird? Poste doch mal deinen letzten Code oder besser die URL des Spiels.
 
Zurück