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
Labels: , , , , , ,

1 comment:

  1. legitimate paper writing servicesNovember 17, 2017 at 2:26 AM

    Good work! This is easy and well described game code for the begginers. I will use this for my game project. Thanks for sharing this game code with us.

    ReplyDelete

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

Subscribe to: Post Comments (Atom)