Sunday, January 24, 2016

Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 7

Game Client Source code overview


As discussed in the previous Server code review posts , here is reminder :
Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 1
I wrote about basic principle in MMO games in which the game is actually played on the server
That means the client side needs to send information about every future move it does ,
AND also to get confirmation from the server that indicate the move is valid .
The communication is done via WebSocket protocol , and the "language" the client
"talks" to the server. this "language" can also be called protocol in our game it is:
JSON structure and Events that both the client and the server must know about.
Example  of JSON massage exchange between the client and the server .


GameConfig.js

The configuration of the game client is defined in this file .
It contains the Events enumeration , the WebSocket Cocos2d-x-js definition and the cards hash-map.And 2 JSON helpers functions

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var WebSocket = WebSocket || window.WebSocket || window.MozWebSocket; 
var ws = null;

var cards = {
    c1:"cardClubsA.png",
    c2:"cardClubsJ.png",
    c3:"cardClubsK.png",
    ...
    ...
    ...
    c53:"cardClubs9.png",
};

Events  = {
    HANDSHAKE_COMPLETE_SUCCESS:1,
    LOGIN:2,
    LOGIN_DONE:3,
    NEW_USER_LOGIN_DONE:4,
    PLAY:5,
    PLAY_DONE:6,
};


var Encode = function(obj) {
       return JSON.stringify(obj);
   };
var Decode = function(obj) {
    return JSON.parse(obj);
};


  1. Line 1 : This is how cocos2d-x defines the Cross platform WebSocket object .
  2. Lines 4 - 12 : The cards hash map (the complete list is in the original source code ).
    The server and the client most have the same keys to the right cards names .
    see:Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 3
    Look in the GameManager.java at the bottom of this file for the cards hash in the server side .
    the setCardsHash() fucntion .
  3. Lines 14 - 21 : This is first part of the so called "language" we defined between the Client and the Server.
    Those events are also defined in the server code in Config.java file  :
    Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 4

    Line 15  : When Websocket protocol is confirmed.
    Line 16  : Login request form the client .
    Line 17  ; Login is handled , response to client that login is done.
    Line 18  : New User is joined the room.
    Line 19  : Player is done its turn and played.
    Line 20 : Response to all other player and the current player that the turn is done
  4. Lines 24 - 26 : Helper function which convert JSON object to string.
  5. Lines 27 - 29 : Helper function which convert JSON string to object.


Player.js

 This class is representing the Player class , The player class members are the same (almost )
As the server Player class , again as you remember the game is played on the server .
With some additional helper functions.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var TEXT_INPUT_FONT_NAME = "Thonburi";
var TEXT_INPUT_FONT_SIZE = 36;
var TEXT_INPUT_FONT_SIZE_PLAYER = 20;
 var Player = cc.Sprite.extend({
    id:null,
    username:null,
    event:null,
    activecardid:null,
    activeplayerid:null,
    registertionnum:null,
    winner:null,
    winnercards:"",
    numcardsleft:null,
    spriteSize:null,
    textFieldUserName:null,
    ctor: function(_id,_username,_activecardid){        
        this.id = _id;
        this.username = _username;
        this.activecardid = _activecardid;
        var cardName = this.getPlayerCardById(this.activecardid);
        this._super("#"+cardName);
       
    },    
    onEnter:function () {        
        this._super();  
        this.spriteSize = this.getContentSize();
        this.setPlayerNameCaption(this.username);
        this.setPlayerNumberOfCardsCaption(this.numcardsleft);
    },
    onExit:function () {        
         this._super();      
    },
    getPlayerCardById:function(_cardId)
    {
        var cardName =  cards[_cardId];
        return cardName;
    },
    setPlayerNameCaption:function(_name)
    {
        this.textFieldUserName = new cc.TextFieldTTF(_name,
            TEXT_INPUT_FONT_NAME,
            TEXT_INPUT_FONT_SIZE_PLAYER);
        this.textFieldUserName.setTextColor(cc.color.RED);
        this.textFieldUserName.x = this.spriteSize.width / 2;
        this.textFieldUserName.y = 0-TEXT_INPUT_FONT_SIZE_PLAYER;
        this.addChild(this.textFieldUserName,2); 
    },
    updatePlayerNumberOfCardsCaption:function(_numberOfCards)
    {
        this.numcardsleft = _numberOfCards
        this.textFieldNumberOfCards.setString("Cards:"+this.numcardsleft); 
    },
    setPlayerNumberOfCardsCaption:function(_numberOfCards)
    {
        this.textFieldNumberOfCards = new cc.TextFieldTTF("Cards:"+_numberOfCards,
            TEXT_INPUT_FONT_NAME,
            TEXT_INPUT_FONT_SIZE_PLAYER);
        this.textFieldNumberOfCards.setTextColor(cc.color.RED);
        this.textFieldNumberOfCards.x = this.spriteSize.width / 2;
        this.textFieldNumberOfCards.y = 0-(TEXT_INPUT_FONT_SIZE_PLAYER+TEXT_INPUT_FONT_SIZE_PLAYER);
        this.addChild(this.textFieldNumberOfCards,2); 
    },
    setNewCardById:function (_cardid)
    {
        //get the right card from the cards hash
        var cardName =  cards[_cardid];
        this.activecardid = cardName;
        //this._super(this.playerSpriteFrameName);
        this.setSpriteFrame(cardName);
    },
});

  1. Lines 1 -15 : Variables Definition of the player members . almost the same as the server side
    Player here is reminder:
    Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 5
  2. Lines 16 -21 : the player constructure that init the player current card , so the player visual
    will be his current card to play. 
  3. Lines 24 - 28 : The first function according to the Cocos2d-x reference which be triggered
    when the sprite is render to the screen .
    it will invoke 2 functions:
    setPlayerNameCaption - set the player name.
    setPlayerNumberOfCardsCaption - set the number of cards the player left with.
  4. The other functions as helper functions that are self explained.

    

    5. 



In  the next  part of the tutorial i will explain about the final client source code 
Where all the client game logic is happen :
Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 8




 









Posted by



at






















Labels:
,
,
,
,


















No comments:















Post a Comment






Note: Only a member of this blog may post a comment.














        

      









Subscribe to:
Post Comments (Atom)