✔ Hilfe bei Spiel Rohre verlegen.

A

Anacondi

Erfahrenes Mitglied
Hallo liebe JavaScript gemeinde.
Ich bastel gerade an dem Spiel Rohre verlegen. Sollte jeder kennen..

Es gibt Rohre die verschieden gebogen sind und die verlegt man zu einer Funktionierenden Leitung.
Soweit funktioniert das auch. habe pro Teilstück der Leitung ein Bild, das sich in ein anderes wechselt pro klick.
Hier der Code:
Code: 
<script type="text/javascript">
   pic = new Array();
   pic[1] = new Image(); pic[1].src = "bilder/weihnacht/23/1.png";
   pic[2] = new Image(); pic[2].src = "bilder/weihnacht/23/2.png";
   pic[3] = new Image(); pic[3].src = "bilder/weihnacht/23/3.png";
   pic[4] = new Image(); pic[4].src = "bilder/weihnacht/23/4.png";
   pic[5] = new Image(); pic[5].src = "bilder/weihnacht/23/5.png";
   pic[6] = new Image(); pic[6].src = "bilder/weihnacht/23/6.png";
   pic[7] = new Image(); pic[7].src = "bilder/weihnacht/23/7.png";
   pic[8] = new Image(); pic[8].src = "bilder/weihnacht/23/8.png";
   pic[9] = new Image(); pic[9].src = "bilder/weihnacht/23/9.png";
   pic[10] = new Image(); pic[10].src = "bilder/weihnacht/23/10.png";
   pic[11] = new Image(); pic[11].src = "bilder/weihnacht/23/11.png";
   pic[12] = new Image(); pic[12].src = "bilder/weihnacht/23/12.png";
   pic[13] = new Image(); pic[13].src = "bilder/weihnacht/23/0.png";

   var a=1;
   function weiter() { ++a; if (a>13) a=1; document.getElementById('meinBild1').src = pic[a].src;}
   function weiter2() { ++a; if (a>13) a=1; document.getElementById('meinBild2').src = pic[a].src;}
   function weiter3() { ++a; if (a>13) a=1; document.getElementById('meinBild3').src = pic[a].src;}
</scipt>

die Ausgabe der Bilder (Hier nur 3 damit ihr seht, was ich meine) erfolgt so:
Code: 
<img src="bilder/weihnacht/23/1.png" width="68" height="65" onclick="weiter();" ID="meinBild1">
<img src="bilder/weihnacht/23/1.png" width="68" height="65" onclick="weiter2();" ID="meinBild2">
<img src="bilder/weihnacht/23/1.png" width="68" height="65" onclick="weiter3();" ID="meinBild3">

Nun zu meinem Pobem wo ich hänge.
Rohr 1 z.B. muß bild 9 sein, damit es richtig liegt, Rohr 2 muß Bild 3 sein.. usw.
wenn alle rohre verlegt sind, möchte ich, das Java abfragt, wie viele richtig liegen.
wie könnte ich das anstellen ?
es reicht, wenn ganz unten auf der seite dann steht: Du hast... so und so viele steine richtig.

Ich hoffe, ich hab mich verständlich ausgedrückt. Danke im vorraus
 
Ich kenne das Spiel zwar nicht, kann mir aber ungefähr vorstellen, was Du vor hast. Kannst Du mal die URL posten oder, wenn Du es noch nicht online hast, ein Demo bei jsfiddle.net?
 
Was mich betrifft, so müsste ich auch die Bilder sehen. Versuch doch mal, sie an ein Posting anzuhängen (Button "Datei hochladen"), zwei, drei oder vier wären ausreichend, oder bei Dropbox oder so hochzuladen.
 
1.png
2.png
3.png
8.png
9.png
 
Ich würde zu jedem Bild die Anschlusspunke definieren:
Code: 
   pic = new Array();
   pic[1] = {bild: new Image(), ap: ["links", "oben", "rechts", "unten"]};
   pic[1].bild.src = "bilder/weihnacht/23/1.png";
   pic[2] = {bild: new Image(), ap: ["oben", "rechts", "unten"]};
   pic[2].bild.src = "bilder/weihnacht/23/2.png";
Dann die Anschlusspunkte prüfen: Ist z. B. der Anschlusspunkt "links", muss das Bild links davon einen Anschlusspunkt "rechts" haben.
 
Und genau ist das problem bei mir.
Die anschlusspunkte prüfen,ob ein anschluss besteht, brauch ich nicht, da für die endleitung nur eine Wahl möglich ist.
bei bild 1 ist das bild 9....
wie mach ich die abfrage, ob bild 9 bei bild eins drin ist, und wenn bild 9 da ist, soll er eine variable (var richtig) hochzählen.
zum schluss soll er mir anzeigen wie viele bilder richtig liegen..
 
OK, wenn immer nur eine Wahl richtig ist, dann würde ich das Bild als data-Attribut in der betr. Tabellenzelle ablegen und mit dem gewählten vergleichen:
Code: 
    <td width="68" height="65" data-bildrichtig="9.png"><img src="bilder/weihnacht/23/1.png" width="68" height="65" onclick="weiter();" ID="meinBild1"></td>
Code: 
var tbl = document.getElementById("Tabelle_01");
for (var irow = 0; irow < tbl.rows.length; irow++) {
    var crow = tbl.rows[i];
    for (var icell = 0; icell < crow.cells.lenght; icell++) {
        var ccell = crow.cells[icell];
        var img = ccell.childNodes[0];
        var bildrichtig = ccell.getAttribute("data-bildrichtig");
        if(img.src.indexOf(bildrichtig) != -1) {
            // das richtige Bild wurde gewaehlt
        }
    }    
}

BTW: Wenn ich deinen Code richtig verstehe, kannst Du das Ganze mit nur einer weiter-Funktion erledigen:
Code: 
    <td width="68" height="65" data-bildrichtig="9.png"><img src="bilder/weihnacht/23/1.png" width="68" height="65" onclick="weiter(this);" ID="meinBild1"></td>
Code: 
function weiter(bildele) { 
    ++a;
    if (a > 13) a = 1;
    bildele.src = pic[a].src;
}
 
Danke, das du dir die zeit für mein Problem genommen hast.
Noch eine frage dazu.
wäre es möglich, da die bilder ja nummeriert sind, das ich in der Datenbank eine Tabelle anlege,
Ich baue noch einen button in form eines wasserhahnes ein. wenn man den zum schluss drückt, schreibt das System in die Datenbank die jeweiligen bilder und mit php kann ich ja prüfen lassen, ob 1 z.b. bild 9 hat, bild 2 = 7 u.s.w.
wie könnte ich das umsetzen? ist das machbar ?
 
Ja, natürlich ist das machbar:
  • Die richtigen Bilder in eine Datenbanktabelle eintragen
  • Die gewählten Bilder in ein Array eintragen
  • Das Array JSON kodieren und mit Ajax an den Server schicken
  • Auf dem Server überprüfen, ob die Bilder richtig sind
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück