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: