HTML5 Guidelines for Web Developers

(coco) #1
9.3 Example: Battleships! 241

Figure 9.3 Start page of the “Battleships!” game


If you click OK after logging in, the connection to the WebSocket server is cre-
ated. Its tasks are limited to exchanging messages between players and updating
the user list. The user list shows each user with a connection ID, nickname, and
current game status.


All messages are sent as JSON strings and fall roughly into two categories: The
first one comprises messages sent to all users, concerning changes in the game
status of individual players. The second category comprises private messages ex-
changed only between users currently playing a game together. For this purpose,
we had to add the additional method writeclient() to the connection library of
the node-websocket-server, passing messages only to the desired user.


Immediately after login, your own game area appears. Just as the opponent’s
game area, it consists of ten-by-ten button elements whose value attributes re-
flect the grid position and have values between 1,1 (top left) and 10,10 (bottom
right). Each button has a class attribute that can be changed several times in the
course of the game. The CSS stylesheet contains the classes presented in Table
9.1 (relevant to the gameplay).


Table 9.1 Gameplay-related CSS classes in the game area


Class CSS Formatting
.empty background-color: #EEE
.ship background-color: slategray
.water background-color: lightblue
.hit background-color: salmon; pointer-events: none
.destroyed background-color: darkseagreen; pointer-events: none
Free download pdf