Triad (Online Multiplayer Card Game)

I've heard this game go by the name of "Dou Dizhu", and "Fight the Landlord", but my friends and I always called it "Triad". It's a 3 player asian card game that my friends and I used to frequently play when we got together. We no longer live close to each other, but we still wanted to be able to play. There are some online versions, but not with the same set of rules we play, so I wanted to try building it in C2. It was also a good excuse to test the waters with online multiplayer. After a couple of weeks of developing in my free time, it's just about ready for testing. I figured I'd pop it up here in case anyone was interested in trying it out. Also, it's a good example of C2's ability to create turn-based online multiplayer games when used in conjunction with a servers side scripting language.

<font size="5"><center>Play Triad v0.5 </center></font>

Please note: There are no computer players; this is strictly an online multiplayer game. You can test the game out by getting 2 other people to play with you, or more likely, open the game in 3 browser windows and pretend to be 3 different people.

Program Instructions:

• Enter a Username, and press play.
• Tap an Empty Seat at one of the six tables to sit in it.
• Once your table is full, a game will begin.

Game Instructions are a bit much to type out here, but you can get the gist of it by checking out this wikipedia entry.

Controls:

There are both touch, and mouse controls. They're relatively simple. Click/tap a card to select it. Click/tap and drag to select multiple cards. To sort your hand, drag a card (or group of selected cards), by clicking/tapping and holding. When it's your turn, you can play a hand by selecting the appropriate cards, and clicking/tapping play. Alternatively, drag hands onto the center of the table to play a hand.

Here are a couple screenshots:

<center><img src="http://i.imgur.com/57CKEPel.png" border="0">

<img src="http://i.imgur.com/250J8jvl.png" border="0"></center>

There are definitely feature I could add, like a dynamic table system, chat capabilities, and computer players, but they're not needed for my friends and I to play. However, I will probably publish the game to mobile platforms after some bug testing. Fortunately, it works quite nicely on CocoonJS.

Any feedback or bug reports are welcome. I hope you enjoy.

zatyka

Not too familiar with the rules of Triad but this is excellent

—

Thanks! I can't imagine there are that many folks on the forum who have ever even heard of the game. From what I've heard, people play it everywhere in China.

zatyka

Looks great.

Could you share a bit more about how you have made the multiplayer part? both server side and in C2?

cvp

Sure, lets start with the server. All the game logic (e.g. shuffling the deck, determining who wins, adjusting scores, etc) is scripted using PHP . When a player makes a decision that changes the status of the game, such as passing his/her turn, or playing a hand, the data is sent via ajax request. The ajax identifies the table number, the seat number that made the change, the type of change, and what the actual change is. Based on that info, the PHP program updates the game info on my server. The PHP script is quite large as it covers every possible process in the game. I think it ended up being around 500 lines of code.

Now for the client. Every second, the client sends an ajax request to a php page that pulls the game's current info from the server using a SQL query. Based on the data, the client updates whose turn it is, what cards have been played, current scores, etc.

This SQL table contains ALL the important game info. The only data saved on the clients local machine is relevant to presenting data from the server.

The process of sitting at a table, and playing a round goes something like this:

1. A player signs in with their name, which is temporarily saved client-side
2. The player goes to the lobby, and an ajax request pulls the current players at each table.
3. When the player joins an empty seat at a table, ajax sends the username to the server to update the table occupants.
4. When the 3rd person joins the table, the php program runs to shuffle the deck, randomly assign deal, and other game-setup processes, and the appropriate data is saved on the server.
5. The client sees that a new hand has been dealt based on changes in the gamedata pulled from the server.
6. If it's your turn, you will be given options for playing a hand, passing, and other things you can to do affect the game.
7. Once you've made your turn, an ajax request pushes the changes to the php program that updates the appropriate game data on the server.
8. The next player plays their turn... which again updates the appropriate data using an ajax request to a php program.
9. The same process of someone playing their turn, and updating the server continues until the program realizes that one player doesn't have any cards.
10. The round ends, the program adjusts the scores, and then restarts the process by shuffling the deck, and assigning the first turn, etc.

This method works quite nicely since Triad is a turn based game. Ajax requests would not be suitable to active multiplayer games.

I hope this helps.

zatyka Thanks for the info, that is very useful information.

I am working on a similar game type mechanic for a regular playing card game, such as a standard 5 card draw.

For the server side, I will be using the SignalR library for Microsoft .NET. I am still in the early prototyping but my goal is to integrate the SignalR library for server side events with C2. The client side for SignalR can be coded JavaScript.

The big advantage of SignalR is it will use the best available transport method for the user browser. It can use WebSocket or Long Polling without any different coding.

I will do a new posting when I will have a completed prototype.