240 Chapter 9—WebSockets
Figure 9.2 The game “Battleships!” in actionIn the HTML code, control elements and game dialogs are defined as form ele-
ments, visible or hidden depending on the game phase. Four of them are mes-
sage windows, displayed centered with position:fixed as an invitation to play,
rejection of the invitation, and congratulations or commiserations at the end
of the game. The other forms contain the login mask, two game areas for the
player’s own and the opponent’s ships, a digitalization component for placing
the ships in the desired orientation, plus a list of currently logged-in users and
their status.
On loading the page, the login mask appears and you are asked to enter your
nickname (see Figure 9.3). Two special users are available for testing the applica-
tion, test1 and test2, for which the ships are positioned automatically, and player
test1 can always start the game. The auxiliary page test_game.html is a good way
to observe the game from both players’ viewpoints. Here you can log in under
two different user names via embedded iframe elements, so you can play against
yourself, as it were. The advantage is that you always win and are able to fol-
low the application’s game logic more easily. This testing page can be found at
http://html5.komplett.cc/code/chap_websockets/game_test_en.html.