Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

Tuesday, September 27, 2016

Create Zig Zag Game using cocos2d-x JavaScript

In This tutorial i will show you how easy it to build ZigZag game in JavaScript . why JavaScript?

  1. In case  you need to convert you game from C++ to JavaScript this is a proven test case that it can be done relatively easy .
  2. The c++ and JavaScript API's are almost the same . and most of the time  the JavaScript code is shorter and much easier both to write and understand . 
  3. Very Reusable it can be played on the Web , Mobile , Desktop 
  4. JavaScript is one of the must popular programming script in the world  it means you can find programmers very easy . its not the case with c++ where the learning curve much higher .
  5. No compilation times , you can debug and write your game script in the browser.
  6. Save Time . as the code is shorter JavaScript is dynamic , no memory handling , no pointers.
  7. Hot update ! via AssentManager  read about it here

    Conclusion : its much cheaper with JavaScript . 

You can take the code from the previous Tutorial where i developed C++ ZigZag game and compare the code .




To get the free source code of the game please subscribe to my mailing list .
You will get:
  1. full documented game source code in c++.
  2. full documented game source code in JavaScript.
  3. Inkscape graphic file that contains images used in the game.
  4. first to get more free stuff in the future and site updates.






  1. First you need to create Cocos2d-x JavaScript project :
    You can create one as it explaned here :
    Snake Game Using Cocos2d-x HTML5 - PART 1
    Once you finished creating the new project . copy the new source files and the resource files and overwrite the project default files .
  2. To test the game you need to run the game from local web server . just browse where you project is created from the web server url .
     
 The code :
The game creates endless procedural generated level , using Isometric blocks .
Using FIFO  list . and simple random function to place the blocks .
As in the picture :




The source code for the game is in 1 source file where all the game logic is  called app.js  ,that's it .

 
 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
ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        this.init( cc.color(255,255,255, 255) ); 
        this.winSize = cc.winSize;
        this.origin = cc.director.getVisibleOrigin(); 
        this.visibleSize = cc.director.getVisibleSize(); 
        //set game over screen visible == false
        this.setGameOverScreen();
        //set touch listeners
        var listener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            
            swallowTouches: true,
            onTouchBegan: function (touch, event) {  
               var target = event.getCurrentTarget();               
               target.onTouchesBegan(touch, event);
               return true;
                
            },
            onTouchMoved: function (touch, event) {
               
            },
            onTouchEnded: function (touch, event) { 
                
            }
        });
        cc.eventManager.addListener(listener, this);
         //setup score lable 
        this.setScoreLabel();
        //setup Level
        this.setLevel();
        //start game loop 
        this.schedule(this.gameLoop); 
        return true;
    },

This function is invoked first only once when game starts
Line 10 : call the "Game Over"  screen but as invisible at first 
Lines 12 - 28 : Set listener to the touch events , once touch detected the onTouchesBegan function will be called
Line 31 : Call the score label which will hold the player score
Line 40 : Call the initial level of blocks 
Line 42 : Call the game loop which be called 60 times per second ( or at list will try ) 
.
 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
73
74
75
76
77
78
79
setLevel:function () {
        //init variables
        //keep track on which block the circle is currently on 
        this.currentZorder = 0;
        //How many block will be visible on every given time on the screen 
        this.blocksNum = MAX_BLOCKS_ON_SCREEN;
        //how deep the blocks z order supposed to be , if its long play consider to rise the number
        this.zCount = MAX_Z_ORDER;
        //the bitwise boolean holder
        this.currentState = 0;
        //keep the score
        this.iScore = 0;
        //set into score label , this is needed when game restart
        this.labelScore.setString("0");
        //stop game loop indicator
        this.stopGameLoop = false;
        //set the start bit to on 
        this.currentState |= OperetionFlags.GAME_START;
        //the circle must be alwas above all other Spirits
        this.circle = new cc.Sprite(res.Circle_png); 
        this.circle.setTag(TAGS.CIRCLE);
        this.addChild(this.circle, this.zCount + 1);
        //scatter the blocks and Gems 
        var tempSprite = null;
        for (var i = 0; i < this.blocksNum; i++)
        {
            var spriteBlock = new cc.Sprite(res.Block_png);
            this.blocksList.push(spriteBlock);
            var back = this.blocksList.length-1;
            this.blocksList[back].setAnchorPoint(cc.p(0.0, 0.0));
            var userData  = new UserData(false, false);
            this.blocksList[back].setUserData(userData);
            this.blocksList[back].setTag(TAGS.BLOCK);
            this.zCount = this.zCount - 1;
            this.addChild(this.blocksList[back], this.zCount);
            var blockSizeWidth = this.blocksList[back].getContentSize().width;
            var blockSizHeight = this.blocksList[back].getContentSize().height;

            if (i == 0)
            {   //Start Game Reposition the blocks 
                this.blocksList[back].setPosition(cc.p(this.visibleSize.width / 2 + this.origin.x - (blockSizeWidth / 2),
                    this.visibleSize.height / 2 + this.origin.y - (blockSizHeight / 2)));
                this.circleblockY = this.blocksList[back].getPositionY() + blockSizHeight - (this.circle.getContentSize().height / 2);
                this.circleblockX = this.blocksList[back].getPositionX() + blockSizeWidth / 2;
                this.circle.setPosition(cc.p(this.circleblockX, this.circleblockY));
            }
            else
            {
                //As the first touch is to the right 
                //it is better to give the player some easy learning ajusting to the game 
                var bv2 = cc.p(0,0);
                if (i < 2)
                {
                    bv2 = this.setBlockPostion(tempSprite, 0);                  
                }
                else if (i == 2)
                {
                    bv2 = this.setBlockPostion(tempSprite, 0);
                }
                else if (i == 3)
                {
                    bv2 = this.setBlockPostion(tempSprite, 1);
                }
                else if (i == 4)
                {
                    bv2 = this.setBlockPostion(tempSprite, 1);
                }
                else if (i > 4)
                {
                    bv2 = this.setBlockPostion(tempSprite, this.generateRandDirection(2));
                }
                //set the new position of the block
                this.blocksList[back].setPosition(cc.p(bv2.x + this.origin.x, bv2.y + this.origin.y));
                //some random play ... 
                this.placeRandomGem(this.blocksList[back],i);                
            }
            tempSprite = this.blocksList[back];
        }
    },

This function is generate the level on screen
Line 6 : number of blocks on screen
Line 8 : when building isometric view , there is need to pay attention on your Z order of
Sprites , in our game the first block will start with very high Z order and each block  placed after
Will have lower Z order , this is what makes Isometric view its uniqueness.
Line 10: this is the "Multi Boolean" variable it is holding game states in form of on/off bits
Line 18 :turn the "START_GAME" bit on .
Line 22 :set the circle Z order to be the highest so it will be over the blocks 
Line 25: creating  procedural generated level .
Lines 39 - 76 : because we don't what the player to fail fast , we generate easy start .
first button click will move the Circle to he right , so 3 blocks is generated to the right

  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
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
invokeGame:function (delta) {
    
        var bBelow = false;

        if ((this.currentState & OperetionFlags.GAME_TOUCH_START) && (this.currentState & OperetionFlags.GAME_START))
        {
            if ((this.currentState & OperetionFlags.TOUCHED) && (this.currentState &  OperetionFlags.MOVE_RIGHT))
            {
                var x = this.circle.getPositionX() + (CIRCLE_SPEED * delta);
                this.circle.setPositionX(x);
            }
            else if ((this.currentState & OperetionFlags.TOUCHED) && (this.currentState &  OperetionFlags.MOVE_LEFT))
            {
                var x = this.circle.getPositionX() - (CIRCLE_SPEED * delta);
                this.circle.setPositionX(x);
            }
            //iterate the blocks 
            //1.check if circle fell
            //2.check if gem is on block 
            //3.move the blocks down and below the screen 
            //4.add new block on back 
            var randomSeed = 0;             
            for (var  i = 0;  i< this.blocksList.length;  i++)
            {
                var it = this.blocksList[i];
                var circleY = Math.round(this.circle.getPositionY());
                var circleX = Math.round(this.circle.getPositionX());    
                var blockHeight = it.getPositionY() + it.getContentSize().height;               
                //calculate dimond shape points 
                var A = cc.p(0,0);
                A.x = it.getPositionX() + (it.getContentSize().width / 2);
                A.y = blockHeight - it.getContentSize().width / 2;

                var B = cc.p(0,0);
                B.x = it.getPositionX();
                B.y = blockHeight - (it.getContentSize().width / 2) / 2;

                var C = cc.p(0,0);
                C.x = it.getPositionX() + (it.getContentSize().width / 2);
                C.y = blockHeight + (it.getContentSize().width / 2);

                var D = cc.p(0,0);
                D.x = it.getPositionX() + (it.getContentSize().width);
                D.y = blockHeight - (it.getContentSize().width / 2) / 2;

                //our collision detection is based on checking on our block dimond shape is 
                //intersction with the circle , for this we devide the dimond shape to 2 Triangles
                //and checking each triangle if the circle inside .
                var insideLeft = this.PointInTriangle(this.circle.getPosition(),
                    A,
                    B,
                    C);

                var insideRight = this.PointInTriangle(this.circle.getPosition(),
                    A,
                    C,
                    D);
     
                if (insideRight || insideLeft)
                {
                   this.handleCollision((it));
                }    
                else
                {
                    //when circle is out side the block stop the game
                    if (it.getUserData().start == true)
                    {
                        if (this.currentZorder == it.getLocalZOrder())
                        {
                            it.getUserData().start = false;
                            this.stopGameLoop = true;
                            //if stoped then invoke the circle drop down animation 
                            this.setFallingAnim();
                        }
                    }
                }

                if (bBelow)
                {
                    this.blocksList.shift();
                    var backSprite = this.blocksList[this.blocksList.length-1];
                }
                var y = it.getPositionY() - (SPEED * delta);
                //move block down
                it.setPositionY(y);

                //check if the sprite is below the screen then next iteration remove it 
                if (it.getPositionY() < 0 - (it.getContentSize().height))
                {
                    //mark to remove it in the next iteration 
                    bBelow = true;
                    //reuse it as new sprite to be on top of the FIFO list
                    var frontSprite = this.blocksList[0];
                    //log("frontSprite x:%f y:%f", frontSprite->getPositionX(), frontSprite->getPositionY());
                    var backSprite = this.blocksList[this.blocksList.length-1];
                    //log("backSprite x:%f y:%f", backSprite->getPositionX(), backSprite->getPositionY());
                    var bv2 = this.setBlockPostion(backSprite, this.generateRandDirection(2));
                    frontSprite.setPosition(cc.p(bv2.x + this.origin.x, bv2.y + this.origin.y));
                    //new Z order alway lower then the last one 
                    this.zCount = this.zCount - 1;
                    frontSprite.setLocalZOrder(this.zCount);
                    //some random play ... 
                    this.placeRandomGem(frontSprite, randomSeed);
                    
                    this.blocksList.push(frontSprite);
                    //++stopThis;
                }
                else
                {
                    bBelow = false;
                }
                randomSeed++;
            }
        }
        else if ((this.currentState & OperetionFlags.GAME_TOUCH_START) && ((this.currentState & OperetionFlags.GAME_START) == 0))
        {
            var y = circle.getPositionY() - ((CIRCLE_SPEED * 10) * delta);
            this.circle.setPositionY(y);
        }
    },

This function is invoked on each game loop
Line 3 : boolean that indicates when the block is below screen
Line 5 : all game logic will start only when player start the game and touched the screen
Line 23 :loop all blocks on screen
Lines 25 - 73 : to check collision detection between the "circle" and the current block we will 
need to find simple way to check when the circle is on the diamond shape on top of the block
to do this we will divide the diamond shape to 2 triangles and check if  the circle is inside .
As in this picture:


Lines 66 -73: when the circle moves to position where there is no block. stop the game
And trigger the falling circle animation
Lines 78- 82: when block sprite is below the screen set it in temp holder
Lines 85 : move the block sprite down along the Y
Lines 88 - 111: check if block below the screen then:
  • pop the front (FIRST) block 
  • reuse it by give it new random position
  • place it in the back of the FIFO list 

 
 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
 //set the circle falling animation 
    setFallingAnim:function()
    {
       
        var down = -50;
        var iMoveSide = -30;   
        if ((this.currentState & OperetionFlags.MOVE_RIGHT))
        {
             iMoveSide =  iMoveSide * -1;
        }
        var moveSideDir = this.circle.getPositionX() +  iMoveSide;
        //move circle to the side 
 var circleY =  this.circle.getPositionY();
        var moveSideAction = cc.moveTo(0.2, cc.p(moveSideDir,circleY));
        //move the circle down .
 var circleX =  this.circle.getPositionX();
        var moveDownAction = cc.moveTo(1, cc.p(circleX, -50));
        //call function when circle down animation is done 
        var gameOverAction = cc.callFunc(this.gameOverCallback, this);
        //order all actions
        var seq1 =  cc.sequence(moveSideAction,
                            moveDownAction ,
                            gameOverAction );
        //execute all animations on circle
        this.circle.runAction(seq1);
    },
 //invoke when felling animation sequence is done 
 gameOverCallback:function()
 {
  //invoke the game over screen 
  this.setGameOverScreenVisible(true);
  //turn off game start bit 
  this.currentState &= ~OperetionFlags.GAME_START;
 },

Those functions are to trigger the Circle falling animation and the "Game Over" screen popup
Line 14 : create action that will move the circle 30px to the side
Line 17 : create action that will move the down along the Y untill it reach to Y=-50 below visible screen
Lines 17 :create action that will invoke the function callback to popup the "Game over and retry" screen
Line 24: Execute all actions.
Line 31: call the "Game Over" screen by making it visible
Line 33: set GAME_START bit to off , so the game knows we ended the game 

 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
  onTouchesBegan:function (touch, event)
    {
            //check if game is started 
            if (this.currentState & OperetionFlags.GAME_START)
            {
                //check if touch is invoketed 
                if ((this.currentState & OperetionFlags.GAME_TOUCH_START) == 0)
                {
                    //set touch bit to on 
                    this.currentState |= OperetionFlags.GAME_TOUCH_START;
                }
                //check if right circle movment bit is off
                if ((this.currentState & OperetionFlags.MOVE_RIGHT) == 0)
                {
                    //turn off left bit 
                    this.currentState &= ~OperetionFlags.MOVE_LEFT;
                    //turn on touched and move right bit on 
                    this.currentState |= OperetionFlags.TOUCHED | OperetionFlags.MOVE_RIGHT;
                }
                else if ((this.currentState & OperetionFlags.MOVE_RIGHT)) //check if the right bit if on 
                {
                    //turn off right bit 
                    this.currentState &= ~OperetionFlags.MOVE_RIGHT;
                    //turn on touched and move left bit on 
                    this.currentState |= OperetionFlags.TOUCHED | OperetionFlags.MOVE_LEFT;
                }
            }
            else if((this.currentState & OperetionFlags.GAME_START) == 0)
            {
                //game is ended 
                //Retry touch is trigered reshuffle all blocks and start over 
                var  allNodes = this.getChildren();               
                for (var  it = 0;  it< this.blocksList.length;  it++)
                {
                    var node = this.blocksList[it];
                    if (node.getTag() == TAGS.BLOCK)
                    {
                        this.removeChild(node);
                    }
                    else if (node.getTag() == TAGS.CIRCLE)
                    {
                        this.removeChild(node);
                    }
                }   
                //clean blocks container
                this.blocksList.length = 0;
                //set gameover screen to un visible
                this.setGameOverScreenVisible(false);
                //Start Level all over again 
                this.setLevel();

            }
        
    },

This function is invoked when player touch the screen 
As the game is 1 button tap game allot of logic is happens here especially boolean logic
for this to avoid boolean HELL im using bitwise option you can read about it here

Line 4 : check if game started
Lines 7 - 11: check if first touch is invoked
Lines 13- 19 :check if touch is invoked , first move of the circle will be to the right
Lines 20 - 26 : check if the circle moves to the right , then change the MOVE_RIGHT to off
and MOVE_LEFT to on
Lines 28 - 52 :if the GAME_START bit is off , that means the game is ended , and we need to prepare to generate  new level
  • Remove All Block
  • Remove Circle (the player ) 
  • Clear the block container 
  • Set "Game over" screen visibility to false (hide)
  • procedural regenerated the level for new play session 


Those all the main functions that are used in the game , there are some more utility small functions
That glue it all together.

To get the FREE source code of this tutorial please subscribe to my mailing list. to get more free stuff and updates .

Posted by at 1 comment:
Labels: , , , , , ,

Sunday, January 24, 2016

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

Game Client Source code overview


The client in this game is developed using cocos2d-x framework using its JavaScript API,
This means by using this framework we are enabling our game to be cross platform .
With the same code base !  including the WebSocket part 
The game client game logic will be explained using the web version of Cocos2d-x.
And in the end i will show you how to compile the source code in iOS and Windows Desktop

To develop in JavaScript and HTML5 you can choose several tools.
You can use simple text editor like Vi , Notepad++ , and debug the code With
build-in Chrome Debugger . Or you can take the full IDE Approach as i shown in this Tutorial :Debug Cocos2d-x HTML5 Project using NetBeans IDE and Chrome browser in 10 easy steps.

 The game flow is very simple:
  1. Player enter its User name.
  2. Client Send the user name to the server
  3. Server confirms the user name and send back to the client
  4. Server Updates other client about new user 
  5. Client receives the confirmation from the server 
  6. Client enter to the Game room.
  7. Client plays , send the play move to server for confirmation 
  8. Server get the play move Confirms the move 
  9. Server send back confirmation to client and updates other clients about the player move

    and on and one until the game end  
You can see the game logic diagram for better understanding the game flow



Go to the source code you previously cloned from :
https://github.com/meiry/multiplayer_cocos2dx-js_using_netty_websockets

 Go to the /Client/WarCardJS directory this is where all the client side source code are in.
To run it im using simple Apache server installed locally .
then start it by going to where the index.html is.  like normal static web site .

Before we start we need to configure few things in our Cocos2d-x framework
In the project.json file we adding the additional files and modules that is part of this Game 
in our case we added the JS files which we are going to be using in our game 
and additional Cocos2d-x module.

project.json

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "noCache" : false,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d","extensions"],

    "jsList" : [
        "src/GameConfig.js",
        "src/GameScene.js",       
        "src/resource.js",
        "src/app.js",        
        "src/Player.js"
    ]
}



  1. Line 12 : New module is added called "extensions"    for advance GUI 
  2. Line 15 - 19 : The new js source files the game is using .

main.js

This file is the game bootstrap , that mean here the game starts , the first game scene Initialize
here .

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    // Pass true to enable retina display, on Android disabled by default to improve performance
    cc.view.enableRetina(cc.sys.os === cc.sys.OS_IOS ? true : false);
    // Adjust viewport meta
    cc.view.adjustViewPort(true);
    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(450, 800, cc.ResolutionPolicy.SHOW_ALL);
    // Instead of set design resolution, you can also set the real pixel resolution size
    // Uncomment the following line and delete the previous line.
    // cc.view.setRealPixelResolution(960, 640, cc.ResolutionPolicy.SHOW_ALL);
    // The game will be resized when browser size change
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new LoginScene());
    }, this);
};


  1. Line 10 : set the window resolution 
  2. Line 18 : The name of our first game scene called LoginScene ,
    the screen of the LoginScene will be shown first 
app.js 

This file is holding the main Scene called LoginScene  that Initialize  LOGIN Screen that lives inside the LoginLayer Object
This is the first file that starting the game .


  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
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
var TEXT_INPUT_FONT_NAME = "Thonburi";
var TEXT_INPUT_FONT_SIZE = 36;
var sceneIdx = -1;
var TEXT_FIELD_ERR = 1;
var LoginLayer = cc.Layer.extend({
    sprite:null,
    size:null,
    textFieldUserName:null,
    textErorrConnectedField:null, 
    enterWorldScene:null,
    textField:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        this.size = cc.winSize;        
        return true;
    },
     onEnter:function () {
        //----start2----onEnter
        this._super();         
        var winSize = cc.director.getWinSize();
        // Create the textfield
        this.textField = new ccui.TextField();
        this.textField.setMaxLengthEnabled(true);
        this.textField.setMaxLength(30);
        this.textField.setTouchEnabled(true);
        this.textField.fontName = TEXT_INPUT_FONT_NAME;
        this.textField.fontSize = 30;
        this.textField.placeHolder = "[click here for user name]";
        this.textField.x = winSize.width / 2.0;
        this.textField.y = winSize.height / 2.0;
        this.textField.addEventListener(this.textFieldEvent, this);
        this.addChild(this.textField);
        cc.MenuItemFont.setFontSize(35);
        var menu = new cc.Menu(
            new cc.MenuItemFont("Login Game", this.loginGame, this)
            );
        menu.alignItemsVerticallyWithPadding(4);
        menu.x = this.size.width / 2;
        menu.y = this.size.height / 2 - 50;
        this.addChild(menu,5);
    },
     onExit:function () {
         this._super();    
    },
    createErrorMsg:function () {
            this.textErorrConnectedField = new cc.TextFieldTTF("Error Connecting Server try again",
                                                            TEXT_INPUT_FONT_NAME,
                                                            TEXT_INPUT_FONT_SIZE+20);
            this.textErorrConnectedField.setTag(TEXT_FIELD_ERR);            
            this.textErorrConnectedField.x = cc.winSize.width / 2;
            this.textErorrConnectedField.y = cc.winSize.height / 2 +50;
            this.addChild(this.textErorrConnectedField,2);  
    },
    
    loginGame:function (sender) {
        //remove error msg if any 
        if(this.getChildByTag(TEXT_FIELD_ERR)!==null)
        {
            this.removeChildByTag(TEXT_FIELD_ERR);
        }
        
        //check login in the server 
        var txtUserName = this.textField.getString();
        var config = {
                    event:Events.LOGIN,
                    username:txtUserName
     };
        var message = Encode(config);
        try {
            ws = new WebSocket("ws://localhost:8888/ws"); 
            ws.onopen = function() {
                    ws.send(message);
            };
            ws.onmessage = function (e) {
                console.log("app->srv.ws.onmessage():"+e.data);
                if(e.data!==null || e.data !== 'undefined')
                { 
                      var jsonFromClient = Decode(e.data);
                      if(jsonFromClient.event === Events.LOGIN_DONE)
                      {
                           enterWorldScene = new EnterWorldScene(jsonFromClient);
                           cc.director.runScene(enterWorldScene);
                      }
                }
            };
            ws.onclose = function (e) {
                    
            };
            ws.onerror = function (e) {
                  
            };
        } catch (e) {
            console.error('Sorry, the web socket at "%s" is un-available', url);
        }
    },
    onClickTrackNode:function (clicked) {
        var textField = this._trackNode;
        if (clicked) {
            textField.attachWithIME();
        } else {
            textField.detachWithIME();
        }
    },
});
var LoginScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new LoginLayer();
        this.addChild(layer);
    }
    
});



  1. Lines 19 - 42 : Setup the Textbox and the login button 
  2. Line 37 : add listener to when the player is clicking the login button the loginGame function will be triggered.
  3. Lines 57 - 97 : The loginGame function , 
  4. Line 72 This function will open the WebSocket connection With the server .
    and wait for handshake confirmation from the server 
  5. Lines 76 -87 : the ws.onmessage callback is part of the browser WebSocket API
    and it is triggered when there is massage from the server.
  6. Lines 80 - 85 : when the massage is coming from the server first thing is the client do
    Is decode the JSON massage  , check if the event we receive are the right one in our case
    LOGIN_DONE ( as part of our protocol ) .
    If we got LOGIN_DONE it means the players was confirmed and we are ready to start the game and invoke the game scene called :"EnterWorldScene"  which holds the game logic.


     
In the next post i will teach you how the client game logic is developed:
Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 7





Posted by at 8 comments:
Labels: , , , , , , ,

Saturday, October 3, 2015

Snake Game Using Cocos2d-x Javascript Desktop - PART 5

Now that the game coding is done we can use the same code base almost without change for our game desktop version.
To run the main.js file which is the game entry point we need to compile Cocos2d-x RunTime which will load our game.

for this we use:
  1. Visual studio 2013 c++  community version . 
  2. The same code base we created in Snake Game Using Cocos2d-x HTML5 - PART 1 .


1.  Open VC++   then go to FILE -> Open -> Project/Solution . and navigate to where you created the SnakeJS project .  then navigate to deeper directory named:  proj.win32  :
 \cocos2d-x-3.8.1\Projects\SnakeJS\frameworks\runtime-src\proj.win32
And load the "SnakeJS" VC++ solution project called SnakeJS.sln .|



2. Once we done loading the Cocose2d-x Runtime source code into VC++ we ready to compile it.
we don't need Debug version for this example because for now we are not going to change any c++ source code ,
In VC++ :
  1. in the projects list on the right select our "SnakeJS" project . 
  2. go to the upper tool box there is drop down list with "Debug" selected . change it to "Release"




3. In VC++ which SnakeJS project selected go to and click on : BUILD -> Build SnakeJS
Wait until it is done to compile.




When it is done to compile. you should see in the VC++ bottom Output window  scroll to the end .


7>  4 File(s) copied
7>          1 file(s) copied.
7>          1 file(s) copied.
========== Build: 7 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

























4. Now we are ready to start our WindTakeFS game Navigate to :

cocos2d-x-3.8.1\Projects\SnakeJS\frameworks\runtime-src\proj.win32\Release.win32\

look for SnakeJS.exe click it to execute the game .









And your game should look like this :











We are ready to build our "SnakeJS" game for iOS the next tutorial :

Snake Game Using Cocos2d-x Javascript  iOS- PART 6 





Play the final SnakeJS game:

http://meiry.github.io/SnakeJS-html5/publish/html5/

The SnakeJS source code:

https://github.com/meiry/SnakeJS-html5















Posted by



at





6 comments:
  


















Labels:
,
,
,
,
,
,
,
,

















        

      









Subscribe to:
Posts (Atom)