OOP/DOM-Scripting JavaScript - Praxistutorial 3 - Karten tauschen Teil 1
1. Die Abschnitte
- Einführung
- Vorbereitung
- Die Datenstruktur
- Karten geben Teil 1
- Karten geben Teil 2
- Karten tauschen Teil 1
- Karten tauschen Teil 2
2. Wenn ihr alles richtig gemacht habt
... solltet ihr jetzt fünf Karten bekommen haben. Nun will man die ja nicht alle behalten. Also muss eine Möglichkeit geschaffen werden,
ein paar wieder abzugeben und neue anzufordern. Deshalb müssen wir jetzt auf alle Karten noch einen entsprechenden Event-Handler legen.
Dazu wird die for-Schleife um folgenden Code ergänzt:
document.getElementById('p_geben').onclick = function()
{
...
for (var i = 0; i < 5; i++)
{
...
document.images['p' + i].onclick = function ()
{
poker.dropCards(this.name);
}
}
}
Erläuterung
Hier müsst ihr sehr aufpassen, dass ihr ja mit einer "Referenz" (this.name) arbeitet und nicht mit einen festen Parameter.
Ein poker.dropCards('p' + i); führt nämlich zu einen falschen Ergebnis. Warum? Ganz einfach, bei einem Klick auf eine Karte
ist die Schleife zu diesem Zeitpunkt schon durchgelaufen. i hat also bereits auf allen Karten den Wert 5. Das habe ich auch
schon im ersten Praxistutorial erklärt.
3. Die Methode dropCards
dropCards : function (card)
{
document.images[card].src = 'cards/blank.png';
document.images[card].onclick = function () {};
this.p_drop_cards.push (card);
},
Erläuterung
Eigentlich ist diese Methode so ipsig klein, dass es eigentlich keiner Erläuterung bedarf. Ich mach es aber trotzdem. Zuerst tauschen wir die angeklickte Karte durch ein komplett transparentes Bild aus. Wer stattdessen einen grauen Kasten sieht, benutzt immer noch den verdammten IE6. Besorgt euch hergottnochmal einen vernünftigen Browser.
Danach legen wir eine "leere" Funktion auf den onclick-Handler, um die bisherige zu überschreiben. Wieso wir das machen?
Ganz einfach, weil wir anschließend den Kartennamen in das "Eigenschaftsarray" p_drop_cards schreiben. Denn die Einträge und
deren Anzahl brauchen wir, um herauszufinden, wie viele neue Karten an welchen Stellen ausgetauscht werden müssen. Und wenn trotzdem
jemand seine Gichtgriffel nicht im Zaum halten kann, so füllt sich das Array immer weiter.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt