Vorgegebene Klick Reihenfolge einhalten


Anacondi

Erfahrenes Mitglied
#1
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.
 
#2
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.
 

Anacondi

Erfahrenes Mitglied
#4
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:

Anacondi

Erfahrenes Mitglied
#6
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ß.
 

Neue Beiträge