NODE.JS+SOCKET.IO+HTML5 implementation-based landlord Games (1) Overview

I. Description of the game

Said is the landlord game, in fact, the bedroom self-created "catch double A", with a lot of places to catch Red 10, hit red a similar, the approximate rule is:

1. Basic card type and bucket landlord, but no size king, a total of 52 cards, 13 per person, which is why the topic is directly called Bucket landlord game reasons.

2. There are two people in spades A and grass flower A, and if both the spades A and the grass flower A are in one hand, then they are in a gang.

3. After the card can be selected bright A or not light a, bright a after teammates also Kioliangming identity, each other to cooperate with the card.

4. Randomly specify the first person to show the card.

5. According to hand out the order score, 4, 3, 2, 1 points, respectively, the last team plus, score high teams win.

6. Unlike the 5th, if double A is in one hand, then this person wins when the first one finishes the card, the second one is flat, otherwise it is negative.

7. Single card 2 Max, double A (spades A and grass flower a) can be used as the largest bomb to come out.

second, the game source

A while ago to a list of their own, which refers to the bedroom to create the double A to achieve the online version.

Because the bedroom four people often in different places, some in the library, some in the study room, I in the laboratory, but also in the bedroom, want to play cards more trouble, at night back to bed and not too willing to put the table playing cards, so I thought to realize the online version.

Iii. issues that need to be considered

1. How to synchronize the operation of several people online chess game? For example, a classmate out of the 3, B-butyl all need to show the results of their cards in real time, and B students into the status of the card, such as Ding classmate after the last card, just already have three people out of cards, the outcome has been set, this time everyone needs to receive the end of the Bureau and the outcome of the news.

2. Online chess game How to perform the basis of the card-type processing? How to store 52 cards, how to randomly licensing? A classmate out of 3, B students point to choose 4 certainly not, need B classmate "The choice of card type unreasonable"; the same is straight, how to judge who is more big?

3. How to implement the card stack operation and layout in chess and board games? How to display the stack on the front, using div hard to write or through canvas? How to achieve the left-click Card, the card can pop up, right click the card after the card can be shot effect?

For the first problem, the front-end thinking is the use of HTML5 Web-socket implementation, socket communication is not due to time off, you can accept, send push messages at any time, and listen to different socket states (Send,onmessage,onclose, Connect ... ), call the callback function. As for the compatibility of the browser is not considered, learning software comrades will generally install a chrome or something, a  can also switch the kernel. The backend part intended to use a brisk language, previously intended to be using Worker-man---a PHP high-performance Socket service Framework, and later wanted to use a faster and smaller thing: node.js+ Socket.io, which later proved that the message was grouped by type and used different responses to different types, wrote it really fast.

For the second problem, I think of the method is to save the card information as a two-dimensional array [points] [color], the back end of the game to recognize the start of the call card function, broadcast card group information, the front-end to receive their own card group information for the card heap initialization. According to different card type to specify its poker-type, and the different type of the home of the card type is definitely not allowed out. If the card type is the same, then according to its Poker-type card characteristics to determine whether the larger than the home.

For the third problem, because the game has music, sound effects, a large number of background images, animations, and every card style layout, so plan to canvas as the bottom, the game background and game characters on the canvas, you can use the situation of frame animation to add animation to the characters. Poker and other operating panels, taking into account the need to do mouse hover, click Recognition, canvas for mouse events can only be based on the overall canvas and the precise coordinates to locate the widget, so the card heap, the card parts, music buttons, etc. placed in a div layer, Floats above the canvas without affecting the operation and layout. The key to the left and right card directly through the event binding to do it.

Four, the effect shows

Finally added the upper left corner of the chat section, you can send messages and voice, complete the game and add this module, the backend added a few lines of code.

Thank a goose company's Landlord HD installation package to provide the game material, shameless to unzip the map with pictures, their own entertainment products, too ugly is not justified, take to borrow material.

Write so much today, next write about the establishment of the poker model and how to design the message category.

Bucket landlord games based on NODE.JS+SOCKET.IO+HTML5 (1) Overview