Information Technology Reference
In-Depth Information
Beim Laden der Seite wird die Login-Maske angezeigt, in der Sie einen
Nickname angegeben müssen (vergleiche Abbildung  9.3). Zum Testen der
Applikation stehen zwei spezielle Benutzer zur Verfügung, test1 und test2 ,
bei denen Schiffe automatisch vorpositioniert werden und immer der Spie-
ler test1 mit dem Spiel beginnen darf. Eine gute Möglichkeit, das Spiel aus
beiden Blickwinkeln zu betrachten, ist die Hilfsseite test_game.html . Mit-
hilfe von eingebetteten iframe -Elementen können Sie sich hier unter zwei
verschiedenen Benutzernamen anmelden und quasi gegen sich selbst spie-
len. Der Vorteil dabei ist: Man gewinnt immer und kann die Spiellogik der
Applikation besser verfolgen (vergleiche Abbildung 9.5). Zu finden ist diese
Seite unter:
http://html5.komplett.cc/code/chap_websockets/game_test.html
»
Klickt man beim Login auf
O K , wird die Verbindung zum Websocket-Server her-
gestellt, dessen Aufgaben sich auf das Austauschen von Nachrichten zwischen
den Spielern und das Aktuellhalten der Benutzerliste beschränken. In der Be-
nutzerliste wird jeder Benutzer mit Verbindungs-ID, Nickname und dem aktu-
ellen Spielstatus angezeigt.
Alle Nachrichten werden als JSON-Strings verschickt und teilen sich grob in
zwei Gruppen: Die erste Gruppe umfasst Meldungen, die an alle Benutzer ge-
hen und Änderungen des Spielstatus der einzelnen Spieler betreffen. Die zweite
umfasst private Nachrichten, die nur zwischen gerade miteinander spielenden
Benutzern ausgetauscht werden. Zu diesem Zweck musste zu der Connection-
Bibliothek des node-websocket-servers die zusätzliche Methode writeclient()
hinzugefügt werden, die Nachrichten nur an den gewünschten Benutzer wei-
terleitet.
Gleich nach dem Login erscheint das eigene Spielfeld. Es besteht, wie später
auch das gegnerische Spielfeld, aus zehn mal zehn button -Elementen, deren
value -Attribute die Grid-Position widerspiegeln und Werte von 1,1 links oben
bis 10,10 rechts unten aufweisen. Jeder Button besitzt ein class -Attribut, das
im Laufe des Spiels mehrmals geändert werden kann. Im CSS-Stylesheet sind
folgende, für den Spielablauf relevante Klassen ausgewiesen:
Search WWH ::




Custom Search