Javascript/jQuery Bilder einem Array zuordnen

[AzRaIL]

Stehe vor folgendem Problem und benötige Denkanstöße.

Habe ein Array in das 16 Zufallszahlen von 1-8 generiert werden. Jede Zufallszahl ist darin zweimal enthalten. Also zb.

2,3,2,4,5,3,6,4,5,1,7,8,7,8,6,1

nun habe ich noch 8 Bilder die ich diesen Werten zuordnen will. Es läuft darauf hinaus dass ich versuche ein Memory Spiel zu programmieren (16 Karten, 8 Werte die jeweils zweimal vorkommen). Programmiertechnisch funktioniert es auch soweit, jedoch nur mit den Zahlen.

Stehe irgendwie aufm Schlauch, weiß absolut nicht weiter wie ich die Bilder dem Array mit den 16 Werten zuordnen soll. Bild 1 sollte zb. den beiden Elementen im Array mit dem Wert 1 zugewiesen werden. Bild 2 dann den Elementen mit den Werten 2 usw. Habe die 8 Bilder ebenfalls in ein Array gepackt

Sieht irgendwie so aus

var Bilder = new Array();
Bilder[0] = new image;
Bilder[0].src = "Bild1.jpg";

usw.

Hatte die überlegung das mit indexOf und lastIndexOf zu machen. Damit kann ich ja abfragen an welcher Stelle des Arrays der jeweilige Wert vorhanden ist. Aber weiter komme ich bisher nicht

Habt ihr ne Idee?

lg

PS: Das neue Forendesign und die Funktionalitäten sind gut gelungen :)

Edit: Ist ein anderes Thema aber gibt es die möglichkeit, zb. in Chrome wenn man rechtsklick und Element untersuchen klickt sieht man ja die Styles der einzelnen Elemente. Manchmal werden diese ja auch von einem Skript generiert. Dann steht da was wie element.style und darunter die Formatierungen. Kann man irgendwie einsehen von welcher .js Datei oder sonstwas in welcher Zeile das drinsteht dass diese Formatierungen vorgenommen werden sollen?

 

[Tronjer]

Habt ihr ne Idee?

Jo, in dem du über index und value iterierst.

var arr = [2,3,2,4,5,3,6,4,5,1,7,8,7,8,6,1];

$.each(arr, function(index, value) {
  console.log("Position " + index + ": Bildname: " + "image_" + value + ".jpg" );
});

Was die Frage bez. Chrome betrifft: Firebug ist dein Freund. Vorzugsweise der richtige im FF.

 

[AzRaIL]

Hey, vielen Dank!

Hat mir schonmal weitergeholfen

Hab mal testweise bisschen rumprobiert
Der Code sieht jetzt so aus:

var Werte = ["",2,3,2,4,5,3,6,4,5,1,7,8,7,8,6,1];
var Position = new Array();
var Bilder = new Array();


jQuery(document).ready(function(){
    jQuery.each(Werte, function(index, value) {
        Position[index] = (index + "<br />");
        ausschnitt = Position.slice(1, 20);    // Damit es bei 1 und nicht 0 anfängt. Gibts noch andere Lösungen? evtl. Eleganter?
        Bilder[index] = ("image_" + value + ".jpg"+"<br />");
        ausschnitt1 = Bilder.slice(1, 20);
    });
    document.write(ausschnitt);
    document.write(ausschnitt1);
});

Die Ausgabe sieht dann so aus:

1
,2
,3
,4
,5
,6
,7
,8
,9
,10
,11
,12
,13
,14
,15
,16
image_2.jpg
,image_3.jpg
,image_2.jpg
,image_4.jpg
,image_5.jpg
,image_3.jpg
,image_6.jpg
,image_4.jpg
,image_5.jpg
,image_1.jpg
,image_7.jpg
,image_8.jpg
,image_7.jpg
,image_8.jpg
,image_6.jpg
,image_1.jpg

Das einzige was nun noch weg muss sind die Kommas bzw. möchte ich später dann sowas schreiben

jQuery("#Karte"+Position[index]).css("background-image", "url(Bilder[index])");

sodass die Divs mit den Ids Karte1-16 dann eben die Bilder als Background Image kriegen. Werden in dem Fall die Kommas mitgezählt? Oder wird das ohne Kommas übertragen?

Hoffe ich hab hier keinen Denkfehler drinne mit dem ändern des Background Images und dem "Bilder[index]".

 

[Sempervivum]

Verstehe ich dich richtig? Der Index im Array mit den Zufallszahlen ist die Position der Karte auf dem Spielfeld. Die Karte wird durch ein div repräsentiert. Dessen ID lautet "Karte" + Position, d. h. "Karte" + idx_zufallszahlen. Durch eine Zufallszahl wird ein Bild repräsentiert. Dann wäre es am einfachsten, wenn Du den Index im Array mit den Bildern gleich der Zufallszahl setzt:

Bilder[1] = new Image;
Bilder[1].src = "Bild1.jpg";

für das Bild, das zu der Zufallszahl 1 gehört.
Dann kannst Du das Bild durch Direktzugriff ermitteln:

jQuery("#Karte" + idx_zufallszahlen).css("background-image", "url(Bilder[Werte[idx_zufallszahlen]]");

 

[Tronjer]

Ich sehe gerade nicht, woher das Komma kommt, aber was mir ansonsten auffällt:

- Wenn der index nicht bei 0 beginnnen soll, dann mache so etwas wie index + 1
- Du brauchst keine zwei Arrays und slice()
- um HTML-Elemente zu erzeugen gib es in JS document.createElement und in jQuery das einfachere append() bzw. appendTo()
- Alternativ dazu könntest du die HTML-Elemente auch vorher erstellen, per jQuery über die <image>-Tags iterieren und diesen ein src-Attribut zuweisen.

 

[AzRaIL]

Melde mich mal zurück. Mittlerweile klappt das mit den Bildern. Habe es per append gelöst und <img> erzeugt mit den Bildern als src. Bin gerade dabei Bugs zu finden und zu beheben. Wo ich gerade hängenbleibe ist folgendes Problem:

Wenn man zwei gleiche Karten anklickt sollen sie logischerweise offen bleiben (Wie das beim Memory Spiel so ist). Wenn ich nun aber eine der richtigen offenen Karten anklicke und danach eine geschlossene die natürlich nicht gleich ist wird auch die offene wieder geschlossen. Hatte die überlegung einfach die Klasse der beiden richtigen Karten, die offen bleiben sollen, zu ändern. Weil das ganze ja durch ein click event ausgeführt wird.

Sieht dann so aus

jQuery('div.memory').click(function(){

Also habe ich an der korrekten Stelle folgendes hingeschrieben

jQuery('#' + id1).removeClass('memory').addClass('offen');
jQuery('#' + id2).removeClass('memory').addClass('offen');

Dadurch sollte das Event doch beim erneuten Klick nicht mehr ausgelöst werden?!
Im Browser wenn ich es untersuche zeigt er mir auch an dass die Klasse "memory" nicht mehr vorhanden ist sondern stattdessen "offen". Trotzdem wird bei Klick auf die beiden offenen Karten das event ausgelöst.

 

[Tronjer]

Ich denke nicht, dass du hier ein removeClass() benötigst. Frage doch einfach, ob das Bild bereits aufgedeckt wurde.

ungetestet:

$('img').on('click', function() {
    if ( $(this).not('.offen') ) {
        $(this).addClass('offen');
    }
})