JavaScript Development HTML5 Game-bucket landlord (network vs PART4)

After using the game engine (Celadon engine) to do the fight landlord stand-alone version of the game, here to share the use of Socket.io to achieve network battle, the code can be put on GitHub, here to talk about their entire development ideas.

Client code

Service-side code

(Click on the image to enter the game experience)

Link to the previous article:

JavaScript Development HTML5 Game-bucket landlord (standalone mode part1)

JavaScript Development HTML5 Game-bucket landlord (standalone mode part2)

JAVASCIRPT Development HTML5 Game-bucket landlord (stand-alone mode Part3)

This article is the first part of the network battle. The main contents are as follows:

1. Brief introduction
2. Service-side project building
3. Client Preparation
4. Desk-level management
5. Game Flow

First, Introduction

Multiplayer game, I use Nodejs to do development services, using Socket.io to do communication. The entire bucket landlord game process is the same, just a single version of what all to do, the network version of more to the server, their main is the game interface show, first look at the approximate structure of the entire server:

The server uses Nodejs MySQL module to do the MySQL database storage, here is not very necessary, just I try to use familiar with this thing, here I just saved a UID in the client browser cache, so also can not really achieve the persistence effect. If you want to do persistence should be a user login, where the engine provides us with support, after the optimization can consider joining the login to save user data.

second, the service side project construction

For the construction of Nodejs project, or relatively simple, simple description of the project under construction, create a directory under the workspace Landlordserver, as a project directory. Then use the command line to enter the directory, add Nodejs socket.io and MySQL module, the command is as follows:

NPM install socket. ionpm install MySQL

I created the SRC directory under the project directory to put the code in place because of the habit of writing the Java service side before. Create the Server.js as an entry script under SRC, join the Socket.io port to listen, then you can start with Nodejs. This looks like our service is built, relative Java is really simple, then you can write logic code. Because of the use of Nodejs, the younger brother is not very familiar with this, but its modular use feels like Java class, a file a class such a form, this class need to import in, Nodejs is require, so that you do not have to consider the script of the problem.

third, client project preparation

Client needs to have Socket.io.js client file, this file in the server project Node_modules/socket.io-client/path, find it and throw it to the client scripts, here I put in the scripts/ Operation Directory, because the Celadon engine is also based on NODEJS development, so as long as there is no need to declare any other references in scripts can be used.

Iv. Table ManagementTable Position

In the network of the battle landlords, are three players a table, such a form, there are some landlords game will also be the table of the synthesis into the room, and then to the hall. I am here to implement only the table, the start of the server is not any table, there is a player into the creation of the table, the latter player came in is not full of the table, can not find a new table, if there is a table player all left, the table is deleted. These things are given to the table manager deskmgr.js. I used a Desks object to cache the seat information, using the JS object can be used as a map. Socket.io also provides a grouping function, almost the concept of a room, we have not a table of players are added to the same group, the identification of this group is the table number of this desk, of course, the player exits when the group will also exit. Each table has three stages:

1. Wait stage: This stage waits for players to join and all ready
2. Rob the landlord stage: Rob the landlord,
3. Play Card stage:

seats

Each table is required to have 3 seats, here is not only convenient statistics, but also for the convenience of confirming the order. At the same time, it is used as a map to store three seats, respectively named P1, p2, p3, so the order is easy to confirm, such as P1 out of the card, turn to the next house, you can write a method to get the next seat number, and then get P2, to notify P2 out of the card.

player

Players on the server need to have additional properties compared to the player information on a single machine:

• Table number: Used to determine which table the player is in;
• Seat number: Used to determine which seat the player is in;
• Whether to prepare: whether the player is in the ready state;
• Socketid: The ID of the socket connected by the player is recorded when the player first joins the game, so it is convenient for the player to broadcast the message separately.
• Status: Used to mark whether the player is offline

Five, the game process

The whole game process is similar to the single-machine mode, but the network battle is done by the server to do licensing, rotation and other operations, quite three people in the bucket landlord, there is an assistant for their licensing, tell them the turn who rob the landlord, whose turn to play the cards, who won, so that the operation of the breakdown of the following server:

Preparation Phase

players join and exit : When a player joins, the server returns information to the player's client's table and the table number that the player has received. In this way the client can display the entire table information, in fact, show the left and right side of the player's name. In addition, if there are other players in the table, you will need to broadcast to other players a new player to join the message. Exit (click to exit, refresh, close the page) if there are other players in the table also need to broadcast notification.

players ready : Each time the player switches the state of readiness to determine whether the player's table is 3 players ready, meet the conditions can start to deal with the card, here are prepared after it has entered the stage of looting landlords. Licensing by the server to carry out, so the original licensing code also need to move a copy to the server, after the cards are notified to each player, to the player corresponding to the hand information, but also to randomly generate a seat number of the player to start robbing the landlord, so that the client receives the start game information to play the licensing animation, After the play is finished, if you first start to rob the landlord will show the landlord Operation button.

Rob the landlord stage

Rob the landlord : the player called after the data (mainly players called scores and player information) to the server, the server processing, will be the current call to the next, broadcast to the current table all players, notify them on the last one called points, and now turn to who is the name of the landlord. Such a client can display the corresponding information, each player according to their own seat number shows the home call points and the current call points, is their own display of the Operation button called points. Determine the landlord after the hole card information to each player, the client received the message will show the hole.

exit/Disconnection : At this stage, I do the processing is to directly end the game back to the preparation stage. Because the landlord has not determined, also can not play cards, is a good practice, and then let the AI help offline players called points is also possible, this depends on what the developers want to do, for the left players can also be reduced to penalties.

stage of the card

Player Card : The rotation of the card stage is similar to the logic Rob landlord, mainly in the client rendering will be different. Players will be out of the cards issued to the server, the server to determine whether the player after the card has a hand, there will continue to play cards, not to determine the player victory. This is the same as the single version of logic, just the server here to do the control.

exit/Disconnection : After the exit of the card stage, only the table and the online player, the game will not end, leaving the player will have the AI on behalf of the card. In order for the disconnected player to have time to return, the first time the AI cards will delay the card, the use of the timer is easy to achieve. After the player is re-connected, if the timer has not been executed then go and cancel the timer.

Wire Break re-connect : This problem at the beginning I was not thinking, I think of a method to achieve, do not know the calculation is not good. Implementation of the idea: in the card stage, a player left, the player will be added to an offline list. When a player joins the game, is no longer directly assigned to the table, but first to check the offline list, if found, into the original table, did not find to match the table. This way, the table information is found and the current game status can be displayed on the client. If the player is not re-connected until the end of the game, the player offline will be removed from the offline list at the end of the game. Or if a table player is offline, it's all removed from the offline list.

Game Over

After the player finishes the card, the server broadcasts the game to all players, sends the calculated player score, does not finish the player's hand information, and the winning player's last card, the table back to the preparatory stage. Client my processing is to show the remaining hands, the last hand cards and other information, add a timer, 3 seconds after the game interface is rendered into the preparation stage state.

problems encountered

I was in the process of development, encountered a problem, the console has been prompted dead loop, in the place of error check for a long time, also did not find strange. Follow up Socket.io source to find, is when I want to give the client with the data, there is a circular reference problem, in fact, in my inside there is an object to save a timer, so that the data object into JSON, the conversion code will fall into a dead loop. Although this problem is not big, I also know that this situation will cause the conversion exception, but it is not easy to find, at first did not arouse my attention, in this record. Online Battle of the bucket landlord introduced here, there is a need to improve the hope proposed, learn from each other.

JavaScript Development HTML5 Game-bucket landlord (network vs PART4)