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