OOP/DOM-Scripting JavaScript - Praxistutorial 3 - Karten geben Teil 2
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. Der Zufallsgenerator
Ich hoffe ihr könnt euch noch daran erinnern. Wir haben uns unter dem Punkt Vorbereitung eine
Konstruktorfunktion namens helper
für zwei Hilfsmethoden gebaut. Und dann zu Beginn des Literal-Objektes per Aggregation
eine Referenz mittels help : new helper();
erzeugten. Das nutzen wir jetzt, um willkürlich Karten zu ziehen.
3. Die Methode checkCards
Zunächst mal brauchen wir zwei(!) Zufallszahlen. Eine für die Farbe, einen für den Kartenwert. Warum? Nun schaut euch noch mal die Struktur
des Literals cards
an. Bei dem Aufbau ist gar nicht anders möglich.
checkCards : function ()
{
var color = this.help.getRandom (0,3);
var count = this.help.getRandom (0,12);
},
Erläuterung
Der Zugriff auf die öffentliche Methode getRandom
der "Klasse" helper
geschieht, wie oben noch mal zu sehen,
über die Referenzeigenschaft help
des Literal-Objektes poker
. Und wie ich in der
Theorie dazu schon sagte, wird so was bei Literalen immer über
this
angesteuert. Wer mit den Zahlen bei den Parametern nicht klarkommt, sollte sich vielleicht erst mal an die
Anfängertutorials setzen.
Karten ermitteln
Hierfür müssen wir die Methode nur um den folgenden Code ergänzen:
if ('undefined' != typeof this.cards[this.level[color]][count])
{
var card = this.level[color] + '#'
+ this.cards[this.level[color]][count];
delete this.cards[this.level[color]][count];
return card;
}
else
{
return false;
}
Erläuterung
Zuerst überprüfen wir mittels if ('undefined' != typeof this.cards[this.level[color]][count])
, ob die entsprechende Karte
im Literal cards
überhaupt noch vorhanden ist. Wer sich mit Arrays auskennt (ich hoffe alle), der wird sich das Schema schon
vorstellen können. this.level[color]
kommt aus selbigem Literal und entspricht zum Beispiel einem "karo" oder "herz".
count
ist dann eine Zahl zwischen eins und zwölf. Damit holen wir uns dann das entsprechende Element aus dem Literal
cards
. Also genau so, wie wir es bei Arrays tun. Und immer an das this
denken. Das wird auch bei Eigenschaften gesetzt.
Wenn denn nun unsere Bedingung erfüllt ist, bauen wir eine Zeichenkette zusammen, die sich aus der Farbe this.level[color]
,
einem Trenner #
und dem Kartenwert this.cards[this.level[color]][count]
zusammensetzt. Das Ergebnis könnte dann
so aussehen: herz#d
. Anschließend wird per delete
der entsprechende Eintrag aus dem Literal entfernt und die
"Karte" zurückgegeben.
Der else
-Zweig wird also immer dann betreten, wenn die gewählte Karte vorher aus cards
entfernt wurde. So
verhindert man in diesem Fall Doppelungen.
4. Die Karten anzeigen
Das ist jetzt kein großes Problem mehr. Angestoßen haben wir das ja mit dem entsprechenden Event-Handler. setCards
holt sich
also fünf Karten von checkCards
und die werden als Array an die lokale Variable karten
zurückgegeben.
document.getElementById('p_geben').onclick = function()
{
var karten = poker.setCards(5);
}
Jetzt müssen einfach nur die bestehenden "Deckblätter"-Karten ausgetauscht werden. Dazu wird der Event-Handler einfach um folgenden Code ergänzt:
for (var i = 0; i < 5; i++)
{
document.images['p' + i].src= "cards/"
+ karten[i].replace(/#/, '') + '.png';
}
Erläuterung
Seit zunächst mal nicht irritiert ob der seltsamen Codefärbung. Das liegt an der PHP-Funktion highlight_string
, die den
Lattenzaun #
als Kommentar interpretiert. Schaut ggf. noch mal in die poker.htm
hinein. Dort haben wir den
Karten die Namen p0
bis p5
gegeben. Und deren Quelle wird nun einfach ausgetauscht, indem wir den Pfad angeben
und das #
aus dem Wert entfernen.
Wozu wir das denn überhaupt brauchen? Nun, der wird in der erweiterten Fassung für die Auswertung der Computerkarten benötigt. Allerdings hatte ich keine Lust, ihn entfernen. Für den Fall, dass das jemand zu Ende programmieren möchte. Und für die Vollhonks unter euch, bitte auch mal auf den Link "Karten tauschen" klicken.
5. Zusammenfassung
Wer mit der Methode checkCards
Verständnisprobleme hat, sollte immer an Arrays denken. Und mal ein wenig mit dem Code
herumspielen. Schaut euch vor allem noch mal die beiden Literale level
und cards
an. Setzt ruhig die Werte
für color
und count
manuell ohne Zugriff auf den Zufallsgenerator. Dann wird euch sicher schnell ein Licht
aufgehen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt