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.

Subscribe to my newsletter AND Get FREE ZigZag Game Source code,and future 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 .

Subscribe to my newsletter AND Get FREE ZipZapZag Game Source code

Part 6: Multiplayer WebSocket Game server written in C using libuv & libwebsockets & Cocos2d-x-HTML5

This class is where all the game logic happens .
If you remember i I mentioned before about client prediction method , which makes the game to look
As it runs smooth without getting verification on each move . only authentication about the moves.
And if its wrong it will correct the position .

GameLayer.js

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 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449

var spriteFrameCache = cc.spriteFrameCache; var spriteFrameCacheGems = cc.spriteFrameCache; var TAG_PLAYER_NODE = 2; var TAG_GEM_NODE = 1; var TAG_BOMBOMB_NODE = 1; var ZORDER_PLAYER_NODE = 4; var ZORDER_GEM_NODE = 1; var player = null; var players ={}; var gems = [] ; var endPlayerPos = null; var distance = null; var directionX = null; var directionY = null; var startY = null; var startX = null; var speed = 300; var distance = null; var m_websocketMng = null; var counter_from_server_tmp =0; var gemBomb = null; var scoreLabel = null; var GameLayer = cc.LayerColor.extend({ sprite:null, winsize:null, player_seq:0, otherPlayersMoved:false, ctor:function (_websocketMng) { m_websocketMng = _websocketMng; this._super(cc.color(0, 128, 255, 255)); this.winsize = cc.director.getVisibleSize(); //cc.winSize; var listener = cc.EventListener.create({ event: cc.EventListener.TOUCH_ONE_BY_ONE, swallowTouches: true, onTouchBegan: function (touch, event) { var touchLocation = touch.getLocation(); if(player!=null) { //float can't maintain its value "as is" , so it will be saved as string //http://stackoverflow.com/questions/588004/is-floating-point-math-broken endPlayerPos = touchLocation; player.setEndPosX(endPlayerPos.x); player.setEndPosY(endPlayerPos.y); distance = Math.sqrt(Math.pow((endPlayerPos.x - player.x),2) + Math.pow((endPlayerPos.y - player.y),2) ); directionX = (endPlayerPos.x - player.x) / distance; directionY = (endPlayerPos.y - player.y) / distance; if(isNaN(directionX) || isNaN(directionY) ) { directionY = directionX = 0; } startY = player.y; startX = player.x; player.startAnim(); player.setMoving(true); } return true; }, onTouchMoved: function (touch, event) { //this.setPosition(this.getPosition() + touch.getDelta()); }, onTouchEnded: function (touch, event) { } }); cc.eventManager.addListener(listener, this); this.schedule(this.gameLoop); }, onEnter:function () { this._super(); var visibleOrigin = cc.director.getVisibleOrigin(); scoreLabel = new cc.LabelTTF("0", "Arial",80); var scoreLabelcontentSize = scoreLabel.getContentSize(); this.addChild(scoreLabel,20); scoreLabel.setPosition(cc.p(visibleOrigin.x + scoreLabelcontentSize.width, visibleOrigin.y + winsize.height - scoreLabelcontentSize.height)); var msgProtocolContainer = m_websocketMng.getMsgProtocol(); spriteFrameCache.addSpriteFrames(res.char_anim_plist,res.char_anim_png); player = Player.initSpriteFrame(spriteFrameCache.getSpriteFrame(this.getImageByState(states.PLAYER_B)), states.PLAYER_B, msgProtocolContainer.msgProtocol.player_name, msgProtocolContainer.msgProtocol.player_id); player.setXY(this.winsize.width / 2,this.winsize.height / 2); this.addChild(player,ZORDER_PLAYER_NODE,TAG_PLAYER_NODE); //check if players exists if(msgProtocolContainer.msgProtocol.hasOwnProperty("players")) { for (var i = 0; i < msgProtocolContainer.msgProtocol.players.length; i++) { this.AddOtherPlayerOnRegister(msgProtocolContainer.msgProtocol.players[i]); } } //handle gems if they exists if(msgProtocolContainer.hasOwnProperty("msgProtocolGems")) { this.scatterGems(msgProtocolContainer.msgProtocolGems); } //set this object to websocketMng so it can delegate back to here function calls m_websocketMng.setObjByStatus(this,null,100); }, scatterGems:function(_msgProtocolGems) { if(_msgProtocolGems.hasOwnProperty("simple_gems")) { for (var i = 0; i < _msgProtocolGems.simple_gems.length; i++) { this.AddBasicGemsToGame(_msgProtocolGems.simple_gems[i], _msgProtocolGems.simple_gems[++i]); } } if(_msgProtocolGems.hasOwnProperty("bomb_gems")) { for (var i = 0; i < _msgProtocolGems.bomb_gems.length; i++) { this.AddBombGemsToGame(_msgProtocolGems.bomb_gems[i], _msgProtocolGems.bomb_gems[++i]); } } }, AddBasicGemsToGame:function(_basicGem_x,_basicGem_y) { var gem1Basic = Gem.initSprite(null,states_gems.SIMPLE); this.addChild(gem1Basic,ZORDER_GEM_NODE,TAG_GEM_NODE); gem1Basic.x = _basicGem_x; gem1Basic.y = _basicGem_y; gems.push(gem1Basic); //cc.log("gem1:"+gem1.x+" "+gem1.y); }, AddBombGemsToGame:function(_bombGem_x,_bombGem_y) { spriteFrameCacheGems.addSpriteFrames(res.gem_b_anim_plist,res.gem_b_anim_png); gemBomb = Gem.initSprite(spriteFrameCacheGems.getSpriteFrame(this.getImageByState(states.BOMB)),states_gems.BOMB); this.addChild(gemBomb,ZORDER_PLAYER_NODE,TAG_BOMBOMB_NODE); gemBomb.x = _bombGem_x; gemBomb.y = _bombGem_y; gems.push(gemBomb); //cc.log("gemBomb:"+gemBomb.x+" "+gemBomb.y); }, AddOtherPlayerOnRegister:function(_ResponseFromServer) { var otherPlayer = Player.initSpriteFrame(spriteFrameCache.getSpriteFrame(this.getImageByState(states.PLAYER_B)), states.PLAYER_B, _ResponseFromServer.player_name, _ResponseFromServer.player_id); var x_ = parseFloat(_ResponseFromServer.end_player_pos_x); var y_ = parseFloat(_ResponseFromServer.end_player_pos_y); //otherPlayer.setXY(this.winsize.width / 2,this.winsize.height / 2); otherPlayer.setXY(x_,y_); var otherplayer_id = otherPlayer.getId(); players[otherplayer_id.toString()] = otherPlayer; //cc.log(Object.keys(players).length); this.addChild(otherPlayer,1,TAG_PLAYER_NODE); }, deletePlayer:function(_ResponseFromServer) { var p = players[_ResponseFromServer.player_id.toString()]; this.removeChild(p); delete players[_ResponseFromServer.player_id.toString()]; }, updateOtherPlayerOnMovment:function(_ResponseFromServer) { var p = players[_ResponseFromServer.player_id.toString()]; players[_ResponseFromServer.player_id.toString()].pushToResponsesList(_ResponseFromServer); if(players[_ResponseFromServer.player_id.toString()].player_x_r.length == 0 && players[_ResponseFromServer.player_id.toString()].getAnimStatus() == false) { players[_ResponseFromServer.player_id.toString()].startAnim(); } players[_ResponseFromServer.player_id.toString()].player_x_r = players[_ResponseFromServer.player_id.toString()].player_x_r.concat(_ResponseFromServer.player_x_r); players[_ResponseFromServer.player_id.toString()].player_y_r = players[_ResponseFromServer.player_id.toString()].player_y_r.concat(_ResponseFromServer.player_y_r); if(parseInt(_ResponseFromServer.collision_status) == 9) { players[_ResponseFromServer.player_id.toString()].simple_gems = _ResponseFromServer.simple_gems; players[_ResponseFromServer.player_id.toString()].bomb_gems = _ResponseFromServer.bomb_gems; players[_ResponseFromServer.player_id.toString()].status = _ResponseFromServer.status; players[_ResponseFromServer.player_id.toString()].player_id = _ResponseFromServer.player_id; players[_ResponseFromServer.player_id.toString()].utc_timestemp = _ResponseFromServer.utc_timestemp; players[_ResponseFromServer.player_id.toString()].score = _ResponseFromServer.score; players[_ResponseFromServer.player_id.toString()].collision_status = _ResponseFromServer.collision_status; console.log("players["+_ResponseFromServer.player_id.toString()+"].collision_status:"+players[_ResponseFromServer.player_id.toString()].collision_status); } counter_from_server_tmp++; }, updateScoreAndGems:function(_player) { var simple_gems = _player.simple_gems; var bomb_gems = _player.bomb_gems; for(var i =0 ; simple_gems.length;i++) { this.searchAndRemoveSimpleGems(simple_gems[i],simple_gems[++i]); } }, searchAndRemoveSimpleGems:function(_simple_gems_x,_simple_gems_y) { for(var i=0;i<gems.length;i++) { var xx = gems[i].x; var yy = gems[i].y; if(_simple_gems_x == xx && _simple_gems_y == yy) { //remove from game layer this.removeChild(gems[i]); //remove from gems array repo gems.splice(i, 1); break; } } }, gameLoop:function (delta) { //http://gamedev.stackexchange.com/questions/23447/moving-from-ax-y-to-bx1-y1-with-constant-speed //handle other players movment if(Object.keys(players).length>0 ) { for(var i=0;i<Object.keys(players).length;i++) { var playerKey = Object.keys(players)[i].toString(); if(players[playerKey].getResponsesList()==null) { continue; } //cc.log("playerKey:"+players[playerKey].player_name+" "+players[playerKey].serverResponsesList.length+" "+players[playerKey].player_id); if(players[playerKey].getResponsesList().length == 0) { continue; } //get the first response from server var stopAnim = 0; var playersResponsesListLen = players[playerKey].getResponsesList().length; if(players[playerKey].player_x_r.length > 0) { var x_ = parseFloat(players[playerKey].player_x_r.shift()); var y_ = parseFloat(players[playerKey].player_y_r.shift()); //console.log("FROM GAMELOOP:"+players[playerKey].player_name+" x:"+x_); //console.log("FROM GAMELOOP:"+players[playerKey].player_name+" y:"+y_); console.log("players[playerKey].player_name:"+players[playerKey].player_name+" players["+playerKey+"].collision_status:"+players[playerKey].collision_status); players[playerKey].move(x_,y_); if(players[playerKey].collision_status == 9) { //this.updateScoreAndGems(players[playerKey]); cc.log("players[playerKey].collision_status"); //players[playerKey].collision_status = 0; } } } } if(player.getMoving() == true) { var x = directionX * speed * delta; var y = directionY * speed * delta; //console.log("PLAYER:"+player.player_name+" x:"+x); //console.log("PLAYER:"+player.player_name+" y:"+y); player.move(x,y); var playerRect2 = player.getTheBoundingBox2(); //cc.log("Player x:"+playerRect2.x+" y:"+playerRect2.y); //client adds a sequence number to each request //client send move state var msgProtocolObj = new MsgProtocol(); //IMportent as deleta time is part of the calculation of each client , we need to send direction * speed //player_x and player_y will be used only for player prediction validation msgProtocolObj.player_x = x.toString(); msgProtocolObj.player_y = y.toString(); msgProtocolObj.player_seq = this.player_seq.toString(); msgProtocolObj.status = 2; msgProtocolObj.collision_status =0; msgProtocolObj.player_id = player.getId(); //keep track of the end move or the player msgProtocolObj.end_player_pos_x=endPlayerPos.x.toString(); msgProtocolObj.end_player_pos_y=endPlayerPos.y.toString(); msgProtocolObj.stop_player //keep track of the player movement for client side prediction and Synchronization //player.movmet_sequence_history.push(MsgProtocol); //As hashmap player.movmet_sequence_history[msgProtocolObj.player_seq] = msgProtocolObj; //send the predicted movment to the server //m_websocketMng.sendMassage(msgProtocolObj,this); //this.player_seq++; //var isCollision = player.BorderCollisionDetection(this.winsize); //Clollison var playerRect2 = player.getTheBoundingBox2(); var gemsToDelMap = [] ; var xx ,yy = 0; for(var i=0;i<gems.length;i++) { var gemRect = gems[i].getBoundingBox(); if ( cc.rectIntersectsRect(gemRect,playerRect2 ) ) //if(cc.rectContainsPoint(playerRect2, cc.p(gemRect.x,gemRect.y))) { cc.log("cc.intersectsRect(gemRect,playerRect2 )"); if(gems[i].state == states_gems.SIMPLE) { //inc the player score when it hit the gem if(xx != gems[i].x && yy != gems[i].y) { xx = gems[i].x; yy = gems[i].y; //cc.log("inside rectIntersectsRect:xx:"+xx+" yy:"+yy); //cc.log("inside rectIntersectsRect"+gems[i].getPosition().x+" "+gems[i].getPosition().y); player.score++; gemsToDelMap[i.toString()] = gems[i]; scoreLabel.setString(player.score); //remove from game layer this.removeChild(gems[i]); //remove from gems array repo gems.splice(i, 1); //inc the for loop i++; } } } } if(Object.keys(gemsToDelMap).length>0) { this.handleGemCollided(gemsToDelMap,msgProtocolObj); } //handle game window border if((Math.sqrt(Math.pow(player.x-startX,2)+Math.pow(player.y-startY,2)) >= distance) ) { player.setMoving(false); player.stopAnim(); msgProtocolObj.stop_player = 1; //m_websocketMng.sendMassage(msgProtocolObj,this); } m_websocketMng.sendMassage(msgProtocolObj,this); //console.log("PLAYER:"+msgProtocolObj+" y:"+y); this.player_seq++; } }, //End Game Loop //Handle the player and the gems collided and send to the server handleGemCollided:function(_gemsToDelMap,_msgProtocolObj) { if(Object.keys(_gemsToDelMap).length>0 ) { //var msgProtocolObj = new MsgProtocol(); //IMportent as deleta time is part of the calculation of each client , we need to send direction * speed //player_x and player_y will be used only for player prediction validation _msgProtocolObj.player_name =player.player_name ; _msgProtocolObj.player_id= player.player_id; _msgProtocolObj.utc_timestemp= getUTCTimestamp(); _msgProtocolObj.simple_gems = []; _msgProtocolObj.bomb_gems = []; _msgProtocolObj.score = player.score; _msgProtocolObj.collision_status =8; //Extract the gems to send to the server , the keys are the positions the server set to the gems for(var i=0;i<Object.keys(_gemsToDelMap).length;i++) { var gemsToDelKey = Object.keys(_gemsToDelMap)[i].toString(); var gemX = _gemsToDelMap[gemsToDelKey].x; var gemY = _gemsToDelMap[gemsToDelKey].y; if(_gemsToDelMap[gemsToDelKey].type == states_gems.SIMPLE) { _msgProtocolObj.simple_gems.push(gemX); _msgProtocolObj.simple_gems.push(gemY); } if(_gemsToDelMap[gemsToDelKey].type == states_gems.BOMB) { _msgProtocolObj.bomb_gems.push(gemX); _msgProtocolObj.bomb_gems.push(gemY); } } //var buf = Encode(msgProtocolObj); //cc.log("FROM CLIENT SCORE:"+buf); //m_websocketMng.sendMassage(msgProtocolObj,this); } }, syncPlayerActions:function(_ResponseFromServer) { var fraud = true; var i =0; //handel the client prediction and the server response . //1. check the last seq element first if it is in the client history var srv_player_seq_len = _ResponseFromServer.player_seq.length; var srv_player_seq_elm = _ResponseFromServer.player_seq[srv_player_seq_len-1]; //create new copy of player so it not be affected from the main player instace which get updated in the game loop var PlayerCopy = player; //cc.log("Create new PlayerCopy"); //check if there is seq tag in the client history hash if(srv_player_seq_elm in PlayerCopy.movmet_sequence_history) { //get the msg_protocol from client by the seq name from server var cln_msg_protocol = PlayerCopy.movmet_sequence_history[srv_player_seq_elm]; //check if there is match var srv_player_player_x_r_elm = _ResponseFromServer.player_x_r[srv_player_seq_len-1]; var srv_player_player_y_r_elm = _ResponseFromServer.player_y_r[srv_player_seq_len-1]; if(cln_msg_protocol.player_x == srv_player_player_x_r_elm && cln_msg_protocol.player_y == srv_player_player_y_r_elm) { //If it got to this point this mean that the history from this point and back needs to be cleaned fraud = false; PlayerCopy = null; //cc.log("Delete PlayerCopy"); } } }, getImageByState:function(stateimg) { //cc.log("stateimg:"+stateimg); switch(stateimg) { case states.PLAYER_B: { return "l0_sprite_b_1.png"; } case states.PLAYER_Y: { return "l0_sprite_y_1.png"; } case states.PLAYER_R: { return "l0_sprite_r_1.png"; } case states.BOMB: { return "sprite_gem_b0.png"; } } } });

Lines 30 : The class constructor .
Lines 35-40: setting the touch listener , to support single touch each time.
Lines 42-61:we need to calculate the direction between the touch and the position of the player
For this when the user of the game touch the screen the position of the touch is saved and also distance and the the direction .
Lines 73-74:The initialization of the EventManger which takes the listener object that was defined.
then the game loop starts (the scheduler ) and calls the gameloop function.
Note that there is also game loop in the server . the real game logic will be happening in the server
Here the game loop will only be used to move the objects .
Lines 79 -96: When layer is created there are 2 phases.
1. Object initialization and this is when the constructor is called
and then
2. When layer is done rending this is when OnEnter called .
In this function we set the player in its first position .
Lines 100-102: Checking if there are also extra "Players" which we need to render.
This mean that when the player is created on the server , the server also will add to the player the additional player that are in the game .
Lines 152 - 164: AddOtherPlayerOnRegister this function will create new Player on the client game 
those player will be driven only by the data that is received from the server .
Lines 167-171:deletePlayer this function will delete the player from the screen and also from the
player[] hash map
Lines 173-193: updateOtherPlayerOnMovment when response from there server arriving with value 4 
when this function is called few actions is taken 
1. the player get fatched from the player map by the player id 
2. check is preformed to see if the movement array (player_x_r ,player_y_r ) contains data
3. start the player animation id does .
Lines 229 - 263: The main GameLoop this function is divided to 3 main parts. 
first is the part where it takes cars the "other players" which are the players connected to the server 
and we can see them in our client . on each tick of the game loop ( which means every time the gameloop function get called).
the loop will check if there are players that needs to be handled .
Lines 270-297:The second part of the gameloop . in this part the current player is handled
and the client prediction mechanism kicked in . in short what this mean is that the player
no matter what keeps moving where it is supposed to more .and the movements are kept in the :
movmet_sequence_history Array in lines 281 - 293 we are creating the protocol object that is
ready to be send to the server but JUST NOT NOW.
Lines 397-425: The Third part is where the client start to synchronize with the data that is  received from the server. the data will be always what is calculated ( in our case only the  player movements)
step before the present movement . this is the client side prediction verification.
if it out of sync it will correct it self on the client .


Thats it ! Start the server , run multiple browser clients and see them move .
I hope you had fun to learn some new stuff .
Please register my mailing list to get new updates

Get Free Email Updates